Skip to content

S5: detail app dan server (banner, bar aksi, zona bahaya, segmented) #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
coderbuzz merged 2 commits into from
Oct 15, 2026
Merged

S5: detail app dan server (banner, bar aksi, zona bahaya, segmented) #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
35d9a39
feat: detail pages with status banner, action bar, danger zone, segme…
coderbuzz Oct 15, 2026
903b967
fix: init row always shown, edit primary per status, banner wraps, co…
coderbuzz Oct 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
246 changes: 156 additions & 90 deletions internal/http/static/app.css
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 32 additions & 0 deletions internal/http/static/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,35 @@ document.addEventListener('click', function (e) {
if (d.classList && d.classList.contains('sheet') && d === sheetDown && outsideSheet(d, e)) d.close();
sheetDown = null;
});

// Segmented controls: keep aria-pressed in sync (the header sits outside the htmx-swapped body).
document.addEventListener('click', function (e) {
var b = e.target.closest && e.target.closest('.seg-btn');
if (!b) return;
[].forEach.call(b.parentNode.children, function (s) { s.setAttribute('aria-pressed', String(s === b)); });
});
// Copy button: data-copy="#selector" copies that element's text (execCommand fallback for plain http).
document.addEventListener('click', function (e) {
var b = e.target.closest && e.target.closest('[data-copy]');
if (!b) return;
var src = document.querySelector(b.getAttribute('data-copy'));
if (!src) return;
var text = src.textContent.trim();
function done(ok) {
var old = b.innerHTML;
b.textContent = ok ? 'Copied' : 'Copy failed';
setTimeout(function () { b.innerHTML = old; }, 1500);
}
function fallback() {
var r = document.createRange();
r.selectNodeContents(src);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(r);
var ok = false;
try { ok = document.execCommand('copy'); } catch (err) {}
done(ok);
}
if (navigator.clipboard && window.isSecureContext) navigator.clipboard.writeText(text).then(function () { done(true); }, fallback);
else fallback();
});
1 change: 1 addition & 0 deletions internal/http/templates.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,7 @@ var funcMap = template.FuncMap{
"div": div,
"mul": mul,
"clamp100": clamp100,
"split": strings.Split,
"list": func(v ...string) []string { return v },
"dict": func(kv ...interface{}) map[string]interface{} {
m := make(map[string]interface{}, len(kv)/2)
Expand Down
4 changes: 2 additions & 2 deletions internal/http/templates/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h3>What is Dockify?</h3>

<div class="card" style="margin-top:1em">
<h3>Update</h3>
<p style="color:var(--text-muted);margin-top:0">
<p style="color:var(--ink2);margin-top:0">
Current: <strong id="cur-ver">v{{.Version}}</strong><br>
Latest: <strong id="lat-ver">-</strong>
</p>
Expand All @@ -38,7 +38,7 @@ <h3>Sponsor & Donation</h3>
<a href="https://github.com/sponsors/coderbuzz" class="btn btn-secondary" target="_blank" rel="noopener">Sponsor on GitHub</a>
</div>

<p style="text-align:center;color:var(--text-muted);margin-top:2em;font-size:0.85em">Version {{.Version}}</p>
<p style="text-align:center;color:var(--ink2);margin-top:2em;font-size:0.85em">Version {{.Version}}</p>
</div>
{{template "ui_confirm" (dict "ID" "update-confirm" "Title" "Update Dockify now?" "Body" "The server restarts to apply the update and is unavailable for a short time." "Label" "Update")}}
<script>
Expand Down
14 changes: 7 additions & 7 deletions internal/http/templates/apps_add.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h1>{{if .IsEdit}}Edit App{{else}}Deploy App{{end}}</h1>
</hgroup>

{{if .Error}}
<div class="card" style="color:var(--red)">{{.Error}}</div>
<div class="card" style="color:var(--danger)">{{.Error}}</div>
{{end}}

<form method="POST" action="{{if .IsEdit}}apps/{{.App.ID}}/edit{{else}}apps/add{{end}}" onsubmit="return validateServer()">
Expand Down Expand Up @@ -68,7 +68,7 @@ <h3>Compose Mode</h3>
<label>Ports<textarea name="ports" rows="2" placeholder="27017:27017&#10;6379:6379">{{if .IsEdit}}{{.Ports}}{{end}}</textarea><small>One port mapping per line (host:container)</small></label>
<label>Volumes<textarea name="volumes" rows="2" placeholder="./data:/data&#10;./config:/etc/config">{{if .IsEdit}}{{.Volumes}}{{end}}</textarea><small>One volume mount per line (host:container)</small></label>
<div style="margin-top:1em">
<h4 style="margin:0 0 0.6em 0">Resource Limits <span style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-dim);font-size:0.85em">(optional)</span></h4>
<h4 style="margin:0 0 0.6em 0">Resource Limits <span style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:0.85em">(optional)</span></h4>
<div class="grid-2" style="gap:0.6em">
<label>Memory Limit
<select name="memory_limit">
Expand Down Expand Up @@ -130,9 +130,9 @@ <h4 style="margin:0 0 0.6em 0">Resource Limits <span style="font-weight:400;text
</div>

<div class="card">
<h3>Environment Variables <span style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-dim);font-size:0.95em">(referenced in compose as <code>${KEY}</code>)</span></h3>
<h3>Environment Variables <span style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:0.95em">(referenced in compose as <code>${KEY}</code>)</span></h3>
<div id="env-list">
<p id="no-env-msg" style="color:var(--text-muted);font-size:0.85em">No variables added yet.</p>
<p id="no-env-msg" style="color:var(--ink2);font-size:0.85em">No variables added yet.</p>
</div>
<div style="margin-top:0.8em;display:flex;gap:0.5em;flex-wrap:wrap;align-items:center">
<button type="button" class="btn btn-secondary" onclick="addEnvVar()" style="white-space:nowrap">+ Add Variable</button>
Expand All @@ -143,7 +143,7 @@ <h3>Environment Variables <span style="font-weight:400;text-transform:none;lette
</div>

