Some more changes to the color picker
This commit is contained in:
parent
6076c05cfb
commit
69fd0a3b0d
33
helpers.js
Normal file
33
helpers.js
Normal file
@ -0,0 +1,33 @@
|
||||
/**
|
||||
* Converts a string into a boolean
|
||||
* @param {String} stringBoolean
|
||||
* @returns Boolean if valid or -1 otherwise
|
||||
*/
|
||||
function convertStringBooleanToBoolean(stringBoolean) {
|
||||
if (stringBoolean === 'true') {
|
||||
return true;
|
||||
} else if(stringBoolean === 'false') {
|
||||
return false;
|
||||
} else {
|
||||
return(-1)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Wraps convertStringBooleanToBoolean to be used with express. Will respond with an error if the boolean is invalid. Else dataObj will be set to the converted boolean value.
|
||||
* @param {String} stringBoolean An input string given by the user
|
||||
* @param {*} res Expresses response object
|
||||
* @param {*} dataObj The data to manipulate
|
||||
*/
|
||||
|
||||
function wrapBooleanConverter(stringBoolean, res) {
|
||||
const temp = convertStringBooleanToBoolean(stringBoolean);
|
||||
if(temp === -1) {
|
||||
res.json({ status: "error", message: "Invalid boolean value" });
|
||||
} else {
|
||||
return(temp);
|
||||
}
|
||||
}
|
||||
|
||||
// export { convertStringBooleanToBoolean, wrapBooleanConverter };
|
||||
module.exports = { convertStringBooleanToBoolean, wrapBooleanConverter };
|
||||
33
index.js
33
index.js
@ -1,6 +1,7 @@
|
||||
const express = require("express");
|
||||
const fs = require("fs");
|
||||
const bodyParser = require("body-parser");
|
||||
const helper = require("./helpers.js");
|
||||
|
||||
console.log("Preparing server...");
|
||||
const app = express();
|
||||
@ -83,11 +84,15 @@ app.get("/api/v1/set/mode", function (req, res) {
|
||||
});
|
||||
|
||||
app.get("/api/v1/set/layout/showMillis", function (req, res) {
|
||||
currentState.showMilliSeconds = (req.query.show === 'true');
|
||||
const resy = helper.wrapBooleanConverter(req.query.show, res)
|
||||
if (resy) {
|
||||
currentState.showMilliSeconds = resy;
|
||||
if (req.query.persist === 'true') {
|
||||
dataToBeWritten.showMilliSeconds = currentState.showMilliSeconds
|
||||
}
|
||||
res.json({ status: "ok" });
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
app.get("/api/v1/set/timerGoal", function (req, res) {
|
||||
@ -122,11 +127,15 @@ app.get("/api/v1/ctrl/timer/restart", function (req, res) {
|
||||
});
|
||||
|
||||
app.get("/api/v1/set/layout/showTime", function (req, res) {
|
||||
currentState.showTimeOnCountdown = (req.query.show === 'true');
|
||||
const resy = helper.wrapBooleanConverter(req.query.show, res)
|
||||
if (resy) {
|
||||
currentState.showTimeOnCountdown = resy;
|
||||
if (req.query.persist === 'true') {
|
||||
dataToBeWritten.showTimeOnCountdown = currentState.showTimeOnCountdown
|
||||
}
|
||||
res.json({ status: "ok" });
|
||||
}
|
||||
res.json({ status: "ok" });
|
||||
});
|
||||
|
||||
app.get("/api/v1/set/progressbar/show", function (req, res) {
|
||||
@ -192,8 +201,28 @@ app.get("/api/v1/ctrl/message/hide", function (req, res) {
|
||||
|
||||
app.get("/api/v1/storage/commit", function (req, res) {
|
||||
const tempString = JSON.stringify(dataToBeWritten);
|
||||
try {
|
||||
fs.writeFileSync("data-persistence.json", tempString);
|
||||
res.json({ status: "ok" });
|
||||
} catch (error) {
|
||||
res.json({ status: "error", reason: error });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
app.get("/api/v1/storage/delete", function (req, res) {
|
||||
if (req.query.delete === "true") {
|
||||
if (fs.existsSync("data-persistence.json")) {
|
||||
fs.unlinkSync("data-persistence.json");
|
||||
res.json({ status: "ok" });
|
||||
} else {
|
||||
res.json({ status: "error", reason: "No persistence data was found" });
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
} res.json({ status: "error", reason: "Missing delete argument" });
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -343,11 +343,31 @@
|
||||
<label for="progBarShow">Show progressbar:</label>
|
||||
<input type="checkbox" name="progBarShow" id="progBarShow"><br>
|
||||
<br>
|
||||
<placeholder>Colors</placeholder><br>
|
||||
<placeholder>Make this writeable, currently read only</placeholder>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="table" class="table-editable">
|
||||
<span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i
|
||||
class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>
|
||||
<table class="table table-bordered table-responsive-md table-striped text-center" id="colors1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">Time</th>
|
||||
<th class="text-center">Color</th>
|
||||
<th class="text-center">Remove</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label for="textColors">Enable Text Colors:</label>
|
||||
<input type="checkbox" name="textColors" id="textColors"><br>
|
||||
<br>
|
||||
<placeholder>Colors</placeholder><br>
|
||||
|
||||
|
||||
<button type="button" class="btn btn-outline-success" id="applyLayout">Apply settings</button>
|
||||
|
||||
@ -380,72 +400,6 @@
|
||||
<input id="demo-input" class="colorPicky" type="button" value="rgb(255, 128, 0)" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="table" class="table-editable">
|
||||
<span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i
|
||||
class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>
|
||||
<table class="table table-bordered table-responsive-md table-striped text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">Time</th>
|
||||
<th class="text-center">Color</th>
|
||||
<th class="text-center">Remove</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<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"
|
||||
class="btn btn-danger btn-rounded btn-sm my-0">
|
||||
Remove
|
||||
</button></span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- This is our clonable table line -->
|
||||
<tr>
|
||||
<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">
|
||||
Remove
|
||||
</button></span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- This is our clonable table line -->
|
||||
<tr>
|
||||
<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">
|
||||
Remove
|
||||
</button></span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- This is our clonable table line -->
|
||||
<tr class="hide">
|
||||
<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"
|
||||
class="btn btn-danger btn-rounded btn-sm my-0">
|
||||
Remove
|
||||
</button></span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</page>
|
||||
<page id="about" class="pageC hidden flex-fill">
|
||||
<h1>About</h1>
|
||||
@ -460,7 +414,7 @@
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
$('.colorPicky').colorpicker();
|
||||
|
||||
$('#demo-input').on('colorpickerChange', function (event) {
|
||||
$('#demo-input').css('background-color', event.color.toString());
|
||||
});
|
||||
@ -498,6 +452,15 @@
|
||||
// Restore settings
|
||||
saveOption("/api/v1/data", function (event, xmlHttp) {
|
||||
|
||||
const tableEntry = ' <tr><td class="pt-3-half numVal" contenteditable="true">#VALUE#</td>\
|
||||
<td class="pt-3-half" contenteditable="false" style="background-color: #bg-COLOR#;"><input id="demo-input1" class="colorPicky" type="button" value="#COLOR#" /></td>\
|
||||
<td>\
|
||||
<span class="table-remove"><button type="button"\
|
||||
class="btn btn-danger btn-rounded btn-sm my-0">\
|
||||
Remove\
|
||||
</button></span>\
|
||||
</td></tr>'
|
||||
|
||||
const jsonResult = JSON.parse(xmlHttp.response)
|
||||
document.getElementById("responeSnippet").innerHTML = JSON.stringify(jsonResult)
|
||||
// Restore mode radio
|
||||
@ -508,7 +471,15 @@
|
||||
$("#showMillis")[0].checked = jsonResult.showMilliSeconds;
|
||||
$("#progBarShow")[0].checked = jsonResult.showProgressbar;
|
||||
$("#textColors")[0].checked = jsonResult.enableColoredText;
|
||||
for (item in jsonResult.colorSegments) {
|
||||
let temp = tableEntry.replace("#VALUE#", item);
|
||||
temp = temp.replace("#COLOR#", jsonResult.colorSegments[item]);
|
||||
temp = temp.replace("#bg-COLOR#", jsonResult.colorSegments[item]);
|
||||
document.getElementById("colors1").innerHTML += temp
|
||||
console.log(jsonResult.colorSegments[item])
|
||||
}
|
||||
console.debug(jsonResult, currentModeInt)
|
||||
$('.colorPicky').colorpicker();
|
||||
})
|
||||
|
||||
// Presets
|
||||
|
||||
Loading…
Reference in New Issue
Block a user