reudy-net/panel
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added path to routing

Browse source
This commit is contained in:
Jakub Dorfman 2026-05-20 01:07:37 +02:00
parent 7fd2531501
commit 85e29b8734
4 changed files with 84 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

38
frontend/index.html
View file

@ -155,12 +155,14 @@
margin-top: 6px;
}
.route-row input {
flex: 1;
padding: 6px 8px;
font-size: .85rem;
}
.route-row input:first-child { flex: 3; }
.route-row .route-domain { flex: 3; }
.route-row .route-upstream { flex: 2; }
.route-row .route-path { flex: 1; }
.route-row button { flex-shrink: 0; }
.route-row .arrow { color: var(--muted); font-weight: 600; flex-shrink: 0; }
/* ── App list ── */
.app-list { display: flex; flex-direction: column; gap: 12px; }
@ -307,13 +309,13 @@
<label for="name">Name</label>
<input id="name" placeholder="whoami" autocomplete="off" />
<label>Routes <span style="font-weight:400;color:var(--muted);font-size:.78rem;">domain | upstream</span></label>
<label>Routes <span style="font-weight:400;color:var(--muted);font-size:.78rem;">domain→upstream path</span></label>
<div id="routeTable"></div>
<div class="btn-group" style="margin-top:6px;">
<button class="btn-sm" id="addRouteBtn">+ Add Route</button>
</div>
<p style="font-size:.75rem;color:var(--muted);margin-top:4px;">
Supports wildcards: <code>*.example.com</code>. Upstream: <code>127.0.0.1:PORT</code>
Supports wildcards: <code>*.example.com</code>. Upstream: <code>127.0.0.1:PORT</code>. Optional path: <code>/_/*</code>
</p>
<div>
@ -436,7 +438,7 @@ function setStatus(msg, isError = false) {
}
// ─── Route table input ───
let createRoutes = [{ domain: "", upstream: "" }];
let createRoutes = [{ domain: "", upstream: "", path: "" }];
function renderRouteTable() {
const table = document.getElementById("routeTable");
@ -446,12 +448,14 @@ function renderRouteTable() {
row.className = "route-row";
row.innerHTML = `
<input class="route-domain" placeholder="whoami.srazka.com" value="${escHtml(r.domain)}" />
<span style="color:var(--muted);font-weight:600;">→</span>
<span class="arrow">→</span>
<input class="route-upstream" placeholder="127.0.0.1:18080" value="${escHtml(r.upstream)}" />
<input class="route-path" placeholder="/_/*" value="${escHtml(r.path || "")}" />
${createRoutes.length > 1 ? `<button class="btn-sm btn-danger" data-ridx="${i}">&times;</button>` : ""}
`;
row.querySelector(".route-domain").oninput = (e) => { createRoutes[i].domain = e.target.value; };
row.querySelector(".route-upstream").oninput = (e) => { createRoutes[i].upstream = e.target.value; };
row.querySelector(".route-path").oninput = (e) => { createRoutes[i].path = e.target.value; };
const delBtn = row.querySelector("[data-ridx]");
if (delBtn) delBtn.onclick = () => { createRoutes.splice(i, 1); renderRouteTable(); };
table.appendChild(row);
@ -459,7 +463,7 @@ function renderRouteTable() {
}
document.getElementById("addRouteBtn").onclick = () => {
createRoutes.push({ domain: "", upstream: "" });
createRoutes.push({ domain: "", upstream: "", path: "" });
renderRouteTable();
};
@ -500,13 +504,17 @@ document.getElementById("createBtn").onclick = async () => {
try {
setStatus(`Creating ${name}...`);
await api.init({ name, routes: validRoutes.map(r => ({ domain: r.domain.trim(), upstream: r.upstream.trim() })), auth, source_type, compose_content, github_url, github_branch, github_pat });
await api.init({ name, routes: validRoutes.map(r => {
const route = { domain: r.domain.trim(), upstream: r.upstream.trim() };
if (r.path && r.path.trim()) route.path = r.path.trim();
return route;
}), auth, source_type, compose_content, github_url, github_branch, github_pat });
setStatus(`Created ${name}.`);
document.getElementById("name").value = "";
document.getElementById("createCompose").value = "";
document.getElementById("createGithubUrl").value = "";
document.getElementById("createGithubPat").value = "";
createRoutes = [{ domain: "", upstream: "" }];
createRoutes = [{ domain: "", upstream: "", path: "" }];
renderRouteTable();
await loadApps();
} catch (err) {
@ -930,12 +938,14 @@ function renderRouteEditor(name) {
row.className = "route-row";
row.innerHTML = `
<input class="route-domain" placeholder="whoami.srazka.com" value="${escHtml(r.domain)}" />
<span style="color:var(--muted);font-weight:600;">→</span>
<span class="arrow">→</span>
<input class="route-upstream" placeholder="127.0.0.1:18080" value="${escHtml(r.upstream)}" />
<input class="route-path" placeholder="/_/*" value="${escHtml(r.path || "")}" />
<button class="btn-sm btn-danger" data-ridx="${i}">&times;</button>
`;
row.querySelector(".route-domain").oninput = (e) => { routeEditState[name][i].domain = e.target.value; };
row.querySelector(".route-upstream").oninput = (e) => { routeEditState[name][i].upstream = e.target.value; };
row.querySelector(".route-path").oninput = (e) => { routeEditState[name][i].path = e.target.value; };
row.querySelector("[data-ridx]").onclick = () => {
routeEditState[name].splice(i, 1);
renderRouteEditor(name);
@ -949,7 +959,7 @@ function renderRouteEditor(name) {
async function addRouteEditRow(name) {
if (!routeEditState[name]) routeEditState[name] = [];
routeEditState[name].push({ domain: "", upstream: "" });
routeEditState[name].push({ domain: "", upstream: "", path: "" });
renderRouteEditor(name);
}
@ -962,7 +972,11 @@ async function saveRouteEditor(name) {
}
try {
setStatus(`Saving routes for ${name}...`);
const cleanRoutes = valid.map(r => ({ domain: r.domain.trim(), upstream: r.upstream.trim() }));
const cleanRoutes = valid.map(r => {
const route = { domain: r.domain.trim(), upstream: r.upstream.trim() };
if (r.path && r.path.trim()) route.path = r.path.trim();
return route;
});
await api.setRoutes(name, cleanRoutes);
routeEditState[name] = cleanRoutes;
renderRouteEditor(name);