admin
57cacd9233
- Migrate all 7 HTML templates + CSS from Go string constants to individual go:embed files in internal/web/templates/ (templates.go: 2150→35 lines) - Split server.go into auth.go, handlers.go, funcmap.go (server.go: 540→120 lines) - Rename controller subdomain from dashboard.* to felhom.* in Traefik labels - Update documentation (CLAUDE.md, README.md, CONTEXT.md) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
331 lines
15 KiB
HTML
331 lines
15 KiB
HTML
{{define "deploy"}}
|
||
{{template "layout_start" .}}
|
||
|
||
<div class="page-header">
|
||
<div style="display:flex;align-items:center;gap:.5rem">
|
||
<a href="/stacks" class="btn btn-sm btn-outline">← Vissza</a>
|
||
<h2>{{.Meta.DisplayName}} — Telepítés</h2>
|
||
</div>
|
||
<a href="/apps/{{.Meta.Slug}}" class="btn btn-sm btn-outline">ℹ️ Részletek</a>
|
||
</div>
|
||
|
||
<div class="deploy-container">
|
||
<div class="deploy-info">
|
||
<img class="deploy-logo" src="{{.LogoURL}}" alt="" onerror="this.onerror=function(){this.style.display='none'};this.src='{{.LogoPNGURL}}'">
|
||
<div>
|
||
<h3>{{.Meta.DisplayName}}</h3>
|
||
{{if .Meta.Description}}<p>{{.Meta.Description}}</p>{{end}}
|
||
<div class="stack-meta-badges">
|
||
{{if .Meta.Resources.MemRequest}}<span class="meta-badge">~{{.Meta.Resources.MemRequest}}</span>{{end}}
|
||
{{if .Meta.Resources.PiCompatible}}<span class="meta-badge meta-badge-ok">Pi kompatibilis</span>{{end}}
|
||
{{if .Meta.Resources.NeedsHDD}}<span class="meta-badge">HDD szükséges</span>{{end}}
|
||
</div>
|
||
<a href="/apps/{{.Meta.Slug}}" class="btn btn-sm btn-outline" style="margin-top:0.5rem">
|
||
Részletes leírás, képernyőképek
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{{if .AlreadyDeployed}}
|
||
<div class="alert alert-info">
|
||
Ez az alkalmazás már telepítve van. Az alábbi beállítások csak olvashatók.
|
||
</div>
|
||
{{end}}
|
||
|
||
{{if and (not .AlreadyDeployed) .MemoryInfo}}
|
||
{{with .MemoryInfo}}
|
||
{{if .Available}}
|
||
<div class="memory-summary{{if .Blocked}} memory-blocked{{end}}">
|
||
{{if .Blocked}}
|
||
<div class="alert alert-error" style="margin-bottom:0">
|
||
Nincs elég memória! Foglalás telepítés után: {{.AfterMB}} MB / {{.UsableMB}} MB
|
||
</div>
|
||
{{else}}
|
||
<div class="memory-summary-header">
|
||
<span class="memory-summary-label">Memória foglalás</span>
|
||
<span class="memory-summary-value">{{.AfterMB}} MB / {{.UsableMB}} MB ({{.Percent}}%)</span>
|
||
</div>
|
||
<div class="memory-bar-stacked">
|
||
<div class="memory-bar-segment memory-bar-committed" style="width:{{.CommittedPercent}}%" title="Jelenlegi foglalás: {{.CommittedMB}} MB"></div>
|
||
<div class="memory-bar-segment memory-bar-new" style="width:{{subtract .Percent .CommittedPercent}}%" title="{{$.Meta.DisplayName}}: +{{.NewRequestMB}} MB"></div>
|
||
</div>
|
||
<div class="memory-bar-legend">
|
||
<span class="memory-legend-item"><span class="memory-legend-dot memory-legend-committed"></span>Jelenlegi foglalás ({{.CommittedMB}} MB)</span>
|
||
<span class="memory-legend-item"><span class="memory-legend-dot memory-legend-new"></span>{{$.Meta.DisplayName}} (+{{.NewRequestMB}} MB)</span>
|
||
</div>
|
||
{{if .OvercommitWarn}}
|
||
<div class="alert alert-warning" style="margin-top:0.5rem;margin-bottom:0">
|
||
Az alkalmazások csúcsterhelése meghaladhatja a rendelkezésre álló memóriát.
|
||
Normál használat mellett ez nem okoz problémát.
|
||
</div>
|
||
{{end}}
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
{{end}}
|
||
{{end}}
|
||
|
||
<form id="deploy-form" class="deploy-form">
|
||
{{if .AutoFields}}
|
||
<div class="form-section">
|
||
<h4>Automatikusan generált értékek</h4>
|
||
<p class="form-section-desc">Ezek az értékek automatikusan létrejönnek a telepítéskor.</p>
|
||
{{range .AutoFields}}
|
||
<div class="form-group form-group-auto">
|
||
<label>{{.Label}}</label>
|
||
<span class="auto-generated-badge">✓ Automatikusan generálva</span>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
|
||
{{if .UserFields}}
|
||
<div class="form-section">
|
||
<h4>Beállítások</h4>
|
||
{{range .UserFields}}
|
||
<div class="form-group">
|
||
<label for="field-{{.EnvVar}}">
|
||
{{.Label}}
|
||
{{if or .Required (eq .Type "password")}}<span class="required">*</span>{{end}}
|
||
{{if .LockedAfterDeploy}}<span class="locked-hint">telepítés után nem módosítható</span>{{end}}
|
||
</label>
|
||
|
||
{{if eq .Type "select"}}
|
||
<select id="field-{{.EnvVar}}" name="{{.EnvVar}}" class="form-control"
|
||
{{if $.AlreadyDeployed}}disabled{{end}}>
|
||
{{range .Options}}
|
||
<option value="{{.Value}}">{{.Label}}</option>
|
||
{{end}}
|
||
</select>
|
||
{{else if eq .Type "password"}}
|
||
<div class="input-with-button">
|
||
<input type="text" id="field-{{.EnvVar}}" name="{{.EnvVar}}"
|
||
class="form-control" value="{{.Default}}"
|
||
placeholder="{{.Placeholder}}"
|
||
data-field-type="password"
|
||
required
|
||
{{if $.AlreadyDeployed}}disabled{{end}}>
|
||
<button type="button" class="btn btn-sm btn-outline"
|
||
onclick="generatePassword('field-{{.EnvVar}}')">Generálás</button>
|
||
</div>
|
||
{{else if eq .Type "boolean"}}
|
||
<label class="toggle">
|
||
<input type="checkbox" id="field-{{.EnvVar}}" name="{{.EnvVar}}" value="true"
|
||
{{if $.AlreadyDeployed}}disabled{{end}}>
|
||
<span class="toggle-label">Igen</span>
|
||
</label>
|
||
{{else}}
|
||
<input type="text" id="field-{{.EnvVar}}" name="{{.EnvVar}}"
|
||
class="form-control" value="{{.Default}}"
|
||
placeholder="{{.Placeholder}}"
|
||
{{if .Required}}required{{end}}
|
||
{{if $.AlreadyDeployed}}disabled{{end}}>
|
||
{{end}}
|
||
|
||
{{if .Description}}
|
||
<span class="form-hint">{{.Description}}</span>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
|
||
{{if not .AlreadyDeployed}}
|
||
<div class="deploy-actions">
|
||
<button type="submit" class="btn btn-primary btn-lg"{{if and .MemoryInfo (index .MemoryInfo "Blocked")}} disabled title="Nincs elég memória"{{end}}>Telepítés indítása</button>
|
||
<a href="/stacks" class="btn btn-outline">Mégsem</a>
|
||
</div>
|
||
{{end}}
|
||
</form>
|
||
|
||
<div id="deploy-progress" class="deploy-progress" style="display:none">
|
||
<h3>Telepítés folyamatban...</h3>
|
||
<div class="deploy-steps">
|
||
<div class="deploy-step active" id="step-config">
|
||
<span class="step-icon">⏳</span>
|
||
<span class="step-text">Konfiguráció mentése...</span>
|
||
</div>
|
||
<div class="deploy-step" id="step-containers">
|
||
<span class="step-icon">⏳</span>
|
||
<span class="step-text">Konténer(ek) indítása...</span>
|
||
</div>
|
||
<div class="deploy-step" id="step-health">
|
||
<span class="step-icon">⏳</span>
|
||
<span class="step-text">Alkalmazás inicializálása...</span>
|
||
</div>
|
||
</div>
|
||
<div id="deploy-warning" class="alert alert-warning" style="display:none"></div>
|
||
<div id="deploy-result" style="display:none"></div>
|
||
<p class="deploy-elapsed" id="deploy-elapsed"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function generatePassword(fieldId) {
|
||
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||
let pass = '';
|
||
const arr = new Uint8Array(16);
|
||
crypto.getRandomValues(arr);
|
||
for (let i = 0; i < 16; i++) {
|
||
pass += chars[arr[i] % chars.length];
|
||
}
|
||
document.getElementById(fieldId).value = pass;
|
||
}
|
||
|
||
document.getElementById('deploy-form').addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
|
||
// Client-side validation: check all password fields are filled
|
||
const passwordFields = e.target.querySelectorAll('input[data-field-type="password"]');
|
||
for (const pf of passwordFields) {
|
||
if (!pf.disabled && pf.value.trim() === '') {
|
||
const label = pf.closest('.form-group').querySelector('label').textContent.trim();
|
||
alert('Kötelező mező: ' + label + '\nHasználja a Generálás gombot vagy írjon be egy jelszót.');
|
||
pf.focus();
|
||
return;
|
||
}
|
||
}
|
||
|
||
// Client-side validation: check all required fields
|
||
const requiredFields = e.target.querySelectorAll('input[required], select[required]');
|
||
for (const rf of requiredFields) {
|
||
if (!rf.disabled && rf.value.trim() === '') {
|
||
const label = rf.closest('.form-group').querySelector('label').textContent.trim();
|
||
alert('Kötelező mező: ' + label);
|
||
rf.focus();
|
||
return;
|
||
}
|
||
}
|
||
|
||
const btn = e.target.querySelector('[type=submit]');
|
||
btn.disabled = true;
|
||
btn.textContent = 'Telepítés folyamatban...';
|
||
|
||
const values = {};
|
||
const inputs = e.target.querySelectorAll('input, select');
|
||
inputs.forEach(function(el) {
|
||
if (el.name && !el.disabled) {
|
||
if (el.type === 'checkbox') {
|
||
values[el.name] = el.checked ? 'true' : 'false';
|
||
} else {
|
||
values[el.name] = el.value;
|
||
}
|
||
}
|
||
});
|
||
|
||
var stackName = '{{.Stack.Name}}';
|
||
var progressEl = document.getElementById('deploy-progress');
|
||
var formEl = document.getElementById('deploy-form');
|
||
var stepConfig = document.getElementById('step-config');
|
||
var stepContainers = document.getElementById('step-containers');
|
||
var stepHealth = document.getElementById('step-health');
|
||
var warningEl = document.getElementById('deploy-warning');
|
||
var resultEl = document.getElementById('deploy-result');
|
||
var elapsedEl = document.getElementById('deploy-elapsed');
|
||
|
||
function setStep(el, status, text) {
|
||
el.className = 'deploy-step ' + status;
|
||
if (text) el.querySelector('.step-text').textContent = text;
|
||
var icon = el.querySelector('.step-icon');
|
||
if (status === 'done') icon.textContent = '\u2705';
|
||
else if (status === 'error') icon.textContent = '\u274C';
|
||
else if (status === 'warn') icon.textContent = '\u26A0\uFE0F';
|
||
else if (status === 'active') icon.textContent = '\u23F3';
|
||
}
|
||
|
||
// Phase 1: Deploy request
|
||
try {
|
||
var resp = await fetch('/api/stacks/' + stackName + '/deploy', {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({values: values})
|
||
});
|
||
var data = await resp.json();
|
||
if (!data.ok) {
|
||
alert('Hiba: ' + data.error);
|
||
btn.textContent = 'Telepítés indítása';
|
||
btn.disabled = false;
|
||
return;
|
||
}
|
||
|
||
// Deploy API returned success — switch to progress view
|
||
formEl.style.display = 'none';
|
||
progressEl.style.display = 'block';
|
||
setStep(stepConfig, 'done', 'Konfiguráció mentve');
|
||
setStep(stepContainers, 'active', 'Konténer(ek) indítása...');
|
||
|
||
if (data.data && data.data.warning) {
|
||
warningEl.textContent = data.data.warning;
|
||
warningEl.style.display = 'block';
|
||
}
|
||
|
||
// Phase 2: Poll stack status
|
||
var startTime = Date.now();
|
||
var pollTimeout = 120000;
|
||
var pollTimer = setInterval(async function() {
|
||
var elapsed = Math.round((Date.now() - startTime) / 1000);
|
||
elapsedEl.textContent = elapsed + ' másodperce...';
|
||
|
||
if (Date.now() - startTime > pollTimeout) {
|
||
clearInterval(pollTimer);
|
||
setStep(stepHealth, 'warn', 'Időtúllépés — az alkalmazás még indulhat');
|
||
resultEl.innerHTML = '<div class="alert alert-warning" style="margin-top:1rem">' +
|
||
'A telepítés időtúllépésbe futott. Az alkalmazás még indulhat.' +
|
||
'</div><a href="/stacks" class="btn btn-primary" style="margin-top:.75rem">Alkalmazások megtekintése</a>';
|
||
resultEl.style.display = 'block';
|
||
return;
|
||
}
|
||
|
||
try {
|
||
var sr = await fetch('/api/stacks/' + stackName);
|
||
var sd = await sr.json();
|
||
if (!sd.ok || !sd.data) return;
|
||
var state = sd.data.state;
|
||
|
||
if (state === 'running') {
|
||
clearInterval(pollTimer);
|
||
setStep(stepContainers, 'done', 'Konténerek elindultak');
|
||
setStep(stepHealth, 'done', 'Alkalmazás kész!');
|
||
progressEl.querySelector('h3').textContent = 'Telepítés sikeres!';
|
||
resultEl.innerHTML = '<div class="alert alert-info" style="margin-top:1rem">' +
|
||
'Az alkalmazás fut. Átirányítás 3 másodperc múlva...' +
|
||
'</div>';
|
||
resultEl.style.display = 'block';
|
||
setTimeout(function() { window.location.href = '/stacks'; }, 3000);
|
||
} else if (state === 'starting') {
|
||
setStep(stepContainers, 'done', 'Konténerek elindultak');
|
||
setStep(stepHealth, 'active', 'Alkalmazás inicializálása...');
|
||
} else if (state === 'unhealthy') {
|
||
clearInterval(pollTimer);
|
||
setStep(stepContainers, 'done', 'Konténerek elindultak');
|
||
setStep(stepHealth, 'warn', 'Állapotjelző: nem egészséges');
|
||
resultEl.innerHTML = '<div class="alert alert-warning" style="margin-top:1rem">' +
|
||
'Az alkalmazás elindult, de az állapotjelző nem egészséges. ' +
|
||
'Ez normális lehet az első percekben.' +
|
||
'</div><a href="/stacks" class="btn btn-primary" style="margin-top:.75rem">Alkalmazások megtekintése</a>';
|
||
resultEl.style.display = 'block';
|
||
} else if (state === 'exited' || state === 'stopped') {
|
||
clearInterval(pollTimer);
|
||
setStep(stepContainers, 'error', 'A konténer leállt');
|
||
setStep(stepHealth, 'error');
|
||
progressEl.querySelector('h3').textContent = 'Telepítés sikertelen';
|
||
resultEl.innerHTML = '<div class="alert alert-error" style="margin-top:1rem">' +
|
||
'A konténer leállt. Ellenőrizze a naplókat.' +
|
||
'</div><a href="/stacks/' + stackName + '/logs" class="btn btn-outline" style="margin-top:.75rem">Naplók megtekintése</a>' +
|
||
' <a href="/stacks" class="btn btn-primary" style="margin-top:.75rem">Alkalmazások</a>';
|
||
resultEl.style.display = 'block';
|
||
}
|
||
} catch(pollErr) {}
|
||
}, 3000);
|
||
|
||
} catch (err) {
|
||
alert('Hálózati hiba: ' + err.message);
|
||
btn.textContent = 'Telepítés indítása';
|
||
btn.disabled = false;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
{{template "layout_end" .}}
|
||
{{end}}
|