mirror of
https://github.com/knutwurst/patchdl.git
synced 2026-10-06 10:00:22 +02:00
Rework the web UI: tile-based progress, view nav, responsive
Replace the single-page layout with a view-based one (Games / Settings / Logs via the left nav) and fold all download UI into the game tile — the separate download queue is gone. Per tile while downloading: an in-tile progress bar with auto-scaled size (B/KB/MB/GB/TB), live transfer speed and ETA from the poll deltas, and a green "Downloading" marker. One fixed-width action button that no longer reflows with its label: a blue Update/Download/Install that morphs into an amber Cancel while the download runs, plus a ghost Delete for a finished package. Settings and Logs moved to their own pages. Mobile-first responsive layout (rail collapses to a top bar, icon-only nav, single-column tiles, >=44px touch targets, 16px inputs). Real free space (statvfs) is shown auto-scaled in the rail and status strip. New "Home-screen shortcut" toggle (default on, persisted as home_shortcut in config.json). The actual PS5 tile install is not wired yet: it needs a prebuilt deeplinkUri stub PKG installed via sceAppInstUtil. Fixes from an adversarial review pass: - Reconcile in-flight downloads from /api/downloads onto the cards, so progress + Cancel appear after a reload or a download started elsewhere, and stop the per-poll full-grid rebuild. - Clear the downloaded flag on install and once the server reports the title up to date, so a patched title no longer shows Install/Delete forever. - Zero a stale speed/ETA if the byte counter goes backwards. - a11y: nav buttons keep an accessible name when the label is hidden on small screens; visible focus ring on the search box; filter group is role=group with aria-pressed; drop the noisy grid-level aria-live; fold the transient "checking" state into a visible filter bucket.
This commit is contained in:
Knutwurst committed
1 parent
5f0d1be078
commit
3f40dc1d7c
4 files changed
+734
-1119
No files matched your search
+14
-5
@@ -38,7 +38,8 @@ static struct {
|
||||
int install_after_download;
|
||||
int delete_pkg_after_install;
|
||||
int verify_downloads; /* SHA-256 each manifest piece (default off) */
|
||||
} g_cfg = { "deny", 0, 1, 0 };
|
||||
int home_shortcut; /* user wants a home-screen browser tile */
|
||||
} g_cfg = { "deny", 0, 1, 0, 1 };
|
||||
|
||||
static struct {
|
||||
int active;
|
||||
@@ -438,11 +439,13 @@ build_config_json(void) {
|
||||
"{\"default_policy\":\"%s\","
|
||||
"\"install_after_download\":%s,"
|
||||
"\"delete_pkg_after_install\":%s,"
|
||||
"\"verify_downloads\":%s,",
|
||||
"\"verify_downloads\":%s,"
|
||||
"\"home_shortcut\":%s,",
|
||||
g_cfg.default_policy[0] ? g_cfg.default_policy : "deny",
|
||||
g_cfg.install_after_download ? "true" : "false",
|
||||
g_cfg.delete_pkg_after_install ? "true" : "false",
|
||||
g_cfg.verify_downloads ? "true" : "false");
|
||||
g_cfg.verify_downloads ? "true" : "false",
|
||||
g_cfg.home_shortcut ? "true" : "false");
|
||||
pthread_mutex_unlock(&g_mutex);
|
||||
|
||||
char *out = malloc(strlen(head) + sizeof(config_tail_json));
|
||||
@@ -467,11 +470,13 @@ save_config(void) {
|
||||
"{\n\"default_policy\":\"%s\",\n"
|
||||
"\"install_after_download\":%s,\n"
|
||||
"\"delete_pkg_after_install\":%s,\n"
|
||||
"\"verify_downloads\":%s,\n\"titles\":{",
|
||||
"\"verify_downloads\":%s,\n"
|
||||
"\"home_shortcut\":%s,\n\"titles\":{",
|
||||
g_cfg.default_policy[0] ? g_cfg.default_policy : "deny",
|
||||
g_cfg.install_after_download ? "true" : "false",
|
||||
g_cfg.delete_pkg_after_install ? "true" : "false",
|
||||
g_cfg.verify_downloads ? "true" : "false");
|
||||
g_cfg.verify_downloads ? "true" : "false",
|
||||
g_cfg.home_shortcut ? "true" : "false");
|
||||
for (size_t i = 0; i < g_title_count; i++)
|
||||
fprintf(f, "%s\"%s\":%s", i ? "," : "",
|
||||
g_titles[i].title_id, g_titles[i].enabled ? "true" : "false");
|
||||
@@ -507,6 +512,8 @@ load_config(void) {
|
||||
json_get_bool(buf, "delete_pkg_after_install", g_cfg.delete_pkg_after_install);
|
||||
g_cfg.verify_downloads =
|
||||
json_get_bool(buf, "verify_downloads", g_cfg.verify_downloads);
|
||||
g_cfg.home_shortcut =
|
||||
json_get_bool(buf, "home_shortcut", g_cfg.home_shortcut);
|
||||
|
||||
/* per-title overrides live under "titles": { "<id>": true|false, ... } */
|
||||
const char *titles = strstr(buf, "\"titles\"");
|
||||
@@ -1093,6 +1100,8 @@ handle_config_post(struct MHD_Connection *conn, const char *body) {
|
||||
json_get_bool(body, "delete_pkg_after_install", g_cfg.delete_pkg_after_install);
|
||||
g_cfg.verify_downloads =
|
||||
json_get_bool(body, "verify_downloads", g_cfg.verify_downloads);
|
||||
g_cfg.home_shortcut =
|
||||
json_get_bool(body, "home_shortcut", g_cfg.home_shortcut);
|
||||
pthread_mutex_unlock(&g_mutex);
|
||||
|
||||
save_config();
|
||||
|
||||
+356
-420
File diff suppressed because it is too large.
Load diff
+125
-124
@@ -2,48 +2,34 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>PatchDL</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<svg class="icon-sprite" aria-hidden="true">
|
||||
<symbol id="icon-shield" viewBox="0 0 24 24">
|
||||
<path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3z" />
|
||||
<path d="M9 12l2 2 4-5" />
|
||||
</symbol>
|
||||
<symbol id="icon-download" viewBox="0 0 24 24">
|
||||
<path d="M12 3v11" />
|
||||
<path d="M7 10l5 5 5-5" />
|
||||
<path d="M5 20h14" />
|
||||
<path d="M12 3v11" /><path d="M7 10l5 5 5-5" /><path d="M5 20h14" />
|
||||
</symbol>
|
||||
<symbol id="icon-refresh" viewBox="0 0 24 24">
|
||||
<path d="M20 6v6h-6" />
|
||||
<path d="M4 18v-6h6" />
|
||||
<path d="M19 12A7 7 0 0 0 7 7" />
|
||||
<path d="M5 12a7 7 0 0 0 12 5" />
|
||||
<path d="M20 6v6h-6" /><path d="M4 18v-6h6" />
|
||||
<path d="M19 12A7 7 0 0 0 7 7" /><path d="M5 12a7 7 0 0 0 12 5" />
|
||||
</symbol>
|
||||
<symbol id="icon-settings" viewBox="0 0 24 24">
|
||||
<path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" />
|
||||
<path d="M4 12h2M18 12h2M12 4v2M12 18v2M6.5 6.5 8 8M16 16l1.5 1.5M17.5 6.5 16 8M8 16l-1.5 1.5" />
|
||||
</symbol>
|
||||
<symbol id="icon-search" viewBox="0 0 24 24">
|
||||
<path d="M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z" />
|
||||
<path d="M16 16l5 5" />
|
||||
<path d="M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z" /><path d="M16 16l5 5" />
|
||||
</symbol>
|
||||
<symbol id="icon-save" viewBox="0 0 24 24">
|
||||
<path d="M5 4h12l2 2v14H5V4z" />
|
||||
<path d="M8 4v6h8V4" />
|
||||
<path d="M8 20v-6h8v6" />
|
||||
</symbol>
|
||||
<symbol id="icon-pause" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14" />
|
||||
<path d="M16 5v14" />
|
||||
<path d="M5 4h12l2 2v14H5V4z" /><path d="M8 4v6h8V4" /><path d="M8 20v-6h8v6" />
|
||||
</symbol>
|
||||
<symbol id="icon-log" viewBox="0 0 24 24">
|
||||
<path d="M7 4h10l3 3v13H7V4z" />
|
||||
<path d="M17 4v4h4" />
|
||||
<path d="M10 12h7M10 16h5" />
|
||||
<path d="M7 4h10l3 3v13H7V4z" /><path d="M17 4v4h4" /><path d="M10 12h7M10 16h5" />
|
||||
</symbol>
|
||||
<symbol id="icon-grid" viewBox="0 0 24 24">
|
||||
<path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" />
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
@@ -57,107 +43,95 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="nav-list">
|
||||
<a class="nav-link is-active" href="#games">
|
||||
<svg><use href="#icon-download"></use></svg>
|
||||
Games
|
||||
</a>
|
||||
<a class="nav-link" href="#downloads">
|
||||
<svg><use href="#icon-refresh"></use></svg>
|
||||
Queue
|
||||
</a>
|
||||
<a class="nav-link" href="#settings">
|
||||
<svg><use href="#icon-settings"></use></svg>
|
||||
Settings
|
||||
</a>
|
||||
<a class="nav-link" href="#logs">
|
||||
<svg><use href="#icon-log"></use></svg>
|
||||
Logs
|
||||
</a>
|
||||
<nav class="nav-list" aria-label="Sections">
|
||||
<button class="nav-link is-active" data-view="games" aria-label="Games" aria-current="page">
|
||||
<svg><use href="#icon-grid"></use></svg><span>Games</span>
|
||||
</button>
|
||||
<button class="nav-link" data-view="settings" aria-label="Settings">
|
||||
<svg><use href="#icon-settings"></use></svg><span>Settings</span>
|
||||
</button>
|
||||
<button class="nav-link" data-view="logs" aria-label="Logs">
|
||||
<svg><use href="#icon-log"></use></svg><span>Logs</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="rail-foot">
|
||||
<span id="railFw">FW --</span>
|
||||
<span id="railSpace">-- free</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<p class="eyebrow">Standalone ELF Web UI</p>
|
||||
<h1>Controlled game patch downloads</h1>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<button class="icon-button" id="refreshBtn" title="Refresh status and games">
|
||||
<svg><use href="#icon-refresh"></use></svg>
|
||||
</button>
|
||||
<button class="primary-button" id="saveBtn">
|
||||
<svg><use href="#icon-save"></use></svg>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="status-strip" aria-label="System status">
|
||||
<article class="metric">
|
||||
<span>Firmware</span>
|
||||
<strong id="firmwareValue">--</strong>
|
||||
<em id="firmwareBuild">System version</em>
|
||||
</article>
|
||||
<article class="metric">
|
||||
<span>DNS Guard</span>
|
||||
<strong id="dnsValue">--</strong>
|
||||
<em>Sony blocked by nanoDNS</em>
|
||||
</article>
|
||||
<article class="metric">
|
||||
<span>CDN Access</span>
|
||||
<strong id="resolverValue">--</strong>
|
||||
<em>PatchDL resolver only</em>
|
||||
</article>
|
||||
<article class="metric">
|
||||
<span>Storage</span>
|
||||
<strong id="spaceValue">--</strong>
|
||||
<em id="downloadDirValue">Download target</em>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="toolbar" id="games">
|
||||
<div class="search-box">
|
||||
<svg><use href="#icon-search"></use></svg>
|
||||
<input id="searchInput" type="search" placeholder="Search title, Title ID, or Content ID" />
|
||||
</div>
|
||||
|
||||
<div class="segmented" role="tablist" aria-label="Filter">
|
||||
<button class="is-selected" data-filter="all">All</button>
|
||||
<button data-filter="updatable">Updatable</button>
|
||||
<button data-filter="uptodate">Up to date</button>
|
||||
<button data-filter="needsfw">Needs FW</button>
|
||||
<button data-filter="blocked">Can't update</button>
|
||||
<button data-filter="queued">Queue</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="game-grid" id="gameGrid" aria-live="polite"></section>
|
||||
|
||||
<section class="split-band">
|
||||
<div class="panel" id="downloads">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Downloads</p>
|
||||
<h2>Active Queue</h2>
|
||||
</div>
|
||||
<button class="ghost-button" id="pauseAllBtn">
|
||||
<svg><use href="#icon-pause"></use></svg>
|
||||
Pause
|
||||
<!-- ============ GAMES ============ -->
|
||||
<section class="view is-active" data-view="games">
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<p class="eyebrow">Standalone ELF Web UI</p>
|
||||
<h1>Games</h1>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<button class="icon-button" id="refreshBtn" title="Refresh status and games" aria-label="Refresh">
|
||||
<svg><use href="#icon-refresh"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="queue-list" id="queueList"></div>
|
||||
</header>
|
||||
|
||||
<section class="status-strip" aria-label="System status">
|
||||
<article class="metric">
|
||||
<span>Firmware</span>
|
||||
<strong id="firmwareValue">--</strong>
|
||||
<em id="firmwareBuild">System version</em>
|
||||
</article>
|
||||
<article class="metric">
|
||||
<span>DNS Guard</span>
|
||||
<strong id="dnsValue">--</strong>
|
||||
<em>Sony blocked by nanoDNS</em>
|
||||
</article>
|
||||
<article class="metric">
|
||||
<span>CDN Access</span>
|
||||
<strong id="resolverValue">--</strong>
|
||||
<em>PatchDL resolver only</em>
|
||||
</article>
|
||||
<article class="metric">
|
||||
<span>Storage</span>
|
||||
<strong id="spaceValue">--</strong>
|
||||
<em id="downloadDirValue">Download target</em>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="search-box">
|
||||
<svg><use href="#icon-search"></use></svg>
|
||||
<input id="searchInput" type="search" placeholder="Search title, Title ID, or Content ID" />
|
||||
</div>
|
||||
<div class="segmented" role="group" aria-label="Filter">
|
||||
<button class="is-selected" data-filter="all" aria-pressed="true">All</button>
|
||||
<button data-filter="updatable" aria-pressed="false">Updatable</button>
|
||||
<button data-filter="uptodate" aria-pressed="false">Up to date</button>
|
||||
<button data-filter="needsfw" aria-pressed="false">Needs FW</button>
|
||||
<button data-filter="blocked" aria-pressed="false">Can't update</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel" id="settings">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Policy</p>
|
||||
<h2>Update Rules</h2>
|
||||
</div>
|
||||
</div>
|
||||
<section class="game-grid" id="gameGrid"></section>
|
||||
</section>
|
||||
|
||||
<!-- ============ SETTINGS ============ -->
|
||||
<section class="view" data-view="settings">
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<p class="eyebrow">Policy</p>
|
||||
<h1>Settings</h1>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<button class="primary-button" id="saveBtn">
|
||||
<svg><use href="#icon-save"></use></svg>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="panel">
|
||||
<div class="settings-grid">
|
||||
<label class="field">
|
||||
<span>Default Policy</span>
|
||||
@@ -168,28 +142,49 @@
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Download Folder</span>
|
||||
<input id="downloadDir" type="text" spellcheck="false" readonly title="Patches always download internally and are removed after install" />
|
||||
<input id="downloadDir" type="text" spellcheck="false" readonly
|
||||
title="Patches always download internally and are removed after install" />
|
||||
</label>
|
||||
|
||||
<label class="switch-row">
|
||||
<input id="installAfterDownload" type="checkbox" />
|
||||
<span>
|
||||
<strong>Install after download</strong>
|
||||
<em>Global default, overridable per game</em>
|
||||
</span>
|
||||
<span class="toggle">
|
||||
<input id="installAfterDownload" type="checkbox" aria-label="Install after download" />
|
||||
<span class="track"></span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="switch-row">
|
||||
<input id="deleteAfterInstall" type="checkbox" />
|
||||
<span>
|
||||
<strong>Delete PKG after install</strong>
|
||||
<em>Only after a successful install</em>
|
||||
</span>
|
||||
<span class="toggle">
|
||||
<input id="deleteAfterInstall" type="checkbox" aria-label="Delete package after install" />
|
||||
<span class="track"></span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="switch-row">
|
||||
<input id="verifyDownloads" type="checkbox" />
|
||||
<span>
|
||||
<strong>Verify downloaded pieces (SHA-256)</strong>
|
||||
<em>Checks each manifest piece; off by default, verify on-device first</em>
|
||||
</span>
|
||||
<span class="toggle">
|
||||
<input id="verifyDownloads" type="checkbox" aria-label="Verify downloaded pieces" />
|
||||
<span class="track"></span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="switch-row">
|
||||
<span>
|
||||
<strong>Home-screen shortcut</strong>
|
||||
<em id="shortcutHint">Add a PS5 home-screen icon that opens this UI in the browser</em>
|
||||
</span>
|
||||
<span class="toggle">
|
||||
<input id="homeShortcut" type="checkbox" aria-label="Install home-screen shortcut" />
|
||||
<span class="track"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -205,13 +200,19 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="log-panel" id="logs">
|
||||
<div class="panel-heading">
|
||||
<!-- ============ LOGS ============ -->
|
||||
<section class="view" data-view="logs">
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<p class="eyebrow">Runtime</p>
|
||||
<h2>Recent Events</h2>
|
||||
<h1>Logs</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<button class="icon-button" id="clearLogBtn" title="Clear log" aria-label="Clear log">
|
||||
<svg><use href="#icon-log"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<pre id="logOutput" tabindex="0"></pre>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
+239
-570
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user