1
0
Files
auto-git-gui/settings.html
Victor Giers 02b26d62ad auto-git:
[change] settings.html
2025-05-24 20:49:31 +02:00

243 lines
7.5 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Einstellungen</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; /* keine Scrollbars */
display: flex;
align-items: center; /* vertikal zentrieren */
justify-content: center; /* horizontal zentrieren */
background: rgba(0,0,0,0.1);/* halbtransparenter Untergrund */
font-family: sans-serif;
-webkit-user-select: none;
user-select: none;
}
.dialog {
border: 2px solid #fbcfe8;
border-radius: 8px;
padding: 1rem;
width: 100%;
height: 100%;
box-sizing: border-box;
background: white;
position: relative;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.header h1 {
font-size: 1.25rem;
margin: 0;
}
.close-btn {
background: transparent;
border: none;
font-size: 1.25rem;
cursor: pointer;
color: #9f1239;
}
.options {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.option {
display: flex;
align-items: center;
}
.option input[type="checkbox"] {
margin-left: 1.5rem;
margin-right: 0.5rem;
}
.buttons {
margin-top: 1rem;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
button {
padding: 0.4rem 0.8rem;
border-radius: 4px;
border: 1px solid #ccc;
background: white;
cursor: pointer;
}
button:hover { background: #f3f4f6; }
</style>
<script>
window.addEventListener('DOMContentLoaded', async () => {
// Elemente holen
const cbSky = document.getElementById('skymode');
const cbSkip = document.getElementById('skipPrompt');
const thresholdInput = document.getElementById('intelligentCommitThresholdInput');
const ok = document.getElementById('okBtn');
const cancel = document.getElementById('cancelBtn');
const close = document.getElementById('closeBtn');
// Initialwerte parallel laden
const [initialSky, initialSkip, initialThreshold] = await Promise.all([
window.settingsAPI.getSkyMode(),
window.settingsAPI.getSkipPrompt(),
window.electronAPI.getIntelligentCommitThreshold()
]);
// Inputs setzen
cbSky.checked = initialSky;
cbSkip.checked = initialSkip;
thresholdInput.value = initialThreshold;
// **Vorschau**: Sky-Mode sofort übernehmen
cbSky.addEventListener('change', async () => {
await window.settingsAPI.setSkyMode(cbSky.checked);
});
// Threshold live speichern + clamp
/*
thresholdInput.addEventListener('blur', async () => {
let v = parseInt(thresholdInput.value, 10);
if (isNaN(v)) v = initialThreshold; // wenn komplett leer gelassen
if (v < 1) v = 1;
if (v > 1000) v = 1000;
thresholdInput.value = v;
await window.settingsAPI.setIntelligentCommitThreshold(v);
});
*/
// OK: alles final speichern
ok.addEventListener('click', async () => {
await window.settingsAPI.setSkipPrompt(cbSkip.checked);
// SkyMode haben wir ja schon beim Change gesetzt
// Threshold speichern (immer Wert aus Feld nehmen!)
let threshold = parseInt(thresholdInput.value, 10);
if (isNaN(threshold)) threshold = 10;
if (threshold < 1) threshold = 1;
if (threshold > 1000) threshold = 1000;
await window.settingsAPI.setIntelligentCommitThreshold(threshold);
// Dropdowns speichern
const commitSel = document.getElementById('commitModelSelect');
const readmeSel = document.getElementById('readmeModelSelect');
alert('OK gedrückt');
if (commitSel) await window.settingsAPI.setCommitModel(commitSel.value);
if (readmeSel) await window.settingsAPI.setReadmeModel(readmeSel.value);
window.settingsAPI.close();
});
// Cancel / Close: SkyMode zurücksetzen, dann schließen
const rollback = async () => {
await window.settingsAPI.setSkyMode(initialSky);
window.settingsAPI.close();
};
cancel.addEventListener('click', rollback);
close.addEventListener('click', rollback);
const container = document.getElementById('ollama-model-selectors');
const res = await window.electronAPI.ollamaList();
if (res.status === 'no-cli') {
container.innerHTML = `
<div style="color:red;font-weight:bold;margin:1em 0;">
!! You need to install Ollama to use intelligent message & README generation !!
</div>`;
return;
}
if (res.status === 'error') {
container.innerHTML = `<div style="color:orange">Error fetching models: ${res.msg}</div>`;
return;
}
// Liste der Modell-Namen extrahieren
const names = res.models.map(m => m.name || m.model).filter(Boolean);
const qwen = names.filter(n => /^qwen2\.5-coder(:[\w\-.]+)?$/.test(n));
if (!qwen.length) {
// keine qwen2.5-coder → Pull-Buttons
container.innerHTML = `
<button id="pullCommitModelBtn" style="margin-bottom:8px;">
ollama pull qwen2.5-coder:7b
</button><br>
<button id="pullReadmeModelBtn">
ollama pull qwen2.5-coder:32b
</button>`;
document.getElementById('pullCommitModelBtn').onclick = async () => {
await window.electronAPI.ollamaPull('qwen2.5-coder:7b');
location.reload();
};
document.getElementById('pullReadmeModelBtn').onclick = async () => {
await window.electronAPI.ollamaPull('qwen2.5-coder:32b');
location.reload();
};
return;
}
// Dropdowns aufbauen
const makeOpts = (arr, sel) =>
arr.map(m => `<option ${m===sel?'selected':''}>${m}</option>`).join('');
// Default-Auswahl aus Settings (oder erstes gefundenes)
const commitDefault = qwen.find(m=>m.includes('7b'))||qwen[0];
const readmeDefault= qwen.find(m=>m.includes('32b'))||qwen[0];
const currentCommit = await window.settingsAPI.getCommitModel?.() || commitDefault;
const currentReadme= await window.settingsAPI.getReadmeModel?.() || readmeDefault;
container.innerHTML = `
<label>Model for commit message generation:
<select id="commitModelSelect">
${makeOpts(qwen, currentCommit)}
</select>
</label><br>
<label>Model for README generation:
<select id="readmeModelSelect">
${makeOpts(qwen, currentReadme)}
</select>
</label>`;
});
</script>
</head>
<body>
<div class="dialog">
<div class="header">
<h1>Settings</h1>
<button class="close-btn" id="closeBtn"></button>
</div>
<div class="options">
<label class="option">
<input type="checkbox" id="skymode" />
Sky Mode
</label>
<label class="option">
<input type="checkbox" id="skipPrompt" />
Skip prompt asking to remove .git folder if it has only one commit and no changes
</label>
<label class="block mb-2 font-semibold">
Intelligent commit after
<input type="number" id="intelligentCommitThresholdInput" min="1" max="1000" value="10" step="1" class="border rounded px-2 py-1 w-20 mx-1">
lines of diff
</label>
<div class="options">
<!-- Hier kommt das Model-Selector-HTML rein -->
<div id="ollama-model-selectors"></div>
</div>
<!-- Weitere Optionen in Zukunft hier hinzufügen -->
</div>
<div class="buttons">
<button id="cancelBtn">Cancel</button>
<button id="okBtn">OK</button>
</div>
</div>
</body>
</html>