Project-Name-Here/openCountdown
3
0
Fork 0
Code Issues Pull Requests Releases 6 Wiki Activity

- reworked admin interface layout

Browse Source 
- fixed custom time value entry
- sidebar toggablity
- added links for countdown view
- added helper tooltips
This commit is contained in:
Sören
2022-03-27 15:19:23 +02:00
parent f70bd4e540
commit da0d79e8ed
4 changed files with 130 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.MD
View File

@@ -3,6 +3,7 @@
# ToDo # ToDo
- [P] Endpoint docs - [P] Endpoint docs
- [ ] Better WS frames - [ ] Better WS frames
- [ ] Diffrent time picker for countdown selection - [X] Diffrent time picker for countdown selection
- [X] Deprecate old UI - [X] Deprecate old UI
- [X] Proper 404 page - [X] Proper 404 page
- [ ] Countdown to time

9
static/css/mainStyle.css
View File

@@ -117,4 +117,13 @@ pre {
.hidden { .hidden {
display: none !important; display: none !important;
}
.trans {
transition: .5s
}
.helperTip {
opacity: 0.8;
font-size: small;
} }

37
static/js/interface.js
View File

@@ -228,14 +228,11 @@ $(function () {
// Presets // Presets
$(".pres").click(function (event) { $(".pres").click(function (event) {
currentTime = parseInt(event.currentTarget.value) currentTime = parseInt(event.currentTarget.value)
const times = msToTime(currentTime) $("#customValue").data("durationPicker").setValue(currentTime/1000)
$("#timerHoursV")[0].innerHTML = times[3];
$("#timerMinuteV")[0].innerHTML = times[2];
$("#timerSecondsV")[0].innerHTML = times[1];
}) })
$(".goTimer").click(function (event) { $(".goTimer").on("click", function (event) {
event.currentTarget.innerHTML = '<div class="spinner-border-sm spinner-border"></div>' event.currentTarget.innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
setTimeout(function () { setTimeout(function () {
event.currentTarget.innerHTML = 'Go' event.currentTarget.innerHTML = 'Go'
@@ -477,4 +474,32 @@ function saveOption(path, callback) {
xmlHttp.onloadend = function (event) { xmlHttp.onloadend = function (event) {
callback(event, xmlHttp) callback(event, xmlHttp)
} }
} }
navStatus = true
function openNav() {
document.getElementById("navbarToggleExternalContent").style.width = "250px";
document.getElementById("navbarToggleExternalContent").style.opacity = "1";
document.getElementById("navbarToggleExternalContent").style.display = "block";
document.getElementById("navbarToggleExternalContent").style.zIndex = 999999;
document.getElementById("pageCont").style.marginLeft = "0px";
navStatus = true
}
function closeNav() {
document.getElementById("navbarToggleExternalContent").style.width = "0px";
document.getElementById("navbarToggleExternalContent").style.opacity = "0";
document.getElementById("navbarToggleExternalContent").style.display = "none";
document.getElementById("navbarToggleExternalContent").style.zIndex = -999999;
document.getElementById("pageCont").style.marginLeft = "0";
navStatus = false
}
function toogleNav(){
if(navStatus){
closeNav()
}else{
openNav()
}
}

160
templates/newAdminPanel.html
View File

@@ -32,7 +32,8 @@
<body> <body>
<main> <main>
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;"> <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark trans" style="width: 250px;"
id="navbarToggleExternalContent">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"> <svg class="bi me-2" width="40" height="32">
<use xlink:href="#bootstrap" /> <use xlink:href="#bootstrap" />
@@ -94,7 +95,14 @@
</div> </div>
</div> </div>
<pages class="d-flex flex-fill"> <pages class="d-flex flex-fill" id="pageCont" class="z-index: 50;">
<div class="">
<button type="button"
class="opacity mx-2 svg-center btn btn-outline-transparent rounded-circle border-0"
onclick="toogleNav()">
<i class="bi bi-list"></i>
</button>
</div>
<page id="homeP" class="pageC flex-fill overflow-auto"> <page id="homeP" class="pageC flex-fill overflow-auto">
@@ -103,11 +111,26 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3>Preview: </h3> <h3>Preview <span class="helperTip" data-placement="right" title="A preview of what is currently visible on the countdown view" data-toggle="tooltip">
<iframe src="/timer?smaller=true" height="100%" width="100%"> </iframe> <i class="bi bi-question-circle-fill" ></i>
</span>
<span class="helperTip" data-placement="right" title="Copies the link to the timer view" data-toggle="tooltip">
<button class="btn" onclick="navigator.clipboard.writeText(window.location.toString() + 'timer')"><i class="bi bi-clipboard"></i></button>
</span>
<span class="helperTip" data-placement="right" title="Open the countdown view in a new tab" data-toggle="tooltip">
<a href="/timer" class="btn " target="_blank"><i class="bi bi-box-arrow-up-right"></i></a>
</span>
</h3>
<iframe src="/timer?smaller=true" height="100%" width="100%" style="min-height: 400px;">
</iframe>
</div> </div>
<div class="col"> <div class="col">
<h3>Mode</h3> <h3>Mode <span class="helperTip" data-placement="right" title="Select what to show on the countdown view" data-toggle="tooltip">
<i class="bi bi-question-circle-fill" ></i>
</span></h3>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group"> <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off"
checked> checked>
@@ -151,72 +174,13 @@
<br> <br>
<br> <br>
<br> <br>
<h3>Messaging <span class="helperTip" data-placement="right" title="Shows a given message on the timer view" data-toggle="tooltip">
<presets> <i class="bi bi-question-circle-fill" ></i>
<button class="btn btn-outline-secondary m-1 pres" value="300000">00:05:00</button> </span></h3>
<button class="btn btn-outline-secondary m-1 pres" value="600000">00:10:00</button>
<button class="btn btn-outline-secondary m-1 pres" value="900000">00:15:00</button><br> <input type="text" id="messageContent" class="form-control" placeholder="Message here" style="width: 50%;">
<button class="btn btn-outline-secondary m-1 pres" value="1200000">00:20:00</button>
<button class="btn btn-outline-secondary m-1 pres" value="1500000">00:25:00</button>
<button class="btn btn-outline-secondary m-1 pres"
value="1800000">00:30:00</button><button
class="btn btn-outline-primary m-1 mt-0 goTimer">Go</button><br>
<button class="btn btn-outline-secondary m-1 pres" value="2100000">00:35:00</button>
<button class="btn btn-outline-secondary m-1 pres" value="2400000">00:40:00</button>
<button class="btn btn-outline-secondary m-1 pres" value="2700000">00:45:00</button>
</presets>
</div>
</div>
</div>
<br><br><br>
<h3>Timer / Messaging</h3>
<div class="container">
<div class="row" style="width: 60%;">
<div class="col">
<h4>H</h4>
<button class="btn btn-outline-secondary" id="timerHourInc">
<i class="bi bi-plus"></i>
</button><br>
<b id="timerHoursV">0</b><br>
<button class="btn btn-outline-secondary" id="timerHourDec">
<i class="bi bi-dash"></i>
</button>
</div>
<div class="col">
<h4>M</h4>
<button class="btn btn-outline-secondary" id="timerMinuteInc">
<i class="bi bi-plus"></i>
</button><br>
<b id="timerMinuteV">0</b><br>
<button class="btn btn-outline-secondary" id="timerMinuteDev">
<i class="bi bi-dash"></i>
</button>
</div>
<div class="col">
<h4>S</h4>
<button class="btn btn-outline-secondary" id="timerSecondsInc">
<i class="bi bi-plus"></i>
</button><br>
<b id="timerSecondsV">0</b><br>
<button class="btn btn-outline-secondary" id="timerSecondsDec">
<i class="bi bi-dash"></i>
</button>
</div>
<div class="col">
<button class="btn btn-outline-primary m-1 mt-0 goTimer" id="goJogger">Go</button>
</div>
<div class="col">
<div style="border-left:1px solid #000;height:100%"></div>
</div>
<div class="col">
<br> <br>
<input type="text" id="messageContent" class="form-control" style="width: 200%"
placeholder="Message here">
<button class="btn btn-outline-primary m-1" id="sendMessage"><i <button class="btn btn-outline-primary m-1" id="sendMessage"><i
class="bi bi-send"></i></button> class="bi bi-send"></i></button>
<button class="btn btn-outline-primary m-1" id="ctrlRemoveMessage"> <button class="btn btn-outline-primary m-1" id="ctrlRemoveMessage">
@@ -225,7 +189,50 @@
</div> </div>
</div> </div>
</div> </div>
<br><br><br>
<h3>Timer</h3>
<div class="container">
<div class="row">
<presets class="d-inline-flex justify-content-center">
<button class="btn btn-outline-secondary m-1 pres" value="300000">00:05:00</button>
<button class="btn btn-outline-secondary m-1 pres" value="600000">00:10:00</button>
<button class="btn btn-outline-secondary m-1 pres" value="900000">00:15:00</button>
<button class="btn btn-outline-secondary m-1 pres" value="1200000">00:20:00</button>
<button class="btn btn-outline-secondary m-1 pres" value="1500000">00:25:00</button>
<button class="btn btn-outline-secondary m-1 pres" value="1800000">00:30:00</button>
<button class="btn btn-outline-secondary m-1 pres" value="2100000">00:35:00</button>
<button class="btn btn-outline-secondary m-1 pres" value="2400000">00:40:00</button>
<button class="btn btn-outline-secondary m-1 pres" value="2700000">00:45:00</button>
</presets>
<div class="row" style="width: 100%;">
<div class="d-inline-flex justify-content-center p-2 col">
<input type="text" class="form-control m-1" id="customValue">
<button class="btn btn-outline-primary m-1 mt-0 goTimer"><i class="bi bi-check2-circle"></i></button>
<script>
$("#customValue").durationPicker({
showSeconds: true,
showDays: false,
onChanged: function(val, t1, t2) {
currentTime = val * 1000
}
})
</script>
</div>
</div>
</div>
</div>
</page> </page>
<page id="settings" class="pageC hidden flex-fill overflow-auto"> <page id="settings" class="pageC hidden flex-fill overflow-auto">
<h1>Settings</h1> <h1>Settings</h1>
<label for="showTime">Show clock on Timer:</label> <label for="showTime">Show clock on Timer:</label>
@@ -295,12 +302,12 @@
<page id="debug" class="pageC hidden flex-fill overflow-auto"> <page id="debug" class="pageC hidden flex-fill overflow-auto">
<h1>Debug page</h1> <h1>Debug page</h1>
<div class="alert alert-warning" role="alert"> <div class="alert alert-danger" role="alert">
<h4 class="alert-heading">Attention</h4> <h4 class="alert-heading">Attention</h4>
<p>This is a debug page which should only be used by professionals. Changing any options below might <p>This is a debug page which should only be used by professionals. Changing any options below might
impact operation.</p> impact operation.</p>
<hr> <hr>
<p class="mb-0">Proceed with caution.</p> <p class="mb-0"><b>Proceed with caution.</b></p>
</div> </div>
<label for="debugMode">Enable time variance display:</label> <label for="debugMode">Enable time variance display:</label>
<input type="checkbox" name="debugMode" id="debugModeEnable" value="true"><br><br> <input type="checkbox" name="debugMode" id="debugModeEnable" value="true"><br><br>
@@ -309,6 +316,13 @@
<br> <br>
<hr> <hr>
<br> <br>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
aria-expanded="false" aria-label="Toggle navigation">
<i class="bi bi-list"></i>
</button>
<h3>Host information</h3> <h3>Host information</h3>
<code id="systemInfo" class="overflow-auto"> <code id="systemInfo" class="overflow-auto">
@@ -388,7 +402,7 @@
<h1>About</h1> <h1>About</h1>
Version: <b id="nodeSwVers"></b><br> Version: <b id="nodeSwVers"></b><br>
NodeJS Version: <b id="nodejsVers"></b><br> NodeJS Version: <b id="nodejsVers"></b><br>
</page> </page>
</pages> </pages>
</main> </main>