mStream/webapp/admin/index.html
2021-10-03 01:45:39 -04:00

167 lines
20 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mStream Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="apple-touch-icon" sizes="180x180" href="../assets/fav/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../assets/fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../assets/fav/favicon-16x16.png">
<link rel="manifest" href="../assets/fav/site.webmanifest">
<link rel="mask-icon" href="../assets/fav/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="../assets/fav/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="../assets/fav/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- Font -->
<link href="../assets/fonts/jura.css" rel="stylesheet">
<script src="../assets/js/lib/vue2.js"></script>
<script src="../assets/js/lib/axios.js"></script>
<script src="../assets/js/lib/clipboard.js"></script>
<script src="../assets/js/lib/jwt-decode.js"></script>
<script defer src="../assets/js/lib/materialize.js"></script>
<script defer src="../assets/js/spa.js"></script>
<script defer src="index.js"></script>
<script defer src="../assets/js/lib/cookie.min.js"></script>
<!-- iziToast -->
<script defer src="../assets/js/lib/izi-toast.js"></script>
<link rel="stylesheet" href="../assets/css/izi-toast.css">
<link rel="stylesheet" href="../assets/css/spinner.css">
<link rel="stylesheet" href="../assets/css/materialize.css">
<link rel="stylesheet" href="../assets/css/spa.css">
<link rel="stylesheet" href="index.css">
<script src="../assets/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:#6684B2;}
.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-header">
<span>Config</span>
</div>
<div class="side-nav-item waves-effect waves-purple select" onclick="changeView('folders-view', this)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" height="28"><path fill="#FFA000" d="M38 12H22l-4-4H8c-2.2 0-4 1.8-4 4v24c0 2.2 1.8 4 4 4h31c1.7 0 3-1.3 3-3V16c0-2.2-1.8-4-4-4z"/><path fill="#FFCA28" d="M42.2 18H15.3c-1.9 0-3.6 1.4-3.9 3.3L8 40h31.7c1.9 0 3.6-1.4 3.9-3.3l2.5-14c.5-2.4-1.4-4.7-3.9-4.7z"/></svg>
<span>Directories</span>
</div>
<div class="side-nav-item waves-effect waves-purple" onclick="changeView('users-view', this)">
<svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="200 200 800 800"><path fill="#FFF" d="M671.027 410.286c31.749 19.852 54.013 53.574 58.044 92.642 12.928 6.092 27.325 9.578 42.596 9.578 55.593 0 100.645-45.073 100.645-100.73 0-55.591-45.052-100.706-100.645-100.706-55.152.087-99.807 44.283-100.64 99.216m-65.998 206.146c55.611 0 100.749-45.093 100.749-100.705 0-55.568-45.138-100.665-100.749-100.665-55.569 0-100.662 45.097-100.662 100.665 0 55.612 45.092 100.705 100.662 100.705m42.706 6.883H562.3c-71.084 0-128.886 57.823-128.886 128.886v104.541l.218 1.623 7.232 2.255c67.816 21.213 126.781 28.225 175.295 28.225 94.746 0 149.683-26.955 153.076-28.728l6.707-3.375h.723V752.201c0-71.063-57.827-128.886-128.93-128.886M814.33 519.32h-84.754c-.965 33.965-15.406 64.487-38.305 86.465 63.217 18.8 109.431 77.392 109.431 146.613v32.211c83.705-3.089 131.951-26.823 135.152-28.442l6.707-3.42h.744V648.273c0-71.106-57.826-128.953-128.975-128.953m-385.958-6.814c19.655 0 37.997-5.742 53.556-15.537 4.907-32.188 22.172-60.344 46.827-79.498.108-1.882.283-3.726.283-5.611 0-55.631-45.094-100.704-100.666-100.704-55.633 0-100.751 45.073-100.751 100.704.001 55.573 45.118 100.646 100.751 100.646m90.433 93.279c-22.766-21.846-37.249-52.261-38.279-85.942-3.159-.216-6.248-.523-9.468-.523h-85.455c-71.083 0-128.929 57.847-128.929 128.953v104.474l.26 1.644 7.188 2.301c54.474 17.026 103.075 24.829 145.234 27.238v-31.532c-.001-69.221 46.233-127.77 109.449-146.613"/></svg>
<span>Users</span>
</div>
<div class="side-nav-item waves-effect waves-purple" onclick="changeView('federation-view', this)">
<svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="0 0 48 48"><path d="M 44.398438 17.300781 C 44.300781 15.898438 43.300781 14.800781 41.898438 14.601563 C 38.398438 14 30.300781 13 24.199219 13 C 18.101563 13 9.601563 13.898438 6 14.5 C 4.699219 14.699219 3.699219 15.800781 3.5 17.199219 L 3 25 C 2.898438 26.601563 4.101563 27.800781 5.699219 28.199219 C 8.601563 29 15.699219 29 24.199219 29 C 32.699219 29 39.5 28.898438 42.300781 28.300781 C 43.898438 28 45.101563 26.699219 45 25.101563 Z M 39 22 L 9 22 C 8.398438 22 8 21.5 8 21 C 8 20.5 8.398438 20 9 20 L 39 20 C 39.601563 20 40 20.5 40 21 C 40 21.5 39.601563 22 39 22 Z" fill="#ffc107"/><path d="M 23.699219 3 C 23.5 3 23.5 3 23.398438 3.199219 C 19 8.398438 15.699219 14.800781 13.398438 22.898438 C 11.800781 28.898438 10.5 36.101563 10 44.699219 C 10 44.898438 10.199219 45 10.300781 45 L 10.5 45 C 10.699219 45 10.699219 45 10.800781 44.800781 C 15.5 38.601563 19.800781 33.699219 26 29.800781 C 27 29.300781 27.5 29 28 29 C 28.199219 29 28.5 29.199219 29 29.800781 C 31.601563 33.398438 34.398438 36.898438 37.199219 41.800781 C 37.199219 42 37.5 42 37.699219 42 C 37.898438 42 38 41.800781 38 41.699219 C 37.300781 34.5 36.199219 27.898438 33.898438 21.398438 C 31.601563 14.699219 28.300781 8.5 24.101563 3.199219 C 24.101563 3 23.898438 3 23.699219 3 Z" fill="#455a64"/><path d="M 32 22.101563 C 30 16.101563 27.199219 10.699219 23.699219 6 C 20 10.800781 17.300781 16.5 15.398438 23.398438 C 14 28.601563 13 33.898438 12.398438 39.601563 C 16.300781 34.800781 20 31.199219 25 28.101563 L 25.101563 28 L 25.199219 28 C 25.398438 27.898438 25.601563 27.800781 25.699219 27.699219 C 26.5 27.300781 27.101563 27 28 27 C 29.398438 27 30.300781 28.199219 30.601563 28.601563 C 31.101563 29.199219 31.5 29.800781 32 30.5 C 33.101563 31.898438 34.101563 33.398438 35.199219 34.898438 C 34.398438 30.199219 33.398438 26 32 22.101563 Z" fill="#c5cae9"/></svg>
<span>Federation</span>
</div>
<!-- <div class="side-nav-item waves-effect waves-purple" onclick="changeView('rpn-view', this)">
<svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#8c9eff" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/></svg>
<span>mStream RPN</span>
</div> -->
<div class="side-nav-header">
<span>Server</span>
</div>
<div class="side-nav-item waves-effect waves-purple" onclick="changeView('info-view', this)">
<svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="0 -1 24 24" fill="#fff"><path d="M4 2c-1.093 0-2 .907-2 2v18.406l1.719-1.687L6.438 18H20c1.093 0 2-.907 2-2V4c0-1.093-.907-2-2-2H4zm0 2h16v12H5.594l-.313.281L4 17.563V4zm7 2v2h2V6h-2zm0 3v5h2V9h-2z"/></svg>
<span>About</span>
</div>
<div class="side-nav-item waves-effect waves-purple" onclick="changeView('advanced-view', this)">
<svg height="28" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M490.51,294.933v-78.613l-57.766-11.093c-3.883-13.594-9.354-26.549-16.092-38.657l32.701-48.337 l-55.602-55.587l-48.244,32.663c-12.309-6.885-25.492-12.177-39.338-16.109l-11.043-57.14h-78.614l-11.049,57.194 C191.568,83.21,178.34,88.654,166,95.592l-48.069-32.61l-55.589,55.562l32.726,48.312c-6.765,12.204-12.277,25.253-16.142,38.959 L21.49,216.841v78.613l57.659,11.078c3.917,13.661,9.426,26.676,16.228,38.834l-32.932,48.67l55.601,55.59l48.83-33.061 c12.103,6.719,25.048,11.981,38.629,15.852l11.099,57.524h78.614l11.096-57.531c13.684-3.894,26.717-9.275,38.896-16.063 l48.832,33.101l55.588-55.574l-33.072-48.836c6.805-12.221,12.383-25.298,16.279-39.032L490.51,294.933 M255.975,378.017 c-67.441,0-122.115-54.673-122.115-122.114s54.674-122.115,122.115-122.115c67.441,0,122.115,54.673,122.115,122.115 S323.416,378.017,255.975,378.017" fill="#F56F6C"/><path d="M254.297,378v0.006c0.439,0.006,0.877,0.01,1.316,0.01C255.322,378.014,255.289,378.005,254.297,378 M255.676,133.789c-0.461,0-0.92,0.004-1.379,0.011v0.005C255.313,133.801,255.359,133.791,255.676,133.789 M255.975,133.788 l-0.086,0.001c67.402,0.047,122.113,54.702,122.113,122.114c0,67.405-54.744,122.055-122.135,122.114h0.107 c67.441,0,122.115-54.673,122.115-122.114S323.416,133.788,255.975,133.788 M393.775,62.645l-0.014,0.009l55.592,55.579 l-32.701,48.337c6.738,12.108,12.209,25.063,16.092,38.657l57.766,11.093v78.613v-78.613l-57.766-11.093 c-3.883-13.594-9.268-26.549-16.006-38.657l32.66-48.337L393.775,62.645 M295.127,22.058h-40.83H295.127l11.043,57.14 c13.846,3.933,27.029,9.225,39.338,16.109l0.006-0.003c-12.307-6.884-25.494-12.174-39.338-16.106L295.127,22.058" fill="#F2F2F2"/><path d="M295.127,22.058h-40.83V133.8c0.459-0.007,0.918-0.011,1.379-0.011l0.125-0.001l0.088,0.001l0.086-0.001 c67.441,0,122.115,54.673,122.115,122.115s-54.674,122.114-122.115,122.114h-0.107h-0.109l-0.145-0.001 c-0.439,0-0.877-0.004-1.316-0.01v111.936h40.92l11.096-57.531c13.684-3.894,26.717-9.275,38.896-16.063l48.832,33.101 l55.588-55.574l-33.072-48.836c6.805-12.221,12.383-25.298,16.279-39.032l57.674-11.073v-78.613l-57.766-11.093 c-3.883-13.594-9.354-26.549-16.092-38.657l32.701-48.337l-55.592-55.579l-48.244,32.654l-0.004-0.003l-0.006,0.003 c-12.309-6.885-25.492-12.177-39.338-16.109L295.127,22.058" fill="#E96966"/><path d="M256.072,111.928c-79.505,0-143.957,64.451-143.957,143.956c0,79.503,64.452,143.955,143.957,143.955 c79.504,0,143.955-64.452,143.955-143.955C400.027,176.379,335.576,111.928,256.072,111.928z M256.072,329.569 c-40.696,0-73.687-32.99-73.687-73.686c0-40.697,32.991-73.687,73.687-73.687c40.695,0,73.686,32.989,73.686,73.687 C329.758,296.579,296.768,329.569,256.072,329.569z" fill="#FFF"/></svg>
<span>Settings</span>
</div>
<div class="side-nav-item waves-effect waves-purple" onclick="changeView('db-view', this)">
<svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="0 0 53 53"><path d="M50.455 8C49.724 3.538 39.281 0 26.5 0S3.276 3.538 2.545 8H2.5v37h.045c.731 4.461 11.175 8 23.955 8s23.224-3.539 23.955-8h.045V8h-.045z" fill="#424a60"/><g fill="#424a60"><path d="M26.5 41c-13.255 0-24-3.806-24-8.5V45h.045c.731 4.461 11.175 8 23.955 8s23.224-3.539 23.955-8h.045V32.5c0 4.694-10.745 8.5-24 8.5zM2.5 32v.5c0-.168.018-.334.045-.5H2.5zM50.455 32c.027.166.045.332.045.5V32h-.045z"/></g><g fill="#556080"><path d="M26.5 29c-13.255 0-24-3.806-24-8.5V33h.045c.731 4.461 11.175 8 23.955 8s23.224-3.539 23.955-8h.045V20.5c0 4.694-10.745 8.5-24 8.5zM2.5 20v.5c0-.168.018-.334.045-.5H2.5zM50.455 20c.027.166.045.332.045.5V20h-.045z"/></g><ellipse cx="26.5" cy="8.5" rx="24" ry="8.5" fill="#7fabda"/><g fill="#7383bf"><path d="M26.5 17c-13.255 0-24-3.806-24-8.5V21h.045c.731 4.461 11.175 8 23.955 8s23.224-3.539 23.955-8h.045V8.5c0 4.694-10.745 8.5-24 8.5zM2.5 8v.5c0-.168.018-.334.045-.5H2.5zM50.455 8c.027.166.045.332.045.5V8h-.045z"/></g></svg>
<span>Database</span>
</div>
<div class="side-nav-item waves-effect waves-purple" onclick="changeView('transcode-view', this)">
<svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="0 0 48 48"><path fill="none" stroke="#388e3c" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.5 8.5h9l-9 9v11l20-20h11l-31 31h11l20-20v11l-9 9h9"/></svg>
<span>Transcoding</span>
</div>
<div class="side-nav-item waves-effect waves-purple" onclick="changeView('logs-view', this)">
<svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="0 0 58 58"><path d="M36.028 0c-11.046 0-17 3.515-17 6v10.849l-4.335-4.335-.118-.118c-.586-.586-3.943-1-6.547 1.604-2.604 2.603-3.467 7.238-2.881 7.824l.118.118 13.763 13.763V52.5c0 3.038 5.954 5.5 17 5.5s17-2.462 17-5.5V6c0-2.485-5.954-6-17-6z" fill="#745a49"/><path d="M36.028 0C25.89 0 20.056 2.959 19.163 5.368 20.056 8.546 25.89 11 36.028 11 46.166 11 52 8.546 52.893 5.368 52.001 2.959 46.166 0 36.028 0zM15.735 13.556l-1.042-1.042-.118-.118c-.586-.586-3.943-1-6.547 1.604-2.604 2.603-3.467 7.238-2.881 7.824l.118.118.952.952c6.334-1.911 8.696-5.948 9.518-9.338z" fill="#d1a170"/><path d="M46.028 50a1 1 0 00-1 1v6.304a28.434 28.434 0 002-.435V51a1 1 0 00-1-1zM40.028 47a1 1 0 00-1 1v9.928a55.775 55.775 0 002-.124V48a1 1 0 00-1-1zM36.028 54a1 1 0 00-1 1v2.986c.333.005.657.014 1 .014.343 0 .666-.009 1-.014V55a1 1 0 00-1-1zM31.028 49a1 1 0 00-1 1v7.716c.642.065 1.304.122 2 .165V50a1 1 0 00-1-1zM24.028 42a1 1 0 00-1 1v13.251c.601.225 1.268.431 2 .618V43a1 1 0 00-1-1zM23.006 8.924l.022 10.078a1 1 0 001 .998h.001a1 1 0 00.999-1.002l-.02-9.339a17.271 17.271 0 01-2.002-.735zM27.991 10.364l.037 15.638a1 1 0 001 .998h.002a1 1 0 00.998-1.002l-.036-15.34a36.834 36.834 0 01-2.001-.294zM37.028 10.985V16a1 1 0 002 0v-5.083c-.645.034-1.313.056-2 .068zM44.028 10.37V27a1 1 0 002 0V9.94c-.628.159-1.291.304-2 .43zM48.028 9.336V19a1 1 0 002 0V8.435a13.82 13.82 0 01-2 .901z" fill="#3d3028"/></svg>
<span>Logs</span>
</div>
<!-- <div class="side-nav-header">
<span>Security</span>
</div> -->
<div class="side-nav-item waves-effect waves-purple" onclick="changeView('lock-view', this)">
<svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="0 0 460 460"><path d="M360.228,386.747L230,460L99.772,386.747c-27.804-15.639-45.01-45.06-45.01-76.96 V21.905L230,0l175.238,21.905v287.882C405.238,341.687,388.032,371.107,360.228,386.747z" fill="#86c867"/><path d="M335.565,357.061L230,416.442l-105.565-59.38 c-22.538-12.678-36.486-36.526-36.486-62.385V54.762L230,37.006l142.051,17.756v239.915 C372.051,320.535,358.103,344.384,335.565,357.061z" fill="#5e9b3e"/><path d="M230,460l130.228-73.253c27.803-15.64,45.01-45.06,45.01-76.96V21.905 L230,0v37.005l142.051,17.756v239.915c0,25.859-13.948,49.707-36.486,62.385L230,416.442V460z" opacity=".7" fill="#86c867"/><path d="M230,98.571c-30.244,0-54.762,24.518-54.762,54.762 c0,22.454,13.519,41.74,32.857,50.192V222.2h9.701c4.308,0,7.8,3.492,7.8,7.8s-3.492,7.8-7.8,7.8h-9.701v17.257h9.701 c4.308,0,7.8,3.492,7.8,7.8c0,4.308-3.492,7.8-7.8,7.8h-9.701v17.257h9.701c4.308,0,7.8,3.492,7.8,7.8c0,4.308-3.492,7.8-7.8,7.8 h-9.701v25.057L230,339.524l21.905-10.952V203.525c19.338-8.452,32.857-27.739,32.857-50.192 C284.762,123.089,260.244,98.571,230,98.571z M230,157.167c-8.166,0-14.786-6.62-14.786-14.786c0-8.166,6.62-14.786,14.786-14.786 s14.786,6.62,14.786,14.786C244.786,150.547,238.166,157.167,230,157.167z" fill="#ecf0f1"/></svg>
<span>Lock Admin API</span>
</div>
<!-- <div class="side-nav-spacer"></div> -->
<div class="side-nav-header">
<span>Navigation</span>
</div>
<div class="side-nav-item waves-effect waves-purple" onclick="API.goToPlayer()">
<svg height="28" width="28" viewBox="0 0 137.3 139.3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="68.5" cy="69.6" r="66.2" fill="#2c8aaa"/><defs><circle cx="68.7" cy="69.6" id="aaa" r="66.2"/></defs><clipPath id="bbb"><use xlink:href="#aaa" overflow="visible"/></clipPath><path opacity=".1" clip-path="url(#bbb)" fill="#070808" d="m104.9 65 32 30.9-2.9 39.9-44.8-1.9-37.1-36.6z"/><path d="m104.3 64.5-48.6-28c-2-1.1-4.5.3-4.5 2.6v56.1c0 2.3 2.5 3.7 4.5 2.6l48.6-28c2-1.2 2-4.1 0-5.3z" fill="#fff"/></svg>
<span>Player</span>
</div>
<div class="side-nav-item waves-effect waves-purple" onclick="API.logout()">
<svg xmlns="http://www.w3.org/2000/svg" height="28" width="28" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
<span>Logout</span>
</div>
</div>
<div id="sidenav-cover" class="click-through"></div>
<div id="content">
<!-- componentKey is used to force a re-render -->
<component :key="componentKey" v-bind:is="currentViewMain" class="content-switcher">
</component>
</div>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red" onclick="toggleSideMenu()">
<svg id="sidenav-button" class="ham hamRotate180 ham5" viewBox="0 0 100 100" >
<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>
</a>
</div>
<div id="admin-modal" class="modal bottom-sheet">
<div class="modal-content" id="dynamic-modal">
<component v-bind:is="currentViewModal">
</component>
</div>
</div>
</body>