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

Added better color picker

Browse Source
This commit is contained in:
Sören Oesterwind 2022-03-02 22:09:27 +01:00
parent d6ced44ff5
commit 160ef0dcda
7 changed files with 74 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.MD
View File

@ -6,7 +6,6 @@
- [X] time on countdown page
- [X] one-way messaging
- [P] Better UI
- [ ] Wait for all resources to load
- [ ] Error popups
- [X] Progress bar
- [P] Endpoint docs

9
index.js
View File

@ -155,8 +155,9 @@ app.get("/api/v1/ctrl/message/hide", function (req, res) {
res.json({ status: "ok" });
});
console.log("Starting server...");
app.listen(3005);
const port = 8005
app.listen(port);
console.info("Server running on port 3005");
console.info("Visit localhost:3005/timer for the timer page");
console.info("Visit localhost:3005 for the admin page");
console.info("Server running on port " + port );
console.info("Visit localhost:" + port + "/timer for the timer page");
console.info("Visit localhost:" + port + " for the admin page");

36
package-lock.json generated
View File

@ -11,6 +11,7 @@
"dependencies": {
"body-parser": "^1.19.2",
"bootstrap": "^5.1.3",
"bootstrap-colorpicker": "^3.4.0",
"bootstrap-icons": "^1.8.1",
"countdown": "^2.6.0",
"darkreader": "^4.9.44",
@ -80,6 +81,16 @@
"@popperjs/core": "^2.10.2"
}
},
"node_modules/bootstrap-colorpicker": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/bootstrap-colorpicker/-/bootstrap-colorpicker-3.4.0.tgz",
"integrity": "sha512-7vA0hvLrat3ptobEKlT9+6amzBUJcDAoh6hJRQY/AD+5dVZYXXf1ivRfrTwmuwiVLJo9rZwM8YB4lYzp6agzqg==",
"dependencies": {
"bootstrap": ">=4.0",
"jquery": ">=2.2",
"popper.js": ">=1.10"
}
},
"node_modules/bootstrap-icons": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
@ -415,6 +426,16 @@
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
"integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
},
"node_modules/popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
"deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/proxy-addr": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@ -628,6 +649,16 @@
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"requires": {}
},
"bootstrap-colorpicker": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/bootstrap-colorpicker/-/bootstrap-colorpicker-3.4.0.tgz",
"integrity": "sha512-7vA0hvLrat3ptobEKlT9+6amzBUJcDAoh6hJRQY/AD+5dVZYXXf1ivRfrTwmuwiVLJo9rZwM8YB4lYzp6agzqg==",
"requires": {
"bootstrap": ">=4.0",
"jquery": ">=2.2",
"popper.js": ">=1.10"
}
},
"bootstrap-icons": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
@ -881,6 +912,11 @@
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
"integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
},
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
},
"proxy-addr": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",

1
package.json
View File

@ -11,6 +11,7 @@
"dependencies": {
"body-parser": "^1.19.2",
"bootstrap": "^5.1.3",
"bootstrap-colorpicker": "^3.4.0",
"bootstrap-icons": "^1.8.1",
"countdown": "^2.6.0",
"darkreader": "^4.9.44",

1
static/colorpicker/css Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/bootstrap-colorpicker/dist/css

1
static/colorpicker/js Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/bootstrap-colorpicker/dist/js

40
templates/newAdminPanel.html
View File

@ -21,6 +21,8 @@
<script type="text/javascript" src="/js/cookie.js"></script>
<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/mainStyle.css" rel="stylesheet">
<link href="colorpicker/css/bootstrap-colorpicker.css" rel="stylesheet">
<script src="colorpicker/js/bootstrap-colorpicker.js"></script>
</head>
<body>
@ -230,7 +232,8 @@
<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>
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>
@ -372,7 +375,10 @@
</code>
<div class="demo">
test
<input id="demo-input" class="colorPicky" type="button" value="rgb(255, 128, 0)" />
</div>
<div class="card">
<div class="card-body">
@ -389,8 +395,8 @@
</thead>
<tbody>
<tr>
<td class="pt-3-half" contenteditable="true">Aurelia Vega</td>
<td class="pt-3-half" contenteditable="false"><input type="color"></td>
<td class="pt-3-half numVal" contenteditable="true">2000</td>
<td class="pt-3-half" contenteditable="false"><input id="demo-input0" class="colorPicky" type="button" value="rgb(255, 128, 0)" /></td>
<td>
<span class="table-remove"><button type="button"
@ -401,8 +407,8 @@
</tr>
<!-- This is our clonable table line -->
<tr>
<td class="pt-3-half" contenteditable="true">5000</td>
<td class="pt-3-half" contenteditable="false"><input type="color"></td>
<td class="pt-3-half numVal" contenteditable="true">5000</td>
<td class="pt-3-half" contenteditable="false"><input id="demo-input1" class="colorPicky" type="button" value="rgb(255, 128, 0)" /></td>
<td>
<span class="table-remove"><button type="button"
class="btn btn-danger btn-rounded btn-sm my-0">
@ -412,8 +418,8 @@
</tr>
<!-- This is our clonable table line -->
<tr>
<td class="pt-3-half" contenteditable="true">Guadalupe House</td>
<td class="pt-3-half" contenteditable="false"><input type="color"></td>
<td class="pt-3-half numVal" contenteditable="true">10000</td>
<td class="pt-3-half" contenteditable="false"><input id="demo-input2" class="colorPicky" type="button" value="rgb(255, 128, 0)" /></td>
<td>
<span class="table-remove"><button type="button"
class="btn btn-danger btn-rounded btn-sm my-0">
@ -423,8 +429,8 @@
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td class="pt-3-half" contenteditable="true">Elisa Gallagher</td>
<td class="pt-3-half" contenteditable="false"><input type="color"></td>
<td class="pt-3-half numVal" contenteditable="true">20000</td>
<td class="pt-3-half" contenteditable="false"><input id="demo-input3" class="colorPicky" type="button" value="rgb(255, 128, 0)" /></td>
<td>
<span class="table-remove"><button type="button"
@ -453,6 +459,14 @@
$(document).ready(function () {
$('.colorPicky').colorpicker();
$('#demo-input').on('colorpickerChange', function (event) {
$('#demo-input').css('background-color', event.color.toString());
});
$(".numVal").bind("DOMSubtreeModified", alert);
const modes = ["timer", "clock", "black", "test"]
let selectPresetTime = 0;
@ -501,9 +515,9 @@
$(".pres").click(function (event) {
currentTime = parseInt(event.currentTarget.value)
const times = msToTime(currentTime)
$("#timerHoursV")[0].innerHTML = times[3];
$("#timerMinuteV")[0].innerHTML = times[2];
$("#timerSecondsV")[0].innerHTML = times[1];
$("#timerHoursV")[0].innerHTML = times[3];
$("#timerMinuteV")[0].innerHTML = times[2];
$("#timerSecondsV")[0].innerHTML = times[1];
})