Improve web interface. (#27)
This commit is contained in:
Antonio Navarro Perez
GitHub
parent
7c94e663d8
commit
ae289e99dd
74 changed files with 2538 additions and 561 deletions
|
|
@ -1,10 +0,0 @@
|
|||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
|
||||
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/toastify-js.min.js"></script>
|
||||
<script src="assets/js/toasts.js"></script>
|
||||
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="assets/css/toastify.min.css">
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="assets/css/solarized-dark-theme.min.css">
|
||||
|
||||
<title>{{.Title}}</title>
|
||||
|
|
@ -1,37 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
{{template "common_header.html"}}
|
||||
{{template "header.html" "Configuration"}}
|
||||
<style>
|
||||
#editor {
|
||||
/** Setting height is also important, otherwise editor wont showup**/
|
||||
height: 300px;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{template "navbar.html"}}
|
||||
<div class="container">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<button type="button" class="btn btn-light" onclick="javascript:save();">Save</button>
|
||||
<button type="button" class="btn btn-light" onclick="javascript:reload();">Reload server</button>
|
||||
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{template "common_footer.html"}}
|
||||
<body class="header-fixed sidebar-fixed sidebar-dark header-light" id="body">
|
||||
<div class="wrapper">
|
||||
{{template "navbar.html" "config"}}
|
||||
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
<header class="main-header " id="header">
|
||||
<nav class="navbar navbar-static-top navbar-expand-lg">
|
||||
<!-- Sidebar toggle button -->
|
||||
<button id="sidebar-toggler" class="sidebar-toggle">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
<div class="row">
|
||||
<!-- Large Modal -->
|
||||
<div class="modal fade" id="distribyted-reload-info-modal" tabindex="-1" role="dialog"
|
||||
aria-labelledby="distribyted-reload-info-modal" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="distribyted-reload-info-modal-title">Reload status</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul id="distribyted-reload-info-text" class="list-group"></ul>
|
||||
<div class="card-body d-flex align-items-center justify-content-center">
|
||||
<div class="sk-wave" id="distribyted-reload-info-loading"
|
||||
style="display:none">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-danger btn-pill"
|
||||
data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<div class="card card-default">
|
||||
<div class="card-header card-header-border-bottom">
|
||||
<h2>Yaml Editor</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
<div class="form-footer pt-4 pt-5 mt-4 border-top">
|
||||
<button type="button" class="btn btn-primary btn-default"
|
||||
onclick="javascript:Distribyted.config.save()">Save</button>
|
||||
<button type="button" class="btn btn-secondary btn-default"
|
||||
data-toggle="modal" data-target="#distribyted-reload-info-modal"
|
||||
onclick="javascript:Distribyted.config.reload()">Reload server</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer mt-auto">
|
||||
<div class="copyright bg-white">
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{{template "footer.html"}}
|
||||
|
||||
<script src="assets/plugins/ace/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="assets/plugins/ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="assets/plugins/js-yaml/js-yaml.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="assets/js/config.js" type="text/javascript" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
Distribyted.config.loadView();
|
||||
</script>
|
||||
|
||||
<script src="assets/js/js-yaml.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="assets/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="assets/js/ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="assets/js/config.js" type="text/javascript" charset="utf-8"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
11
templates/footer.html
Normal file
11
templates/footer.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script src="assets/plugins/jquery/jquery.min.js"></script>
|
||||
<script src="assets/plugins/slimscrollbar/jquery.slimscroll.min.js"></script>
|
||||
<script src="assets/plugins/charts/Chart.min.js"></script>
|
||||
|
||||
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script src="assets/plugins/toastr/toastr.min.js"></script>
|
||||
<script src="assets/plugins/handlebars/handlebars.min.js"></script>
|
||||
|
||||
<script src="assets/js/humanize.js"></script>
|
||||
<script src="assets/js/common.js"></script>
|
||||
14
templates/header.html
Normal file
14
templates/header.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Distribyted - {{.}}</title>
|
||||
|
||||
<!-- GOOGLE FONTS -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500|Poppins:400,500,600,700|Roboto:400,500"
|
||||
rel="stylesheet" />
|
||||
<link href="https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css" rel="stylesheet" />
|
||||
<!-- SLEEK CSS -->
|
||||
<link id="sleek-css" rel="stylesheet" href="assets/css/sleek.min.css" />
|
||||
<link href="assets/plugins/toastr/toastr.min.css" rel="stylesheet" />
|
||||
<!-- FAVICON -->
|
||||
<link href="assets/img/favicon.png" rel="shortcut icon" />
|
||||
|
|
@ -1,58 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
{{template "common_header.html"}}
|
||||
{{template "header.html" "Dashboard"}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{template "navbar.html"}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<canvas id="chart-general-network" height="150"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<canvas id="chart-cache" height="20"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h3>
|
||||
<svg class="bi bi-arrow-down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 9.646a.5.5 0 01.708 0L8 12.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z"
|
||||
clip-rule="evenodd" />
|
||||
<path fill-rule="evenodd" d="M8 2.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V3a.5.5 0 01.5-.5z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span id="down-speed-text"></span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<h3>
|
||||
<svg class="bi bi-arrow-up" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M8 3.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V4a.5.5 0 01.5-.5z"
|
||||
clip-rule="evenodd" />
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.646 2.646a.5.5 0 01.708 0l3 3a.5.5 0 01-.708.708L8 3.707 5.354 6.354a.5.5 0 11-.708-.708l3-3z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span id="up-speed-text"></span>
|
||||
</h3>
|
||||
|
||||
<body class="header-fixed sidebar-fixed sidebar-dark header-light" id="body">
|
||||
<div class="wrapper">
|
||||
{{template "navbar.html" "dashboard"}}
|
||||
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
<header class="main-header " id="header">
|
||||
<nav class="navbar navbar-static-top navbar-expand-lg">
|
||||
<!-- Sidebar toggle button -->
|
||||
<button id="sidebar-toggler" class="sidebar-toggle">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-md-12">
|
||||
<!-- Sales Graph -->
|
||||
<div class="card card-default" data-scroll-height="675">
|
||||
<div class="card-header">
|
||||
<h2>Download/Upload speed</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="chart-general-network" class="chartjs"></canvas>
|
||||
</div>
|
||||
<div class="card-footer d-flex flex-wrap bg-white p-0">
|
||||
<div class="col-6 px-0">
|
||||
<div class="text-center p-4">
|
||||
<h4 id="general-download-speed">...</h4>
|
||||
<p class="mt-2">Download Speed</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 px-0">
|
||||
<div class="text-center p-4 border-left">
|
||||
<h4 id="general-upload-speed">...</h4>
|
||||
<p class="mt-2">Upload Speed</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-md-12">
|
||||
<!-- Doughnut Chart -->
|
||||
<div class="card card-default" data-scroll-height="675">
|
||||
<div class="card-header justify-content-center">
|
||||
<h2>Main cache</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="main-cache-chart"></canvas>
|
||||
</div>
|
||||
<div class="card-footer d-flex flex-wrap bg-white p-0">
|
||||
<div class="col-6">
|
||||
<div class="py-4 px-4">
|
||||
<ul class="d-flex flex-column justify-content-between">
|
||||
<li class="mb-2"><i class="mdi mdi-checkbox-blank-circle-outline mr-2"
|
||||
style="color: #4c84ff"></i>Used</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 border-left">
|
||||
<div class="py-4 px-4 ">
|
||||
<ul class="d-flex flex-column justify-content-between">
|
||||
<li class="mb-2"><i class="mdi mdi-checkbox-blank-circle-outline mr-2"
|
||||
style="color: #8061ef"></i>Free</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer mt-auto">
|
||||
<div class="copyright bg-white">
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{template "common_footer.html"}}
|
||||
<script src="assets/js/Chart.bundle.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="assets/js/humanize.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="assets/js/general_chart.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="assets/js/single_bar_chart.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="assets/js/general.js" type="text/javascript" charset="utf-8"></script>
|
||||
|
||||
{{template "footer.html"}}
|
||||
<script src="assets/js/general_chart.js"></script>
|
||||
<script src="assets/js/cache_chart.js"></script>
|
||||
<script src="assets/js/dashboard.js"></script>
|
||||
<script>
|
||||
Distribyted.dashboard.loadView();
|
||||
setInterval(function () {
|
||||
Distribyted.dashboard.loadView();
|
||||
}, 2000)
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,20 +1,72 @@
|
|||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="#">Distribyted</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">General</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/routes">Routes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/config">Config</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!--
|
||||
====================================
|
||||
——— LEFT SIDEBAR WITH FOOTER
|
||||
=====================================
|
||||
-->
|
||||
<aside class="left-sidebar bg-sidebar">
|
||||
<div id="sidebar" class="sidebar sidebar-with-footer">
|
||||
<!-- Aplication Brand -->
|
||||
<div class="app-brand">
|
||||
<a href="/" title="Distribyted">
|
||||
<img src="/assets/img/favicon.png" />
|
||||
<span class="brand-name text-truncate">Distribyted</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- begin sidebar scrollbar -->
|
||||
<div class="sidebar-scrollbar">
|
||||
|
||||
<!-- sidebar menu -->
|
||||
<ul class="nav sidebar-inner" id="sidebar-menu">
|
||||
{{if eq . "dashboard"}}
|
||||
<li class="active">
|
||||
{{else}}
|
||||
<li>
|
||||
{{end}}
|
||||
<a class="sidenav-item-link" href="/">
|
||||
<i class="mdi mdi-view-dashboard-outline"></i>
|
||||
<span class="nav-text">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
{{if eq . "routes"}}
|
||||
<li class="active">
|
||||
{{else}}
|
||||
<li>
|
||||
{{end}}
|
||||
<a class="sidenav-item-link" href="/routes">
|
||||
<i class="mdi mdi-folder-multiple-outline"></i>
|
||||
<span class="nav-text">Routes</span>
|
||||
</a>
|
||||
</li>
|
||||
{{if eq . "config"}}
|
||||
<li class="active">
|
||||
{{else}}
|
||||
<li>
|
||||
{{end}}
|
||||
<a class="sidenav-item-link" href="/config">
|
||||
<i class="mdi mdi-book-open-page-variant"></i>
|
||||
<span class="nav-text">Yaml Config</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="sidebar-footer">
|
||||
<hr class="separator mb-0" />
|
||||
<div class="sidebar-footer-content">
|
||||
<h6 class="text-uppercase">
|
||||
Main cache <span class="float-right">40%</span>
|
||||
</h6>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar active" style="width: 40%;" role="progressbar"></div>
|
||||
</div>
|
||||
<h6 class="text-uppercase">
|
||||
/path/pepe cache <span class="float-right">65%</span>
|
||||
</h6>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar active" style="width: 65%;" role="progressbar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</aside>
|
||||
|
|
@ -1,53 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
{{template "common_header.html"}}
|
||||
{{template "header.html" "Routes"}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{template "navbar.html"}}
|
||||
|
||||
<div class="container">
|
||||
{{if not .}}
|
||||
<div class="alert alert-warning" role="alert">
|
||||
No routes found.
|
||||
</div>
|
||||
{{end}}
|
||||
<body class="header-fixed sidebar-fixed sidebar-dark header-light" id="body">
|
||||
<div class="wrapper">
|
||||
{{template "navbar.html" "routes"}}
|
||||
|
||||
{{range .}}
|
||||
<div class="card shadow">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{.Name}}</h5>
|
||||
{{range .TorrentStats}}
|
||||
<div class="card shadow">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5>{{.Name}}</h5>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p id="up-down-speed-text-{{.Hash}}">...</p>
|
||||
<p id="peers-seeders-{{.Hash}}">...</p>
|
||||
<p id="piece-size-{{.Hash}}">...</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div id="file-chunks-{{.Hash}}" class="progress">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
<header class="main-header " id="header">
|
||||
<nav class="navbar navbar-static-top navbar-expand-lg">
|
||||
<!-- Sidebar toggle button -->
|
||||
<button id="sidebar-toggler" class="sidebar-toggle">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="content" id="template_target">
|
||||
</div>
|
||||
{{end}}
|
||||
<footer class="footer mt-auto">
|
||||
<div class="copyright bg-white">
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{template "common_footer.html"}}
|
||||
<script src="assets/js/humanize.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="assets/js/file_chunks.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="assets/js/routes.js" type="text/javascript" charset="utf-8"></script>
|
||||
</body>
|
||||
|
||||
{{template "footer.html"}}
|
||||
|
||||
<script src="assets/js/routes.js"></script>
|
||||
<script>
|
||||
Distribyted.routes.loadView();
|
||||
setInterval(function () {
|
||||
Distribyted.routes.loadView();
|
||||
}, 2000)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue