wt/openrouter
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'bootstrap frontend' (#27) from bootstrap into main
Prepare Build and Testing executable binary / Prepare-Build-Testing-With-Make (push) Waiting to run
Details
Prepare Build and Testing executable binary / Prepare-Build-Testing-With-CMake (push) Waiting to run
Details
Prepare Build and Testing executable binary / Prepare-Build-Testing-With-Meson (push) Waiting to run
Details

Browse Source 
Reviewed-on: https://gitea.home.com:3000/TolaMironcenko/openrouter/pulls/27
This commit was merged in pull request #27.
This commit is contained in:
wt committed 2025-04-23 17:50:35 +07:00
2 parents 43888e5796 ec54166f8f
commit cba48908e4
24 files changed
+414 -890
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/web/css/bootstrap.min.css
Vendored
+6
View File
@@ -0,0 +1,6 @@
@charset "UTF-8";/*!
* Bootstrap v5.3.5 (https://getbootstrap.com/)
* Copyright 2011-2025 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherLine truncated
/*# sourceMappingURL=bootstrap.min.css.map */
src/web/css/button.css
-19
View File
@@ -1,19 +0,0 @@
button {
padding: 10px;
border-radius: 10px;
border: none;
transition: 0.3s;
cursor: pointer;
}
button:hover {
opacity: 0.6;
}
.linkbutton {
background: transparent;
}
.linkbutton:hover {
text-decoration: underline;
}
src/web/css/form.css
+7 -10
View File
@@ -27,16 +27,16 @@
}
.formbody {
width: 50%;
height: 50%;
width: 30%;
height: min-content;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
justify-content: center;
/* align-items: center; */
background-color: gray;
/* opacity: 0.7; */
border-radius: 20px;
/* border-radius: 20px; */
border-radius: var(--bs-border-radius);
padding: 10px;
}
@@ -58,7 +58,7 @@
gap: 10px;
}
.forminputbody.confirmform>button {
/* .forminputbody.confirmform>button {
width: 100%;
}
@@ -93,11 +93,8 @@
cursor: pointer;
transition: 0.3s;
width: 100%;
}
} */
.formbutton:hover {
opacity: 0.6;
}
@media screen and (max-width: 800px) {
.forminputbody {
src/web/css/header.css
-86
View File
@@ -1,86 +0,0 @@
header {
width: 100vw;
height: 50px;
padding: 10px;
display: grid;
grid-template-columns: 32% 32% 32%;
align-items: center;
justify-content: space-between;
}
.links {
justify-self: start;
display: flex;
align-items: center;
gap: 10px;
}
#headermenubutton {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
padding: 0;
margin: 0;
transition: 0.3s;
}
.userbuttons {
justify-self: end;
display: flex;
align-items: center;
gap: 10px;
}
header>h1 {
justify-self: center;
display: flex;
align-items: center;
}
#openroutericon {
max-width: 50px;
max-height: 50px;
border-radius: 10px;
margin: 0 5px;
}
@media screen and (max-width: 400px) {
header>h1 {
font-size: 15px;
}
.userbuttons>h1 {
font-size: 15px;
}
}
@media screen and (max-width: 600px) {
.links {
position: absolute;
top: 10px;
left: 10;
height: 0;
overflow: hidden;
flex-direction: column;
transition: 0.3s;
}
.links.active {
height: max-content;
background-color: gray;
z-index: 10;
border-radius: 10px;
}
#headermenubutton {
position: relative;
width: fit-content;
height: fit-content;
overflow: hidden;
padding: 10px;
/* margin: 0; */
}
}
src/web/css/index.css
-17
View File
@@ -1,20 +1,3 @@
:root {
color-scheme: light dark;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: 0.3s;
}
body {
position: absolute;
width: 100%;
height: 100%;
}
.adminpanel {
position: relative;
width: 100%;
src/web/css/info.css
+1 -12
View File
@@ -3,7 +3,7 @@
top: 0;
left: 0;
width: 100%;
height: 100%;
/* height: 100%; */
opacity: 0;
pointer-events: none;
transition: 0.3s;
@@ -14,14 +14,3 @@
opacity: 1;
pointer-events: all;
}
.inforect {
background-color: gray;
max-width: 500px;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(2, minmax(50px, 500px));
align-items: center;
padding: 10px;
margin: 10px;
}
src/web/css/loader.css
-64
View File
@@ -1,64 +0,0 @@
.loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
pointer-events: none;
display: grid;
z-index: 12;
backdrop-filter: blur(5px);
transition: 0.3s;
}
.loader>h1 {
opacity: 0;
width: 100%;
padding: 10px;
text-align: center;
}
.loadertip {
width: 0;
height: 0;
padding: 0;
margin: 0;
border-radius: 50%;
place-self: center;
z-index: 12;
position: relative;
transition: 0.3s;
}
.progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 5px solid #56C1F9;
border-radius: 50%;
animation: loading 2s infinite ease-in-out;
}
.loader.active {
width: 100vw;
height: 100vh;
}
.loader.active > .loadertip {
width: 100px;
height: 100px;
border-bottom: 5px solid gray;
animation: loading 2s infinite ease-in-out;
}
.loader.active>h1 {
opacity: 1;
}
@keyframes loading {
100% {
transform: rotate(360deg);
}
}
src/web/css/settings.css
+3 -155
View File
@@ -64,7 +64,7 @@
.checkbox-wrapper-2 .ikxBAC:checked:hover {
background-color: hsl(from green h s 20%);
}
.settingssection {
position: absolute;
top: 0;
@@ -72,10 +72,6 @@
width: 100%;
height: calc(100vh - 50px);
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
transition: 0.3s;
opacity: 0;
pointer-events: none;
@@ -87,155 +83,7 @@
pointer-events: all;
}
.settingrect {
width: 24%;
height: max-content;
background-color: gray;
padding: 20px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.settingrectheader {
width: 100%;
display: flex;
justify-content: space-between;
}
.settingrectbody {
position: relative;
width: 100%;
max-height: 0;
overflow: auto;
transition: 0.3s;
display: flex;
flex-direction: column;
gap: 10px;
}
.settingrectbody.active {
max-height: 500px;
overflow-y: auto;
}
.settingrectbody>table {
position: relative;
width: 100%;
text-align: left;
transition: 0.3s;
}
.settingrectfooter {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
}
.settingrectfooter.onebutton {
gap: 0;
}
.settingrectfooterbutton {
width: 100%;
}
.hiddenbutton {
width: 0;
overflow: hidden;
padding: 0;
margin: 0;
}
.hiddenbutton.active {
position: relative;
width: 100%;
padding: 10px;
}
.settingrectbody>table {
position: relative;
width: 100%;
border: 2px solid ;
border-radius: 10px;
margin: 10px 0;
}
thead>tr>th {
border-bottom: 2px solid;
padding: 10px;
width: 50%;
}
.one {
border: 2px solid;
padding: 10px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.three {
width: 33%;
}
/* tbody>tr>th.one {
border: 2px solid;
padding: 10px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
} */
tbody>tr>th {
border: 2px solid;
padding: 10px;
border-radius: 10px;
width: 50%;
max-width:425px;
overflow-x: auto;
/* display: flex;
align-items: center;
justify-content: space-between; */
}
#wifiqrimg {
width: 0;
height: 0;
overflow: hidden;
transition: 0.3s;
}
#wifiqrimg.active {
width: 100px;
height: 100px;
}
@media screen and (max-width: 1200px) {
.settingrect {
width: 50%;
}
.settingssection {
/* flex-direction: column; */
/* align-items: center; */
}
}
@media screen and (max-width: 600px) {
.settingrect {
width: 75%;
}
}
@media screen and (max-width: 400px) {
.settingrect {
width: 100%;
}
width: 150px;
height: 150px;
}
src/web/css/syslog.css
-10
View File
@@ -15,18 +15,8 @@
pointer-events: all;
}
.syslogheader {
display: flex;
align-items: center;
gap: 10px;
}
.syslogdata {
width: 100%;
max-height: 85vh;
padding: 10px;
border-radius: 10px;
/* background-color: rgb(175, 175, 175); */
margin: 10px 0;
overflow-y: auto;
}
src/web/css/update.css
-39
View File
@@ -1,28 +1,3 @@
.progressbar {
position: relative;
width: 100%;
height: 20px;
display: flex;
align-items: center;
background-color: black;
border-radius: 7px;
}
.progressbar.hidden {
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
.bar {
position: absolute;
width: 50%;
height: 20px;
background-color: rgb(100, 100, 100);
border-radius: 7px;
}
.hidden {
height: 0;
margin: 0;
@@ -30,19 +5,6 @@
overflow: hidden;
}
.percent {
position: absolute;
width: 100%;
text-align: center;
}
.settingrectfooterbutton.hidden {
width: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
.hstack {
display: flex;
gap: 10px;
@@ -96,7 +58,6 @@
width: 25px;
height: 25px;
background: white;
/* border: 1px solid; */
border-radius: 25px;
box-shadow: -1px -1px 5px black;
cursor: pointer;
src/web/index.html
+254 -339
View File
@@ -7,48 +7,64 @@
<link rel="stylesheet" href="css/form.css" />
<link rel="stylesheet" href="css/settings.css" />
<link rel="stylesheet" href="css/notification.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/button.css" />
<link rel="stylesheet" href="css/loader.css" />
<link rel="stylesheet" href="css/syslog.css" />
<link rel="stylesheet" href="css/info.css" />
<link rel="stylesheet" href="css/update.css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Openrouter Admin</title>
</head>
<body>
<section class="adminpanel">
<!-- header -->
<header class="header">
<button id="headermenubutton">&#9636;</button>
<div class="links">
<button class="linkbutton" id="syslogbutton">Syslog</button>
<button class="linkbutton" id="settingsbutton">
Settings
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Openrouter</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="linkbutton" id="infobutton">Info</button>
<button class="linkbutton" id="rebootbutton">Reboot</button>
<div class="collapse navbar-collapse gap-2" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 gap-2">
<li class="nav-item">
<button class="nav-link" id="syslogbutton">Syslog</button>
</li>
<li class="nav-item">
<button class="nav-link" id="settingsbutton">Settings</button>
</li>
<li class="nav-item">
<button class="nav-link" id="infobutton">Info</button>
</li>
<li class="nav-item">
<button class="nav-link" id="rebootbutton">Reboot</button>
</li>
</ul>
<div class="d-flex align-items-center gap-2">
<h5>Dark Theme</h5>
<div class="d-flex align-items-center gap-2">
<div class="checkbox-wrapper-2">
<input
type="checkbox"
class="sc-gJwTLC ikxBAC"
id="themeswitcher"
/>
</div>
</div>
</div>
<div class="d-flex align-items-center gap-2">
<h5 class="headerusername"></h5>
<button id="exitbutton" class="btn btn-danger">Exit</button>
</div>
</div>
</div>
<h1>
<img
id="openroutericon"
src="favicon.ico"
alt="icon"
/>Openrouter Admin
</h1>
<div class="userbuttons">
<h1 class="headerusername"></h1>
<button class="exitbutton">Exit</button>
</div>
</header>
</nav>
<!-- header -->
<!-- settings block -->
<div class="section">
<section class="settingssection">
<section class="settingssection d-grid justify-content-center gap-2">
<!-- telnet settings -->
<div class="settingrect">
<div class="settingrectheader">
<h2>Telnet</h2>
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<h2 class="card-title">Telnet</h2>
<div class="checkbox-wrapper-2">
<input
type="checkbox"
@@ -57,30 +73,18 @@
/>
</div>
</div>
<div class="settingrectbody telnetsettingbody">
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<label
for="telnetportinput"
class="forminputlabel"
>Port</label
>
<input
type="text"
id="telnetportinput"
class="forminput"
/>
<div class="hidden" id="telnetsettingbody">
<div class="card-body">
<div class="form-floating">
<input type="number" id="telnetportinput" class="form-control" placeholder="23"/>
<label for="telnetportinput">Port</label>
</div>
</div>
</div>
<div class="settingrectfooter">
<div class="card-footer d-grid">
<!-- <button class="settingrectfooterbutton hiddenbutton" id="add_telnet_user_button">Add telnet user</button> -->
<button
class="settingrectfooterbutton"
class="btn btn-primary"
id="set_telnet_settings"
>
Confirm
@@ -89,8 +93,8 @@
</div>
<!-- telnet settings -->
<!-- DNS settings -->
<div class="settingrect">
<div class="settingrectheader">
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<h2>DNS</h2>
<div class="checkbox-wrapper-2">
<input
@@ -100,42 +104,48 @@
/>
</div>
</div>
<div class="settingrectbody" id="dnssettingsbody">
<table class="dnsservers">
<thead>
<tr>
<th>DNS servers</th>
</tr>
</thead>
<tbody id="dnsserverstablebody"></tbody>
</table>
<h3>Domains Table</h3>
<table class="domains">
<thead>
<tr>
<th class="three">IP</th>
<th class="three">Domain</th>
<!-- <th class="three">Del</th> -->
</tr>
</thead>
<tbody id="domainsstablebody"></tbody>
</table>
<div class="hidden" id="dnssettingsbody">
<div class="card-body d-grid gap-2">
<h3>DNS Servers Table</h3>
<table class="table">
<thead>
<tr>
<th>Server</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="dnsserverstablebody"></tbody>
</table>
<h3>Domains Table</h3>
<table class="table">
<thead>
<tr>
<th class="three">IP</th>
<th class="three">Domain</th>
<!-- <th class="three">Del</th> -->
</tr>
</thead>
<tbody id="domainsstablebody"></tbody>
</table>
</div>
</div>
<div class="settingrectfooter">
<div class="card-footer d-grid gap-2">
<div class="hidden" id="dnsfooterbuttons">
<button
id="add_local_domain_button"
class="btn btn-primary"
>
Add Local Domain
</button>
<button
id="add_dns_server_button"
class="btn btn-primary"
>
Add DNS server
</button>
</div>
<button
id="add_local_domain_button"
class="hiddenbutton settingrectfooterbutton"
>
Add Local Domain
</button>
<button
id="add_dns_server_button"
class="hiddenbutton settingrectfooterbutton"
>
Add DNS server
</button>
<button
class="settingrectfooterbutton"
class="btn btn-primary"
id="set_dns_settings"
>
Confirm
@@ -144,21 +154,22 @@
</div>
<!-- DNS settings -->
<!-- ftp settings -->
<div class="settingrect">
<div class="settingrectheader">
<h2>Ftp</h2>
<div class="checkbox-wrapper-2">
<input
type="checkbox"
class="sc-gJwTLC ikxBAC"
id="ftpenable"
/>
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<h2 class="card-title">Ftp</h2>
<div class="checkbox-wrapper-2">
<input
type="checkbox"
class="sc-gJwTLC ikxBAC"
id="ftpenable"
/>
</div>
</div>
</div>
<div class="settingrectfooter">
<!-- <button>Add Ftp server</button> -->
<div class="card-footer d-grid">
<button
class="settingrectfooterbutton"
class="btn btn-primary"
id="set_ftp_settings"
>
Confirm
@@ -167,8 +178,8 @@
</div>
<!-- ftp settings -->
<!-- ssh settings -->
<div class="settingrect">
<div class="settingrectheader">
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<h2>SSH</h2>
<div class="checkbox-wrapper-2">
<input
@@ -178,59 +189,43 @@
/>
</div>
</div>
<div class="settingrectbody" id="sshsettingsbody">
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<label
for="sshserverinput"
class="forminputlabel"
>Server</label
>
<select name="selectserver" id="sshserverinput">
<option value="dropbear">dropbear</option>
<option value="openssh">openssh</option>
</select>
<!-- <input type="text" id="sshserverinput" class="forminput"> -->
<div class="hidden" id="sshsettingsbody">
<div class="card-body d-grid gap-2">
<div class="form-floating">
<select name="selectserver" id="sshserverinput" class="form-select">
<option value="dropbear">dropbear</option>
<option value="openssh">openssh</option>
</select>
<label for="sshserverinput">Server</label>
</div>
<div class="form-floating">
<input type="text" id="sshportinput" class="form-control"/>
<label for="sshportinput">Port</label>
</div>
<h3>SSH Keys Table</h3>
<!-- <h4 class="card-text">SSH Keys</h4> -->
<table class="table">
<thead>
<tr>
<th>Key</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="sshkeystablebody"></tbody>
</table>
</div>
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<label for="sshportinput" class="forminputlabel"
>Port</label
>
<input
type="text"
id="sshportinput"
class="forminput"
/>
</div>
<table class="sshkeys">
<thead>
<tr>
<th>SSH keys</th>
</tr>
</thead>
<tbody id="sshkeystablebody"></tbody>
</table>
</div>
<div class="settingrectfooter onebutton">
<div class="card-footer d-grid gap-2">
<div class="hidden d-grid gap-2" id="addsshkeybutton">
<button
id="add_ssh_key"
class="btn btn-primary"
>
Add SSH key
</button>
</div>
<button
id="add_ssh_key"
class="hiddenbutton settingrectfooterbutton"
>
Add SSH key
</button>
<button
class="settingrectfooterbutton"
class="btn btn-primary"
id="set_ssh_settings"
>
Confirm
@@ -239,8 +234,8 @@
</div>
<!-- ssh settings -->
<!-- Wi-Fi settings -->
<div class="settingrect">
<div class="settingrectheader">
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<h2>WIFI</h2>
<div class="checkbox-wrapper-2">
<input
@@ -250,108 +245,61 @@
/>
</div>
</div>
<div class="settingrectbody" id="wifisettingsbody">
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<label for="SSID" class="forminputlabel"
>SSID</label
>
<input
type="text"
id="SSID"
class="forminput"
/>
</div>
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<label for="wifipassword" class="forminputlabel"
>Old password</label
>
<button id="showpasswordbutton">Show</button>
<input
type="password"
id="wifipassword"
class="forminput"
/>
</div>
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<label
for="newwifipassword"
class="forminputlabel"
>New password</label
>
<button id="shownewpasswordbutton">Show</button>
<input
type="password"
id="newwifipassword"
class="forminput"
/>
</div>
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<label for="wifichannel" class="forminputlabel"
>WIFI channel</label
>
<select id="wifichannel" class="forminput">
<option
class="channeloption"
value="1"
style="color: black"
>
1
</option>
<option class="channeloption" value="6">
6
</option>
<option class="channeloption" value="11">
11
</option>
</select>
</div>
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<label for="wifiqr" class="forminputlabel"
>Show qr code</label
>
<div class="checkbox-wrapper-2">
<div class="hidden" id="wifisettingsbody">
<div class="card-body d-grid gap-2">
<div class="form-floating">
<input
type="checkbox"
class="sc-gJwTLC ikxBAC"
id="wifiqr"
type="text"
id="SSID"
class="form-control"
placeholder="home"
/>
<label for="SSID">SSID</label>
</div>
<div class="form-floating">
<input
type="password"
id="wifipassword"
class="form-control"
placeholder="12345"
/>
<label for="wifipassword">Old password</label>
</div>
<button id="showpasswordbutton" class="btn">Show Password</button>
<div class="form-floating">
<input
type="password"
id="newwifipassword"
class="form-control"
placeholder="12345"
/>
<label for="newwifipassword">New password</label>
</div>
<button id="shownewpasswordbutton" class="btn">Show Password</button>
<div class="form-floating">
<select id="wifichannel" class="form-select">
<option class="channeloption" value="1">1</option>
<option class="channeloption" value="6">6</option>
<option class="channeloption" value="11">11</option>
</select>
<label for="wifichannel">WIFI channel</label>
</div>
<div class="d-flex align-items-center justify-content-between">
<label for="wifiqr" class="form-check-label">Show qr code</label>
<div class="checkbox-wrapper-2">
<input
type="checkbox"
class="sc-gJwTLC ikxBAC"
id="wifiqr"
/>
</div>
<div id="wifiqrimg"></div>
</div>
<div id="wifiqrimg"></div>
</div>
</div>
<div class="settingrectfooter onebutton">
<div class="card-footer d-grid gap-2 onebutton">
<button
class="settingrectfooterbutton"
class="btn btn-primary"
id="setwifisettings"
>
Confirm
@@ -360,23 +308,23 @@
</div>
<!-- Wi-Fi settings -->
<!-- backup settings -->
<div class="settingrect">
<div class="settingrectheader">
<div class="card">
<div class="card-header">
<h2>Backup settings</h2>
</div>
<div
class="settingrectfooter"
style="flex-direction: column"
class="card-footer d-grid gap-2"
>
<a
id="backup_settings"
class="settingrectfooterbutton"
class="btn btn-primary"
href=""
download="backup_settings.json"
>
<button class="settingrectfooterbutton">
Backup settings
</button>
</a>
<input
type="file"
@@ -385,19 +333,21 @@
hidden
/>
<button
class="settingrectfooterbutton"
class="btn btn-primary"
id="restore_settings"
>
Restore settings
</button>
<div class="hidden d-grid gap-2" id="startrestoresettingsbutton">
<button
class="btn btn-primary"
id="start_restore_settings"
>
Start restore settings
</button>
</div>
<button
class="settingrectfooterbutton"
id="start_restore_settings"
>
Start restore settings
</button>
<button
class="settingrectfooterbutton"
class="btn btn-primary"
id="restore_default_settings"
>
Rrestore default settings
@@ -406,44 +356,20 @@
</div>
<!-- backup settings -->
<!-- update firmware -->
<div class="settingrect">
<div class="settingrectheader">
<div class="card mb-3">
<div class="card-header">
<h2>Update Firmware</h2>
</div>
<div
class="settingrectfooter"
style="flex-direction: column"
>
<input
type="file"
name=""
id="upload_image_input"
hidden
/>
<button
class="settingrectfooterbutton"
id="upload_image_button"
>
Update firmware
</button>
<div class="progressbar hidden" id="uploadprogress">
<div class="bar" id="uploadbar"></div>
<div class="percent" id="uploadpercent">
Uploaded 50 %
<div class="card-footer d-grid gap-2" style="flex-direction: column">
<input type="file" name="" id="upload_image_input" hidden/>
<button class="btn btn-primary" id="upload_image_button">Update firmware</button>
<div class="hidden" id="uploadprogress">
<div class="progress" role="progressbar" aria-lable="Upload progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" id="uploadpercent"></div>
</div>
</div>
<div
class="vstack hidden"
style="width: 100%; gap: 10px; padding: 0"
id="update_block"
>
<div
class="hstack"
style="
justify-content: space-around;
width: 100%;
"
>
<div class="vstack hidden" style="width: 100%; gap: 10px; padding: 0" id="update_block">
<div class="hstack" style="justify-content: space-around;width: 100%;">
<label for="auto_reboot_flag">
Reboot after update?
</label>
@@ -457,17 +383,11 @@
type="checkbox"
hidden
/>
<button
class="settingrectfooterbutton"
id="update_image_button"
>
Update
</button>
<button class="btn btn-primary" id="update_image_button">Update</button>
</div>
<div class="progressbar hidden" id="updateprogress">
<div class="bar" id="updatebar"></div>
<div class="percent" id="updatepercent">
Updated 50 %
<div class="hidden" id="updateprogress">
<div class="progress" role="progressbar" aria-lable="Upload progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" id="updatepercent"></div>
</div>
</div>
</div>
@@ -476,25 +396,27 @@
</section>
<!-- syslog block -->
<section class="syslogsection">
<div class="syslogheader">
<div class="d-flex flex-wrap gap-2 align-items-center">
<h2 class="syslogheader">Syslog</h2>
<button id="openrouterfilter">openrouter</button>
<button id="authservicefilter">auth_service</button>
<button id="refreshbutton">&#8634;</button>
<label for="realtimesyslog">Realtime</label>
<input type="checkbox" id="realtimesyslog" />
<button id="openrouterfilter" class="btn btn-primary">openrouter</button>
<button id="authservicefilter" class="btn btn-primary">auth_service</button>
<button id="refreshbutton" class="btn btn-primary">&#8634;</button>
<div class="form-check">
<label for="realtimesyslog" class="form-check-label">Realtime</label>
<input type="checkbox" id="realtimesyslog" class="form-check-input"/>
</div>
</div>
<div class="syslogdata"></div>
</section>
<!-- syslog block -->
<section class="infosection">
<div class="inforect">
<label for="infoversion">Version: </label>
<p id="version">0.1.1</p>
</div>
<div class="inforect">
<label for="infouptime">Uptime: </label>
<p id="uptime"></p>
<section class="infosection d-flex flex-wrap gap-2 justify-content-center align-items-start">
<div class="form-floating" style="height: min-content;">
<input id="infoversion" type="text" disabled class="form-control" value="0.1.1" placeholder="0.1.1">
<label for="infoversion">Version:</label>
</div>
<div class="form-floating" style="height: min-content;">
<input type="text" id="infouptime" class="form-control" placeholder="0h 0m 0s" disabled>
<label for="infouptime">Uptime:</label>
</div>
</section>
</div>
@@ -505,49 +427,40 @@
<div class="notificationsection"></div>
<!-- notification block -->
<!-- login form -->
<div class="form loginform">
<div class="form loginform rounded">
<form class="formbody loginformbody">
<h1 class="formheader">OpenRouter Login</h1>
<div class="forminputbody">
<label for="loginusernameinput" class="forminputlabel"
>Username</label
>
<div class="form-floating mb-3">
<input
type="text"
required
id="loginusernameinput"
class="forminput"
class="form-control"
/>
</div>
<div class="forminputbody">
<label for="loginpasswordinput" class="forminputlabel"
<label for="loginusernameinput"
>Username</label
>
</div>
<div class="form-floating">
<input
type="password"
required
id="loginpasswordinput"
class="forminput"
class="form-control"
/>
<label for="loginpasswordinput"
>Username</label
>
</div>
<div class="forminputbody">
<button class="formbutton">Login</button>
<div class="d-grid gap-2">
<button class="btn btn-primary">Login</button>
</div>
</form>
</div>
<!-- login form -->
<!-- loader -->
<div class="loader">
<h1 id="loaderheader">Reboting</h1>
<div class="loadertip">
<div class="progress"></div>
</div>
</div>
<!-- loader -->
<script src="js/header.js"></script>
<script src="js/routes.js"></script>
<script src="js/notification.js"></script>
<script src="js/loader.js"></script>
<script src="js/settings/settings.js"></script>
<script src="js/settings/telnet.js"></script>
@@ -562,5 +475,7 @@
<script src="js/info/uptime.js"></script>
<script src="js/update.js"></script>
<script src="js/login.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/theme.js"></script>
</body>
</html>
src/web/js/bootstrap.min.js
Vendored
+7
View File
@@ -0,0 +1,7 @@
/*!
* Bootstrap v5.3.5 (https://getbootstrap.com/)
* Copyright 2011-2025 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@popperjs/core")):"function"==typeof define&&define.amd?define(["@popperjs/core"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).bootstrap=e(t.Popper)}(this,(function(t){"use strict";function e(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t)for(const i in t)if("default"!==i){const s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,s.get?s:{enumerable:!0,get:()=>t[i]})}return e.default=t,Object.freeze(e)}const i=e(t),s=new Map,n={set(t,e,i){s.has(t)||s.set(t,new Map);const n=s.get(t);n.has(e)||0===n.size?n.set(e,i):console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(n.keys())[0]}.`)},get:(t,e)=>s.has(t)&&s.get(t).get(e)||null,remove(t,e){if(!s.has(t))return;const i=s.get(t);i.delete(e),0===i.size&&s.delete(t)}},o="transitionend",r=t=>(t&&window.CSS&&window.CSS.escape&&(t=t.replace(/#([^\s"#']+)/g,((t,e)=>`#${CSS.escape(e)}`))),t),a=t=>{t.dispatchEvent(new Event(o))},l=t=>!(!t||"object"!=typeof t)&&(void 0!==t.jquery&&(t=t[0]),void 0!==t.nodeType),c=t=>l(t)?t.jquery?t[0]:t:"string"==typeof t&&t.length>0?document.querySelector(r(t)):null,h=t=>{if(!l(t)||0===t.getClientRects().length)return!1;const e="visible"===getComputedStyle(t).getPropertyValue("visibility"),i=t.closest("details:not([open])");if(!i)return e;if(i!==t){const e=t.closest("summary");if(e&&e.parentNode!==i)return!1;if(null===e)return!1}return e},d=t=>!t||t.nodeType!==Node.ELEMENT_NODE||!!t.classList.contains("disabled")||(void 0!==t.disabled?t.disabled:t.hasAttribute("disabled")&&"false"!==t.getAttribute("disabled")),u=t=>{if(!document.documentElement.attachShadow)return null;if("function"==typeof t.getRootNode){const e=t.getRootNode();return e instanceof ShadowRoot?e:null}return t instanceof ShadowRoot?t:t.parentNode?u(t.parentNode):null},_=()=>{},g=t=>{t.offsetHeight},f=()=>window.jQuery&&!document.body.hasAttribute("data-bs-no-jquery")?window.jQuery:null,m=[],p=()=>"rtl"===document.documentElement.dir,b=t=>{var e;e=()=>{const e=f();if(e){const i=t.NAME,s=e.fn[i];e.fn[i]=t.jQueryInterface,e.fn[i].Constructor=t,e.fn[i].noConflict=()=>(e.fn[i]=s,t.jQueryInterface)}},"loading"===document.readyState?(m.length||document.addEventListener("DOMContentLoaded",(()=>{for(const t of m)t()})),m.push(e)):e()},v=(t,e=[],i=t)=>"function"==typeof t?t.call(...e):i,y=(t,e,i=!0)=>{if(!i)return void v(t);const s=(t=>{if(!t)return 0;let{transitionDuration:e,transitionDelay:i}=window.getComputedStyle(t);const s=Number.parseFloat(e),n=Number.parseFloat(i);return s||n?(e=e.split(",")[0],i=i.split(",")[0],1e3*(Number.parseFloat(e)+Number.parseFloat(i))):0})(e)+5;let n=!1;const r=({target:i})=>{i===e&&(n=!0,e.removeEventListener(o,r),v(t))};e.addEventListener(o,r),setTimeout((()=>{n||a(e)}),s)},w=(t,e,i,s)=>{const n=t.length;let o=t.indexOf(e);return-1===o?!i&&s?t[n-1]:t[0]:(o+=i?1:-1,s&&(o=(o+n)%n),t[Math.max(0,Math.min(o,n-1))])},A=/[^.]*(?=\..*)\.|.*/,E=/\..*/,C=/::\d+$/,T={};let k=1;const $={mouseenter:"mouseover",mouseleave:"mouseout"},S=new Set(["click","dblclick","mouseup","mousedown","contextmenu","mousewheel","DOMMouseScroll","mouseover","mouseout","mousemove","selectstart","selectend","keydown","keypress","keyup","orientationchange","touchstart","touchmove","touchend","touchcancel","pointerdown","pointermove","pointerup","pointerleave","pointercancel","gesturestart","gesturechange","gestureend","focus","blur","change","reset","select","submit","focusin","focusout","load","unload","beforeunload","resize","move","DOMContentLoaded","readystatechange","error","abort","scroll"]);function L(t,e){return e&&`${e}::${k++}`||t.uidEvent||k++}function O(t){const e=L(t);return t.uidEvent=e,T[e]=T[e]||{},T[e]}function I(t,e,i=null){return Object.values(t).find((t=>t.callable===e&&t.delegationSelector===i))}function D(t,e,i){const s="string"==typeof e,n=s?i:e||i;let o=M(t);return S.has(o)||(o=t),[s,n,o]}function N(t,e,i,s,n){if("string"!=typeof e||!t)return;let[o,r,a]=D(e,i,s);if(e in $){const t=t=>function(e){if(!e.relatedTarget||e.relatedTarget!==e.delegateTarget&&!e.delegateTarget.contains(e.relatedTarget))return t.call(this,e)};r=t(r)}const l=O(t),c=l[a]||(l[a]={}),h=I(c,r,o?i:null);if(h)return void(h.oneOff=h.oneOff&&n);const d=L(r,e.replace(A,"")),u=o?function(t,e,i){return function s(n){const o=t.querySelectorAll(e);for(let{target:r}=n;r&&r!==this;r=r.parentNode)for(const a of o)if(a===r)return F(n,{delegateTarget:r}),s.oneOff&&j.off(t,n.type,e,i),i.apply(r,[n])}}(t,i,r):function(t,e){return function i(s){return F(s,{delegateTarget:t}),i.oneOff&&j.off(t,s.type,e),e.apply(t,[s])}}(t,r);u.delegationSelector=o?i:null,u.callable=r,u.oneOff=n,u.uidEvent=d,c[d]=u,t.addEventListener(a,u,o)}function P(t,e,i,s,n){const o=I(e[i],s,n);o&&(t.removeEventListener(i,o,Boolean(n)),delete e[i][o.uidEvent])}function x(t,e,i,s){const n=e[i]||{};for(const[o,r]of Object.entries(n))o.includes(Line truncated
//# sourceMappingURL=bootstrap.min.js.map
src/web/js/header.js
+8 -8
View File
@@ -25,17 +25,17 @@ syslogbutton.addEventListener('click', () => {
get_syslog_data()
})
headermenubutton.addEventListener('click', () => {
if (headerlinks.classList.contains('active')) {
headerlinks.classList.remove('active')
return
}
headerlinks.classList.add('active')
})
// headermenubutton.addEventListener('click', () => {
// if (headerlinks.classList.contains('active')) {
// headerlinks.classList.remove('active')
// return
// }
// headerlinks.classList.add('active')
// })
window.addEventListener('click', (e) => {
if (e.target.id !== "headermenubutton" && !e.target.classList.contains('links')) {
headerlinks.classList.remove('active')
// headerlinks.classList.remove('active')
}
})
src/web/js/info/uptime.js
+4 -4
View File
@@ -1,16 +1,16 @@
const uptime = document.querySelector('#uptime')
const uptime = document.querySelector('#infouptime')
const get_uptime = () => {
fetch(routes.uptime()).then(data => data.json()).then(jsondata => {
if (jsondata.uptime.hour === '0' && jsondata.uptime.minute === '0') {
uptime.innerHTML = jsondata.uptime.second + "s "
uptime.value = jsondata.uptime.second + "s "
return
}
if (jsondata.uptime.hour === '0') {
uptime.innerHTML = jsondata.uptime.minute + "m " + jsondata.uptime.second + "s "
uptime.value = jsondata.uptime.minute + "m " + jsondata.uptime.second + "s "
return
}
uptime.innerHTML = jsondata.uptime.hour + "h " + jsondata.uptime.minute + "m " + jsondata.uptime.second + "s "
uptime.value = jsondata.uptime.hour + "h " + jsondata.uptime.minute + "m " + jsondata.uptime.second + "s "
}).catch((error) => {
notification(`Ошибка на сервере: ${error}`, "error")
})
src/web/js/loader.js
-13
View File
@@ -1,13 +0,0 @@
const loader = document.querySelector('.loader')
const loaderheader = document.querySelector('#loaderheader')
const defaultloaderheader = ""
const start_loader = (header = defaultloaderheader) => {
loaderheader.innerHTML = header
loader.classList.add('active')
}
const stop_loader = () => {
loader.classList.remove('active')
}
src/web/js/login.js
+3 -2
View File
@@ -2,7 +2,7 @@ const loginform = document.querySelector(".loginform");
const loginformbody = document.querySelector(".loginformbody");
const loginusername = document.querySelector("#loginusernameinput");
const loginpassword = document.querySelector("#loginpasswordinput");
const exitbutton = document.querySelector(".exitbutton");
const exitbutton = document.querySelector("#exitbutton");
const adminpanelsection = document.querySelector(".adminpanel");
const headerusername = document.querySelector(".headerusername");
@@ -85,7 +85,8 @@ const get_user_data = async () => {
};
const logout = () => {
localStorage.clear();
localStorage.removeItem('userdata');
localStorage.removeItem('token')
loginform.classList.add("active");
notification("Вы вышли", "success");
adminpanelsection.classList.remove("active");
src/web/js/reboot.js
-2
View File
@@ -14,14 +14,12 @@ const reboot = () => {
}).then(data => data.json()).then(jsondata => {
}).catch((error) => {
start_loader("Rebooting")
setTimeout(waitreboot, 2000)
})
}
const waitreboot = () => {
fetch(routes.uptime()).then(res => res.json()).then(jsondata => {
stop_loader()
}).catch((error) => {
waitreboot()
})
src/web/js/settings/backup.js
+35 -27
View File
@@ -3,45 +3,53 @@ const restore_setings_button = document.querySelector('#restore_settings')
const restore_settings_input = document.querySelector('#restore_settings_input')
const start_restore_settings = document.querySelector('#start_restore_settings')
const restore_default_settings = document.querySelector('#restore_default_settings')
const startrestoresettingsbutton = document.querySelector('#startrestoresettingsbutton')
backup_settings_button.href = routes.settings_backup()
restore_setings_button.addEventListener('click', () => restore_settings_input.click())
restore_setings_button.addEventListener('click', () => {
restore_settings_input.click()
startrestoresettingsbutton.classList.remove('hidden')
})
start_restore_settings.addEventListener('click', () => {
let restore_file = restore_settings_input.files[0]
console.log(restore_file)
let formData = new FormData()
formData.append('restore_settings', restore_file)
fetch(routes.settings_restore(), {method:"POST", body: formData})
.then(data => data.json())
.then(jsondata => {
console.log(jsondata)
if (confirm("Start restore settings?")) {
let restore_file = restore_settings_input.files[0]
console.log(restore_file)
let formData = new FormData()
formData.append('restore_settings', restore_file)
fetch(routes.settings_restore(), {method:"POST", body: formData})
.then(data => data.json())
.then(jsondata => {
console.log(jsondata)
if (jsondata.status) {
notification('Настройки применены', 'success')
get_all_settings()
} else {
notification('Некорректный файл', 'error')
}
}).catch((error) => {
notification(`Ошибка на сервере: ${error}`, "error")
})
}
})
restore_default_settings.addEventListener('click', () => {
if (confirm("Restore default settings?")) {
fetch(routes.restore_defaults(), {
method: 'POST',
body: `{"token":"${localStorage.getItem("token")}"}`
}).then(data => data.json()).then(jsondata => {
if (jsondata.status) {
notification('Настройки применены', 'success')
notification(`Настройки успешно сохранены`, "success");
get_all_settings()
} else {
notification('Некорректный файл', 'error')
notification(`Неизвестная ошибка`, "error");
}
}).catch((error) => {
notification(`Ошибка на сервере: ${error}`, "error")
})
})
restore_default_settings.addEventListener('click', () => {
fetch(routes.restore_defaults(), {
method: 'POST',
body: `{"token":"${localStorage.getItem("token")}"}`
}).then(data => data.json()).then(jsondata => {
if (jsondata.status) {
notification(`Настройки успешно сохранены`, "success");
get_all_settings()
} else {
notification(`Неизвестная ошибка`, "error");
}
}).catch((error) => {
notification(`Ошибка на сервере: ${error}`, "error")
})
}
})
// restore_settings_input.addEventListener('click', () => {
src/web/js/settings/dns.js
+14 -22
View File
@@ -5,6 +5,7 @@ const dnsserverstablebody = document.querySelector('#dnsserverstablebody')
const adddnsserverbutton = document.querySelector('#add_dns_server_button')
const localdomainstablebody = document.querySelector('#domainsstablebody')
const addlocaldomainbutton = document.querySelector('#add_local_domain_button')
const dnsfooterbuttons = document.querySelector('#dnsfooterbuttons')
let dnsservers = []
let localdomains = []
@@ -12,14 +13,11 @@ let localdomains = []
const get_dns_enabled_status = () => {
dnsenabled.checked = settings.dns.enabled
if (settings.dns.enabled) {
dnssettingbody.classList.add('active')
adddnsserverbutton.classList.add('active')
addlocaldomainbutton.classList.add('active')
dnssettingbody.classList.remove('hidden')
dnsfooterbuttons.classList.remove('hidden')
} else {
adddnsserverbutton.parentElement.classList.add('onebutton')
dnssettingbody.classList.remove('active')
adddnsserverbutton.classList.remove('active')
addlocaldomainbutton.classList.remove('active')
dnssettingbody.classList.add('hidden')
dnsfooterbuttons.classList.add('hidden')
}
}
@@ -41,16 +39,12 @@ setdnssettingsbutton.addEventListener('click', () => {
dnsenabled.addEventListener('click', () => {
if (dnsenabled.checked) {
dnssettingbody.classList.add('active')
adddnsserverbutton.classList.add('active')
addlocaldomainbutton.classList.add('active')
adddnsserverbutton.parentElement.classList.remove('onebutton')
dnssettingbody.classList.remove('hidden')
dnsfooterbuttons.classList.remove('hidden')
get_dns_server()
} else {
dnssettingbody.classList.remove('active')
adddnsserverbutton.classList.remove('active')
addlocaldomainbutton.classList.remove('active')
adddnsserverbutton.parentElement.classList.add('onebutton')
dnssettingbody.classList.add('hidden')
dnsfooterbuttons.classList.add('hidden')
}
})
@@ -59,10 +53,8 @@ const get_dns_server = () => {
dnsserverstablebody.innerHTML = ""
for (const server in settings.dns.servers) {
dnsserverstablebody.innerHTML += `<tr>
<th class="one">
${settings.dns.servers[server]}
<button class="deldnsserverbutton" id="${settings.dns.servers[server]}">Del</button>
</th>
<th>${settings.dns.servers[server]}</th>
<th class="d-grid"><button class="btn btn-danger deldnsserverbutton" id="${settings.dns.servers[server]}">Del</button></th>
</tr>`
}
}
@@ -93,10 +85,10 @@ const get_local_domains = () => {
localdomainstablebody.innerHTML = ""
for (const domain in settings.dns.localdomains) {
localdomainstablebody.innerHTML += `<tr>
<th class="three">${settings.dns.localdomains[domain].ip}</th>
<th class="three" style="display:flex;align-items:center;justify-content:space-between;width:100%">
<th>${settings.dns.localdomains[domain].ip}</th>
<th class="d-grid">
${settings.dns.localdomains[domain].domain}
<button class="deldomain" id="${settings.dns.localdomains[domain].domain}">Del</button>
<button class="btn btn-danger deldomain" id="${settings.dns.localdomains[domain].domain}">Del</button>
</th>
</tr>`
}
src/web/js/settings/ssh.js
+12 -17
View File
@@ -5,6 +5,7 @@ const sshkeystablebody = document.querySelector('#sshkeystablebody')
const sshportinput = document.querySelector('#sshportinput')
const add_ssh_key_button = document.querySelector('#add_ssh_key')
const sshserverinput = document.querySelector('#sshserverinput')
const addsshkeybutton = document.querySelector('#addsshkeybutton')
let sshkeys = []
@@ -12,13 +13,11 @@ let sshkeys = []
const get_ssh_status = () => {
sshenable.checked = settings.ssh.enabled
if (settings.ssh.enabled) {
sshsettingsbody.classList.add('active')
add_ssh_key_button.classList.add('active')
add_ssh_key_button.parentElement.classList.remove('onebutton')
sshsettingsbody.classList.remove('hidden')
addsshkeybutton.classList.remove('hidden')
} else {
sshsettingsbody.classList.remove('active')
add_ssh_key_button.classList.remove('active')
add_ssh_key_button.parentElement.classList.add('onebutton')
sshsettingsbody.classList.add('hidden')
addsshkeybutton.classList.add('hidden')
}
}
@@ -47,14 +46,12 @@ set_ssh_settings.addEventListener('click', () => {
sshenable.addEventListener('click', () => {
if (sshenable.checked) {
sshsettingsbody.classList.add('active')
add_ssh_key_button.classList.add('active')
add_ssh_key_button.parentElement.classList.remove('onebutton')
sshsettingsbody.classList.remove('hidden')
addsshkeybutton.classList.remove('hidden')
return
}
sshsettingsbody.classList.remove('active')
add_ssh_key_button.classList.remove('active')
add_ssh_key_button.parentElement.classList.add('onebutton')
sshsettingsbody.classList.add('hidden')
addsshkeybutton.classList.add('hidden')
})
// -------------------- SSH keys ---------------------------------
@@ -63,10 +60,8 @@ const get_ssh_keys = () => {
sshkeystablebody.innerHTML = ""
for (const key in sshkeys) {
sshkeystablebody.innerHTML += `<tr>
<td class="one" style="flex-direction:column;align-items:start;">
${sshkeys[key]}
<button class="delsshkeybutton" id="${key}">Del</button>
</td>
<th style="text-overflow: ellipsis; max-width:80px;overflow:hidden;white-space: nowrap;">${sshkeys[key]}</th>
<th class="d-grid"><button class="btn btn-danger delsshkeybutton" id="${key}">Del</button></th>
</tr>`
}
}
@@ -75,7 +70,7 @@ const get_ssh_keys = () => {
sshkeystablebody.addEventListener('click', (e) => {
if (e.target.classList.contains('delsshkeybutton')) {
if (confirm(`Confirm SSH settings?: (delete SSH key)`)) {
sshkeys.splice(e.target.id)
sshkeys.splice(e.target.id, 1)
set_ssh_settings_func()
}
}
src/web/js/settings/telnet.js
+5 -7
View File
@@ -1,33 +1,31 @@
const telnetenabled = document.querySelector('#telnetenable')
const telnetsettingbody = document.querySelector('.telnetsettingbody')
const telnetsettingbody = document.querySelector('#telnetsettingbody')
const settelnetsettingsbutton = document.querySelector('#set_telnet_settings')
const telnetportinput = document.querySelector('#telnetportinput')
const get_telnet_enabled_status = () => {
telnetenabled.checked = settings.telnet.enabled
if (settings.telnet.enabled) {
telnetsettingbody.classList.add('active')
telnetsettingbody.classList.remove('hidden')
} else {
telnetsettingbody.classList.remove('active')
telnetsettingbody.classList.add('hidden')
}
}
telnetenabled.addEventListener('click', () => {
if (telnetenabled.checked) {
telnetsettingbody.classList.add('active')
telnetsettingbody.classList.remove('hidden')
} else {
telnetsettingbody.classList.remove('active')
telnetsettingbody.classList.add('hidden')
}
})
const set_telnet_settings = () => {
start_loader()
settings.telnet.enabled = telnetenabled.checked
settings.telnet.port = telnetportinput.value
set_all_settings()
telnetenabled.checked = settings.telnet.enabled
telnetportinput.value = settings.telnet.port
stop_loader()
}
settelnetsettingsbutton.addEventListener('click', () => {
src/web/js/settings/wifi.js
+5 -8
View File
@@ -15,9 +15,9 @@ let old_wifi_name = ""
const get_wifi_status = () => {
wifistatus.checked = settings.wifi.enabled
if (settings.wifi.enabled) {
wifisettingsbody.classList.add('active')
wifisettingsbody.classList.remove('hidden')
} else {
wifisettingsbody.classList.remove('active')
wifisettingsbody.classList.add('hidden')
}
}
@@ -45,7 +45,6 @@ const set_wifi_password = () => {
const set_wifi_settings = () => {
if (confirm("Confirm wifi settings?")) {
start_loader()
settings.wifi.enabled = wifistatus.checked
settings.wifi.name = wifissid.value
settings.wifi.channel = channelselect.value
@@ -60,7 +59,6 @@ const set_wifi_settings = () => {
if (wifipassword.value !== "" && newwifipassword.value !== "") {
set_wifi_password()
}
stop_loader()
}
}
@@ -68,10 +66,10 @@ setwifisettings.addEventListener('click', set_wifi_settings)
wifistatus.addEventListener('click', () => {
if (wifistatus.checked) {
wifisettingsbody.classList.add('active')
wifisettingsbody.classList.remove('hidden')
return
}
wifisettingsbody.classList.remove('active')
wifisettingsbody.classList.add('hidden')
})
showpasswordbutton.addEventListener('click', () => {
@@ -104,8 +102,7 @@ const get_wifi_qr_code = () => {
wifiqr.addEventListener('click', () => {
if (wifiqr.checked) {
get_wifi_qr_code()
wifiqrimg.innerHTML =
wifiqrimg.classList.add('active')
wifiqrimg.classList.add('active')
return
}
wifiqrimg.classList.remove('active')
src/web/js/theme.js
+21
View File
@@ -0,0 +1,21 @@
const themeswitcher = document.querySelector('#themeswitcher')
themeswitcher.addEventListener('click', () => {
if (themeswitcher.checked) {
document.documentElement.setAttribute('data-bs-theme', 'dark')
localStorage.setItem('data-bs-theme', 'dark')
} else {
document.documentElement.setAttribute('data-bs-theme', 'light')
localStorage.setItem('data-bs-theme', 'light')
}
})
document.addEventListener("DOMContentLoaded", () => {
var theme = localStorage.getItem('data-bs-theme')
if (theme) {
document.documentElement.setAttribute('data-bs-theme', theme)
if (theme === 'dark') {
themeswitcher.checked = true
}
}
})
src/web/js/update.js
+29 -29
View File
@@ -7,12 +7,10 @@ const upload_image_button = document.querySelector("#upload_image_button");
const upload_image_input = document.querySelector("#upload_image_input");
const update_block = document.querySelector("#update_block");
const uploadprogress_block = document.querySelector("#uploadprogress");
const upload_progress_bar = document.querySelector("#uploadbar");
const upload_percents = document.querySelector("#uploadpercent");
const update_image_button = document.querySelector("#update_image_button");
const updateprogress = document.querySelector("#updateprogress");
const updatebar = document.querySelector("#updatebar");
const updatepercent = document.querySelector("#updatepercent");
let progress = 0;
@@ -36,33 +34,35 @@ upload_image_button.addEventListener("click", () => {
});
update_image_button.addEventListener("click", () => {
updatebar.style.width = "0%";
updatepercent.innerHTML = "Updated: 0 %";
updateprogress.classList.remove("hidden");
start_progress();
fetch(routes.update_image(), {
method: "Post",
body: `{"token":"${localStorage.getItem("token")}", "needAutoReboot": ${auto_reboot_flag.checked}}`,
})
.then((data) => data.json())
.then((jsondata) => {
if (jsondata.success === true) {
stop_progress();
notification("Updated successful", "success");
updatebar.style.width = "100%";
updatepercent.innerHTML = "Updated: 100 %";
} else {
stop_progress();
updatebar.style.width = "100%";
updatepercent.innerHTML = "Updated: 100 %";
notification("Unexpected error", "error");
}
});
if (confirm("Start Update Firmware?")) {
updatepercent.style.width = "0%";
updatepercent.innerHTML = "Updated: 0 %";
updateprogress.classList.remove("hidden");
start_progress();
fetch(routes.update_image(), {
method: "Post",
body: `{"token":"${localStorage.getItem("token")}", "needAutoReboot": ${auto_reboot_flag.checked}}`,
})
.then((data) => data.json())
.then((jsondata) => {
if (jsondata.success === true) {
stop_progress();
notification("Updated successful", "success");
updatepercent.style.width = "100%";
updatepercent.innerHTML = "Updated: 100 %";
} else {
stop_progress();
updatepercent.style.width = "100%";
updatepercent.innerHTML = "Updated: 100 %";
notification("Unexpected error", "error");
}
});
}
});
const upload_firmware_image = async () => {
upload_percents.innerHTML = "Upload progress 0 %";
upload_progress_bar.style.width = "0%";
upload_percents.style.width = "0%";
uploadprogress_block.classList.remove("hidden");
let image = upload_image_input.files[0];
let formData = new FormData();
@@ -73,12 +73,12 @@ const upload_firmware_image = async () => {
var file1Size = image.size;
if (e.loaded <= file1Size) {
var percent = Math.round((e.loaded / file1Size) * 100);
upload_progress_bar.style.width = `${percent}%`;
upload_percents.style.width = `${percent}%`;
upload_percents.innerHTML = `Upload progress ${percent} %`;
}
if (e.loaded == e.total) {
upload_progress_bar.style.width = "100%";
upload_percents.style.width = "100%";
upload_percents.innerHTML = "Upload progress 100 %";
}
});
@@ -106,7 +106,7 @@ upload_image_input.addEventListener("change", (event) => {
});
const start_progress = () => {
updatebar.style.width = "0%";
updatepercent.style.width = "0%";
progress = 0;
updatepercent.innerHTML = "Updated: 0 %";
updateprogress.classList.remove("hidden");
@@ -115,7 +115,7 @@ const start_progress = () => {
.then((data) => data.json())
.then((jsondata) => {
progress = jsondata.progress;
updatebar.style.width = `${progress}%`;
updatepercent.style.width = `${progress}%`;
updatepercent.innerHTML = `Updated: ${progress} %`;
if (progress === 100) {
stop_progress();