mirror of
https://github.com/IrosTheBeggar/mStream.git
synced 2025-10-27 07:31:02 +00:00
admin panel
This commit is contained in:
IrosTheBeggar
parent
0d2c8b86f1
commit
8dc4b45019
@ -1 +1,96 @@
|
||||
ADMIN PANEL
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Admin Panel</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/fav/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/fav/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/fav/favicon-16x16.png">
|
||||
<link rel="manifest" href="/fav/site.webmanifest">
|
||||
<link rel="mask-icon" href="/fav/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<link rel="shortcut icon" href="/fav/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="msapplication-config" content="/fav/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link href="/fonts/jura.css" rel="stylesheet">
|
||||
|
||||
<!-- Style Sheets -->
|
||||
<link rel="stylesheet" href="spa.css">
|
||||
|
||||
<!-- JS -->
|
||||
<script defer src="/js/spa.js"></script>
|
||||
<script defer src="index.js"></script>
|
||||
<script src="/js/vue3.js"></script>
|
||||
|
||||
<script src="/js/lib/axios.js"></script>
|
||||
<script src="/js/api.js"></script>
|
||||
<script>API.checkAuthAndKickToLogin();</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="sidenav">
|
||||
<div class="side-nav-header">
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 612 153" style="enable-background:new 0 0 612 153;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#264679;}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#6684B2;}
|
||||
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#26477B;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M179.9,45.5c-6.2,0-11.5,1.7-15.9,5c-4.4,3.3-6.5,8.1-6.5,14.4c0,4.9,1.3,9.1,3.8,12.4
|
||||
c2.5,3.4,5.7,5.8,9.3,7.3c3.7,1.5,7.3,2.8,11,3.8c3.7,1,6.8,2.3,9.3,3.9c2.5,1.5,3.8,3.5,3.8,5.8c0,4.8-4.4,7.2-13.1,7.2h-24.1V118
|
||||
h24.1c17.1,0,25.6-6.7,25.6-20.2c0-1.9-0.2-3.8-0.6-5.8c-0.4-2-1.2-4-2.6-6c-1.3-2.1-3.3-3.7-5.8-4.9c-2.5-1.2-6.4-2.7-11.5-4.5
|
||||
l-8.8-3.1c-0.7-0.2-1.7-0.7-2.9-1.3c-1.3-0.7-2.2-1.3-2.8-1.9c-0.6-0.6-1.1-1.4-1.6-2.3c-0.5-0.9-0.7-2-0.7-3.2c0-2,1-3.5,2.9-4.6
|
||||
c1.9-1.1,4.3-1.6,7-1.6h24.6V45.5H179.9z"/>
|
||||
<path class="st0" d="M226.4,58.3v31c0,10.2,2.5,17.6,7.6,22c5.1,4.4,13,6.6,23.7,6.6v-12.8c-2.7,0-4.9-0.2-6.8-0.4
|
||||
c-1.8-0.3-3.7-0.9-5.8-1.9c-2-0.9-3.6-2.6-4.7-4.9c-1.1-2.3-1.6-5.2-1.6-8.7V58.3h18.8V45.5h-18.8V31.6L214,58.3H226.4z"/>
|
||||
<path class="st0" d="M281.1,118V76.8c0-7.2,0.9-12,2.6-14.5c1-1.3,2.2-2.2,3.6-2.8c1.4-0.6,2.6-1,3.6-1.1c1-0.1,2.5-0.1,4.3-0.1
|
||||
H310V45.5h-12.2c-3.6,0-6.5,0.1-8.6,0.3c-2.1,0.2-4.5,0.9-7.3,2c-2.8,1.1-5.1,2.8-7.1,5c-4,4.4-6,12.4-6,24V118H281.1z"/>
|
||||
<path class="st0" d="M326.2,53.8c-6.2,7.4-9.3,17-9.3,28.9c0,10.7,3.2,19.4,9.5,26.2s14.7,10.1,25.3,10.1c8.7,0,16.3-2.7,22.7-8.1
|
||||
L366,102c-3.7,2.1-8.5,3.2-14.3,3.2c-6.5,0-11.8-2.3-15.8-6.9c-4-4.6-6-10.5-6-17.9c0-7,1.9-12.9,5.6-17.9c3.8-5,8.9-7.5,15.5-7.5
|
||||
c3.3,0,6.1,0.8,8.2,2.4c2.1,1.6,3.2,4,3.2,7.2c0,5-1.2,8.5-3.6,10.6c-2.4,2.1-6.7,3.2-12.9,3.2h-6.7v11.7h5.7
|
||||
c20.3,0,30.5-8.5,30.5-25.4c0-13.6-7.9-20.7-23.7-21.5C340.9,43,332.4,46.5,326.2,53.8z"/>
|
||||
<path class="st0" d="M412.3,73.2c-7.4,0-13.6,1.9-18.5,5.7c-4.9,3.8-7.4,9.4-7.4,16.7c0,7.3,2.3,12.9,7,16.7
|
||||
c4.6,3.8,10.9,5.7,18.8,5.7h31V73.6c0-9.1-2.4-16-7.2-20.8c-4.8-4.8-11.7-7.2-20.7-7.2h-22.9v12.8h22.3c10.9,0,16.4,6.1,16.4,18.2
|
||||
v28.7h-18.4c-9.1,0-13.6-3.2-13.6-9.8c0-3.3,1.2-5.9,3.6-7.8c2.4-1.8,5.8-2.7,10.2-2.7c5.1,0,9.4,1.4,12.9,4.3V75.3
|
||||
C420.9,73.9,416.5,73.2,412.3,73.2z"/>
|
||||
<path class="st0" d="M458.8,118H471V58.3h24.4V118h12.2V58.3h5.7c6.8,0,11.3,0.7,13.5,2c4.3,2.5,6.5,7.7,6.5,15.5V118h12.2V75.7
|
||||
c0-6-0.6-11.2-1.9-15.5c-1.2-4.3-3.9-7.8-7.9-10.6c-3.9-2.7-9.1-4.1-15.7-4.1h-61.4V118z"/>
|
||||
<polygon class="st1" points="75,118.5 75,35.5 96,48.5 96,118.5 "/>
|
||||
<polygon class="st2" points="99,118.5 99,49.5 110.5,56.5 121,49.5 121,118.5 "/>
|
||||
<polygon class="st1" points="124,118.5 124,48.5 145,35.5 145,118.5 "/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="side-nav-item select" onclick="changeView('folders-view', this)">
|
||||
<?xml version="1.0" encoding="utf-8"?><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="6 6 40 40" style="enable-background:new 0 0 48 48"><path d="M16.516 20.688C16.266 21.25 12 31.906 12 31.906V17c0-.55.45-1 1-1h1.334l.35-1.052C14.857 14.427 15.45 14 16 14h5c.55 0 1.143.427 1.316.948l.35 1.052H32c.55 0 1 .45 1 1v3H17.5c-.275 0-.734.125-.984.688zM41 21H19c-.55 0-1.167.418-1.371.929l-5.258 13.143c-.204.51.079.928.629.928h22c.55 0 1.167-.418 1.371-.929l5.258-13.143c.204-.51-.079-.928-.629-.928z"/></svg>
|
||||
<span>Folders</span>
|
||||
</div>
|
||||
<div class="side-nav-item" onclick="changeView('users-view', this)">
|
||||
<?xml version="1.0" encoding="utf-8"?><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="6 6 40 40" style="enable-background:new 0 0 48 48"><path d="M16.516 20.688C16.266 21.25 12 31.906 12 31.906V17c0-.55.45-1 1-1h1.334l.35-1.052C14.857 14.427 15.45 14 16 14h5c.55 0 1.143.427 1.316.948l.35 1.052H32c.55 0 1 .45 1 1v3H17.5c-.275 0-.734.125-.984.688zM41 21H19c-.55 0-1.167.418-1.371.929l-5.258 13.143c-.204.51.079.928.629.928h22c.55 0 1.167-.418 1.371-.929l5.258-13.143c.204-.51-.079-.928-.629-.928z"/></svg>
|
||||
<span>Users</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidenav-cover" class="click-through"></div>
|
||||
<div id="content">
|
||||
<div id="content-header">
|
||||
<h3>File Explorer</h3>
|
||||
<div id="content-header-spacer"></div>
|
||||
<svg id="sidenav-button" @click="toggleMenu" class="ham hamRotate180 ham5" viewBox="0 0 100 100" width="80">
|
||||
<path class="line top" d="m 30,33 h 40 c 0,0 8.5,-0.68551 8.5,10.375 0,8.292653 -6.122707,9.002293 -8.5,6.625 l -11.071429,-11.071429" />
|
||||
<path class="line middle" d="m 70,50 h -40" />
|
||||
<path class="line bottom" d="m 30,67 h 40 c 0,0 8.5,0.68551 8.5,-10.375 0,-8.292653 -6.122707,-9.002293 -8.5,-6.625 l -11.071429,11.071429" />
|
||||
</svg>
|
||||
</div>
|
||||
<!-- componentKey is used to force a re-render -->
|
||||
<component :is="currentViewMain">
|
||||
</component>
|
||||
</div>
|
||||
</body>
|
||||
39
webapp-beta/admin/index.js
Normal file
39
webapp-beta/admin/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
const app = Vue.createApp({
|
||||
data() { return {
|
||||
currentViewMain: 'users-view'
|
||||
}},
|
||||
methods: {
|
||||
toggleMenu(event) {
|
||||
toggleSideMenu();
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const fileExplorerView = app.component('users-view', {
|
||||
template: `<div>Users View</div>`
|
||||
});
|
||||
|
||||
const nowPlayingView = app.component('folders-view', {
|
||||
template: `<div>FOLDERS</div>`
|
||||
});
|
||||
|
||||
const vm = app.mount('#content');
|
||||
|
||||
function changeView(viewName, el){
|
||||
if (vm.currentViewMain === viewName) {
|
||||
closeSideMenu();
|
||||
return;
|
||||
}
|
||||
|
||||
vm.currentViewMain = viewName;
|
||||
|
||||
const elements = document.querySelectorAll('.side-nav-item'); // or:
|
||||
elements.forEach(elm => {
|
||||
elm.classList.remove("select")
|
||||
});
|
||||
|
||||
el.classList.add("select");
|
||||
|
||||
// close nav on mobile
|
||||
closeSideMenu();
|
||||
}
|
||||
262
webapp-beta/admin/spa.css
Normal file
262
webapp-beta/admin/spa.css
Normal file
@ -0,0 +1,262 @@
|
||||
/* Responsive layout */
|
||||
html {
|
||||
overflow: hidden; /* removes all scroll bars */
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: start;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#sidenav {
|
||||
background-color: #262a33;
|
||||
overflow-y: auto;
|
||||
user-select: none;
|
||||
color: #F5F7FA;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
font-family: 'Jura', sans-serif;
|
||||
}
|
||||
|
||||
#sidenav-cover {
|
||||
background-color: black;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#sidenav-button {
|
||||
display: none;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
z-index: 1000000;
|
||||
}
|
||||
|
||||
#content {
|
||||
background-color: #3c414e;
|
||||
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex-grow: 1; /* do not grow - initial value: 0 */
|
||||
flex-shrink: 0; /* do not shrink - initial value: 1 */
|
||||
flex-basis: inherit; /* width/height - initial value: auto */
|
||||
}
|
||||
|
||||
#content-header {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#content-header-spacer {
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.click-through {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn ease 400ms forwards;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
animation: fadeOut ease 400ms forwards;
|
||||
}
|
||||
|
||||
.menu-in {
|
||||
animation: menuOut ease 400ms forwards;
|
||||
}
|
||||
|
||||
.menu-out {
|
||||
animation: menuIn ease 400ms forwards;
|
||||
}
|
||||
|
||||
/* On screens that are 600px wide or less, the background color is olive */
|
||||
@media screen and (max-width: 768px) {
|
||||
#sidenav {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 220px;
|
||||
z-index: 100000;
|
||||
|
||||
left: -220px;
|
||||
}
|
||||
|
||||
#sidenav-cover {
|
||||
z-index: 50000;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 100%;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
#sidenav-button {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity:0;
|
||||
}
|
||||
100% {
|
||||
opacity:.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity:0.3;
|
||||
}
|
||||
100% {
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menuIn {
|
||||
0% {
|
||||
left: -220px;
|
||||
}
|
||||
100% {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menuOut {
|
||||
0% {
|
||||
left: 0px;
|
||||
}
|
||||
100% {
|
||||
left: -220px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
#sidenav {
|
||||
overflow-y: auto;
|
||||
flex-grow: 0; /* do not grow - initial value: 0 */
|
||||
flex-shrink: 0; /* do not shrink - initial value: 1 */
|
||||
flex-basis: 240px; /* width/height - initial value: auto */
|
||||
}
|
||||
|
||||
#sidenav-cover {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Animated menu button */
|
||||
/* Shamelessly stolen from: https://codepen.io/ainalem/pen/LJYRxz*/
|
||||
.ham {
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: transform 400ms;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.hamRotate.active {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.hamRotate180.active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.line {
|
||||
fill:none;
|
||||
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
|
||||
stroke:#fff;
|
||||
stroke-width:5.5;
|
||||
stroke-linecap:round;
|
||||
}
|
||||
.ham5 .top {
|
||||
stroke-dasharray: 40 82;
|
||||
}
|
||||
.ham5 .bottom {
|
||||
stroke-dasharray: 40 82;
|
||||
}
|
||||
.ham5.active .top {
|
||||
stroke-dasharray: 14 82;
|
||||
stroke-dashoffset: -72px;
|
||||
}
|
||||
.ham5.active .bottom {
|
||||
stroke-dasharray: 14 82;
|
||||
stroke-dashoffset: -72px;
|
||||
}
|
||||
|
||||
|
||||
/* Sidenav Stuff */
|
||||
#sidenav svg {
|
||||
fill: #fff;
|
||||
height: 100%;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.side-nav-header {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.side-nav-header button {
|
||||
background-color: rgb(101, 126, 228);
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin: 10px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.side-nav-item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.side-nav-item:not(.select):hover {
|
||||
background-color: #31353d;
|
||||
}
|
||||
|
||||
.side-nav-spacer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.select {
|
||||
color: #ffffff;
|
||||
background-color: #31353d;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -39,7 +39,7 @@
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 612 153" style="enable-background:new 0 0 612 153;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#264679;}
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#6684B2;}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#6684B2;}
|
||||
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#26477B;}
|
||||
</style>
|
||||
@ -118,7 +118,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#DDD" width="24" height="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.2 5.9l.8-.8C19.6 3.7 17.8 3 16 3s-3.6.7-5 2.1l.8.8C13 4.8 14.5 4.2 16 4.2s3 .6 4.2 1.7zm-.9.8c-.9-.9-2.1-1.4-3.3-1.4s-2.4.5-3.3 1.4l.8.8c.7-.7 1.6-1 2.5-1 .9 0 1.8.3 2.5 1l.8-.8zM19 13h-2V9h-2v4H5c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zM8 18H6v-2h2v2zm3.5 0h-2v-2h2v2zm3.5 0h-2v-2h2v2z"/></svg>
|
||||
<span>Servers</span>
|
||||
</div>
|
||||
<div class="side-nav-item" onclick="window.location.href = './admin'">
|
||||
<div class="side-nav-item" onclick="window.open('./admin', '_blank');">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M17,11c0.34,0,0.67,0.04,1,0.09V6.27L10.5,3L3,6.27v4.91c0,4.54,3.2,8.79,7.5,9.82c0.55-0.13,1.08-0.32,1.6-0.55 C11.41,19.47,11,18.28,11,17C11,13.69,13.69,11,17,11z"/><path d="M17,13c-2.21,0-4,1.79-4,4c0,2.21,1.79,4,4,4s4-1.79,4-4C21,14.79,19.21,13,17,13z M17,14.38c0.62,0,1.12,0.51,1.12,1.12 s-0.51,1.12-1.12,1.12s-1.12-0.51-1.12-1.12S16.38,14.38,17,14.38z M17,19.75c-0.93,0-1.74-0.46-2.24-1.17 c0.05-0.72,1.51-1.08,2.24-1.08s2.19,0.36,2.24,1.08C18.74,19.29,17.93,19.75,17,19.75z"/></g></g></svg>
|
||||
<span>Admin Panel</span>
|
||||
</div>
|
||||
|
||||
@ -21,6 +21,7 @@ const vm = app.mount('#content');
|
||||
|
||||
function changeView(viewName, el){
|
||||
if (vm.currentViewMain === viewName) {
|
||||
closeSideMenu();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ document.getElementById("sidenav-cover").addEventListener("click", () => {
|
||||
});
|
||||
|
||||
function toggleSideMenu() {
|
||||
|
||||
console.log('gferg')
|
||||
document.getElementById("sidenav-cover").classList.toggle("click-through");
|
||||
|
||||
// Handles initial state rendered on page load
|
||||
|
||||
Loading…
Reference in New Issue
Block a user