deploy-felhom-compose/controller/internal/web/templates/deploy.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>
    {{if .StorageInfo}}
    <div class="deploy-storage-info">
        <h4>Adattárolás</h4>
        <div class="settings-grid">
            <div class="settings-row">
                <span class="settings-label">Tárhely</span>
                <span class="settings-value">{{.StorageInfo.Label}} <span class="mono" style="color:var(--text-secondary)">({{.StorageInfo.Path}})</span></span>
            </div>
            {{if .StorageInfo.DataSizeHuman}}
            <div class="settings-row">
                <span class="settings-label">Adatméret</span>
                <span class="settings-value mono">{{.StorageInfo.DataSizeHuman}}</span>
            </div>
            {{end}}
            {{if .StorageInfo.FreeHuman}}
            <div class="settings-row">
                <span class="settings-label">Szabad hely</span>
                <span class="settings-value mono">{{.StorageInfo.FreeHuman}} ({{printf "%.0f" .StorageInfo.FreePercent}}% szabad)</span>
            </div>
            {{end}}
        </div>
        {{if .OtherStoragePaths}}
        <a href="/stacks/{{.Meta.Slug}}/migrate" class="btn btn-sm btn-outline" style="margin-top:.75rem">
            📦 Mozgatás másik tárolóra
        </a>
        {{end}}
    </div>
    {{end}}
    {{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 if eq .Type "path"}}
                {{if $.StoragePaths}}
                <select id="field-{{.EnvVar}}" name="{{.EnvVar}}" class="form-control"
                        {{if $.AlreadyDeployed}}disabled{{end}}
                        onchange="checkStorageSpace(this)">
                    {{range $.StoragePaths}}
                    <option value="{{.Path}}" data-free-percent="{{printf "%.0f" .FreePercent}}"
                            {{if .IsDefault}}selected{{end}}>
                        {{.Label}} — {{.FreeHuman}} szabad{{if .IsDefault}} ★{{end}}
                    </option>
                    {{end}}
                </select>
                <div id="storage-space-warn" class="form-hint" style="color:var(--yellow);display:none">
                    ⚠️ A kiválasztott tárhely majdnem megtelt.
                </div>
                {{else}}
                <input type="text" id="field-{{.EnvVar}}" name="{{.EnvVar}}"
                       class="form-control" value="{{.Default}}"
                       placeholder="{{.Placeholder}}"
                       {{if .Required}}required{{end}}
                       {{if $.AlreadyDeployed}}disabled{{end}}>
                <span class="form-hint" style="color:var(--yellow)">Nincs regisztrált adattároló — adja meg kézzel az útvonalat</span>
                {{end}}
                {{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">&#9203;</span>
                <span class="step-text">Konfiguráció mentése...</span>
            </div>
            <div class="deploy-step" id="step-containers">
                <span class="step-icon">&#9203;</span>
                <span class="step-text">Konténer(ek) indítása...</span>
            </div>
            <div class="deploy-step" id="step-health">
                <span class="step-icon">&#9203;</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 checkStorageSpace(sel) {
    var opt = sel.options[sel.selectedIndex];
    var warn = document.getElementById('storage-space-warn');
    if (!warn) return;
    var freePct = parseFloat(opt.getAttribute('data-free-percent') || '100');
    warn.style.display = freePct < 20 ? 'block' : 'none';
}
// Check on page load
document.addEventListener('DOMContentLoaded', function() {
    var sel = document.querySelector('select[onchange="checkStorageSpace(this)"]');
    if (sel) checkStorageSpace(sel);
});

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}}