<div class="card">
<h3>Config Files <span style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-dim);font-size:0.95em">(optional — mount via <code>./filename:/container/path</code> in compose)</span></h3>
<h3>Config Files <span style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:0.95em">(optional — mount via <code>./filename:/container/path</code> in compose)</span></h3>
{{if .Files}}
{{range .Files}}
<div style="display:flex;gap:0.5em;align-items:center;margin-bottom:0.4em">
Expand All @@ -160,15 +160,15 @@ <h3>Config Files <span style="font-weight:400;text-transform:none;letter-spacing
</div>

<div class="card">
<h3>Git <span style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-dim);font-size:0.95em">(optional — for auto-deploy on push)</span></h3>
<h3>Git <span style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:0.95em">(optional — for auto-deploy on push)</span></h3>
<div class="grid">
<label>Git Repo URL<input type="text" name="git_repo" placeholder="https://github.com/user/repo.git" value="{{if .App}}{{.App.GitRepo}}{{end}}"></label>
<label>Branch<input type="text" name="git_branch" value="{{if .App}}{{.App.GitBranch}}{{else}}main{{end}}" placeholder="main"></label>
</div>
</div>

<div class="card">
<h3>Basic Auth <span style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-dim);font-size:0.95em">(optional — protects the app with a username/password)</span></h3>
<h3>Basic Auth <span style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:0.95em">(optional — protects the app with a username/password)</span></h3>
<div class="grid">
<label>Username<input type="text" name="auth_user" placeholder="admin" autocomplete="off" value="{{if .App}}{{.App.AuthUser}}{{end}}"></label>
<label>Password<input type="password" name="auth_pass" placeholder="password" autocomplete="new-password" value="{{if .App}}{{.App.AuthPass}}{{end}}"></label>
Expand Down
Loading
Loading