added license; color picker update

LICENSE.txt

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

index.js

@@ -39,7 +39,7 @@ currentState = {
   showMessage: false,
   messageAppearTime: 0,
   showProgressbar: true,
-  colorSegments: { 20000: "#FFAE00", 5000: "#ff0000", "START": "yellow" },
+  colorSegments: {  40000: "yellow", 20000: "#FFAE00", 5000: "#ff0000", "START": "green" },
   textColors: {},
   srvTime: 0,
   enableColoredText: true,
@@ -135,7 +135,6 @@ app.get("/api/v1/set/layout/showTime", function (req, res) {
     }
     res.json({ status: "ok" });
   }
-  res.json({ status: "ok" });
 });
 
 app.get("/api/v1/set/progressbar/show", function (req, res) {
@@ -148,13 +147,19 @@ app.get("/api/v1/set/progressbar/show", function (req, res) {
 
 app.get("/api/v1/set/progressbar/colors", function (req, res) {
   try {
-    currentState.colorSegments = JSON.parse(req.query.colors);
+    let data = req.query.colors
+    if(req.query.isBase64 === "true"){
+      data = atob(data)
+    }
+    console.debug(data)
+    currentState.colorSegments = JSON.parse(data);
     if (req.query.persist === 'true') {
       dataToBeWritten.colorSegments = currentState.colorSegments
     }
     res.json({ status: "ok" });
   } catch (error) {
     res.json({ status: "error", message: error });
+    console.error(error)
   }
 });
 

templates/newAdminPanel.html

@@ -343,27 +343,28 @@
                 <label for="progBarShow">Show progressbar:</label>
                 <input type="checkbox" name="progBarShow" id="progBarShow"><br>
                 <br>
-                <placeholder>Make this writeable, currently read only</placeholder>
+                <placeholder>Add a way to add more rows</placeholder>
-                <div class="card">
+
-                    <div class="card-body">
+                <div id="table" class="table-editable">
-                        <div id="table" class="table-editable">
+                    <span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i
-                            <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>
-                                        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">
-                            <table class="table table-bordered table-responsive-md table-striped text-center" id="colors1">
+                        <thead>
-                                <thead>
+                            <tr>
-                                    <tr>
+                                <th class="text-center">Time</th>
-                                        <th class="text-center">Time</th>
+                                <th class="text-center">Color</th>
-                                        <th class="text-center">Color</th>
+                                <th class="text-center">Remove</th>
-                                        <th class="text-center">Remove</th>
+                            </tr>
-                                    </tr>
+                        </thead>
-                                </thead>
 
 
-                                </tbody>
+                        </tbody>
-                            </table>
+                    </table>
-                        </div>
-                    </div>
                 </div>
+                <button type="button" class="btn btn-outline-success" id="addRow">Add row</button>
+                <br>
+
+
                 <label for="textColors">Enable Text Colors:</label>
                 <input type="checkbox" name="textColors" id="textColors"><br>
                 <br>
@@ -411,14 +412,20 @@
     </main>
     <script>
 
+        function convertColorSegments(elementId) {
+            const raw = document.getElementById(elementId);
+            const segmentData = {}
+            for (elm in raw.children) {
+                if (raw.children[elm].nodeName == "TBODY") {
+                    const child = raw.children[elm].firstChild.childNodes
+                    segmentData[child[0].innerText] = child[2].firstChild.value
+                }
+            }
+            console.info(segmentData)
+            return (segmentData)
+        }
 
         $(document).ready(function () {
-
-            
-            $('#demo-input').on('colorpickerChange', function (event) {
-                $('#demo-input').css('background-color', event.color.toString());
-            });
-
             $(".numVal").bind("DOMSubtreeModified", alert);
 
             const modes = ["timer", "clock", "black", "test"]
@@ -436,6 +443,22 @@
                 }
             }
 
+            $("#addRow").click(function(event){
+                $("#colors1").append(
+                    '<tr>' +
+                    '<td contenteditable="true" class="time"></td>' +
+                    '<td contenteditable="true" class="color"><input id="demo-input1" class="colorPicky" type="button" value="#COLOR#" /></td></td>' +
+                    '<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
+                    '</tr>'
+                );
+                $('.colorPicky').colorpicker();
+                $(".deleteRow1").click(function (event) {
+                    console.log(event.target)
+                    $(event.target).closest("tr").remove();
+                });
+            });
+            
+
             $("input[name='btnradio2']").click(function (event) {
                 console.debug()
                 const darkid = parseInt(event.currentTarget.id.replace("Mbtnradio", ""))
@@ -456,7 +479,7 @@
                     <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">\
+                                class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">\
                                 Remove\
                             </button></span>\
                     </td></tr>'
@@ -478,8 +501,20 @@
                     document.getElementById("colors1").innerHTML += temp
                     console.log(jsonResult.colorSegments[item])
                 }
+                let temp = tableEntry.replace("#VALUE#", "");
+                    temp = temp.replace("#COLOR#", "white");
+                    temp = temp.replace("#bg-COLOR#", "white");
+                document.getElementById("colors1").innerHTML += temp
+
                 console.debug(jsonResult, currentModeInt)
                 $('.colorPicky').colorpicker();
+                $('.colorPicky').on('colorpickerChange', function (event) {
+                    event.target.parentElement.style.backgroundColor = event.target.value
+                });
+                $(".deleteRow1").click(function (event) {
+                    console.log(event.target)
+                    $(event.target).closest("tr").remove();
+                });
             })
 
             // Presets
@@ -492,8 +527,6 @@
             })
 
 
-
-
             $(".goTimer").click(function (event) {
                 event.currentTarget.innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
                 setTimeout(function () {
@@ -501,8 +534,6 @@
                 }, 200);
 
                 saveOption("/api/v1/set/addMillisToTimer?time=" + currentTime, function (ev) {
-
-
                 })
             })
 
@@ -518,10 +549,16 @@
                 const progBarShowB = $("#progBarShow")[0].checked
                 const textColorsB = $("#textColors")[0].checked
 
+                const colors = convertColorSegments("colors1")
+
+                console.log(JSON.stringify(colors))
+
                 allPathes.push("/api/v1/set/layout/showTime?show=" + showTimeB)
                 allPathes.push("/api/v1/set/layout/showMillis?show=" + showMillisB)
                 allPathes.push("/api/v1/set/progressbar/show?show=" + progBarShowB)
                 allPathes.push("/api/v1/set/text/enableColoring?enable=" + textColorsB)
+                allPathes.push("/api/v1/set/progressbar/colors?isBase64=true&colors=" + btoa(JSON.stringify(colors)))
+
 
                 for (pI in allPathes) {
                     const path = allPathes[pI];
@@ -534,7 +571,6 @@
                 setTimeout(function () {
                     $("#applyLayout")[0].innerHTML = 'Apply settings'
                 }, 500)
-
             })