index.html aktualisiert

revert index.html aktualisiert

README.md

@@ -1,6 +1,6 @@
 # genderwatchprotocol
 
-für Maurus Pfalzgraf
+für Maurus Pfalzgraf / Die Feministen
 
 Trello Link
 https://trello.com/b/RvSEhupx/some

SQL/Queries.sql

@@ -0,0 +1,3 @@
+CREATE TABLE `u517357132_genderwatchpro`.`topics` ( `id` VARCHAR(8) CHARACTER SET ascii COLLATE ascii_bin NOT NULL , `lastSave` INT NULL DEFAULT CURRENT_TIMESTAMP , `fullJSON` JSON NOT NULL , `timeWatchM` INT NOT NULL , `timeWatchW` INT NOT NULL , `timeWatchD` INT NOT NULL , `countWatchM` INT NOT NULL , `countWatchW` INT NOT NULL , `countWatchD` INT NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;
+
+INSERT INTO `topics` (`id`, `lastSave`, `fullJSON`, `timeWatchM`,`timeWatchW`, `timeWatchD`, `countWatchM`, `countWatchW`, `countWatchD`) values ('test', 2014, '{}', 10, 10, 10, 10, 40, 10) ON DUPLICATE KEY UPDATE `id` = 'test'

css/custom.css

@@ -1,3 +1,82 @@
-.active {
+.activeWatch {
     background-color: lightgray;
+}
+
+h2 {
+    margin-left: 10px;
+    margin-top: 25px !important;
+}
+
+.table-bordered {
+    width: 100%;
+    table-layout: fixed;
+    text-align: center;
+    /*border: 1px solid #0e0017 !important;*/
+
+}
+
+td {
+    overflow-wrap: break-word;
+}
+
+button {
+    /*background-color: lightgray;*/
+    /*border: none;*/
+    /*color: white;*/
+    padding: 1% 5%;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    /*font-size: 16px;*/
+    border-radius: 20px;
+}
+
+button, .form-group{
+    margin: 5px !important;
+}
+
+input {
+    text-align: center;
+}
+
+.stopButton, .resetButton {
+    width: 98% !important;
+}
+
+.form-group {
+    width: 98%;
+}
+
+.tableHeader {
+    min-width: 100px;
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+
+            background-color: #FAF2E9 !important;
+
+}
+
+.wrapper {
+    min-height: 100%;
+
+    /* Equal to height of footer */
+    /* But also accounting for potential margin-bottom of last child */
+    margin-bottom: -200px;
+
+
+}
+footer,
+.push {
+    height: 200px;
+}
+
+.footer {
+    vertical-align: top;
+    text-align: left;
 }

dataCollector/dataCollector.php

@@ -0,0 +1,75 @@
+<?php
+require $_SERVER['DOCUMENT_ROOT'] . '/spreadSheetReader/read_write_xlsx.php';
+require $_SERVER['DOCUMENT_ROOT'] . '/databaseConnection/databaseConnection.php';
+$fileName = $_SERVER['DOCUMENT_ROOT'] . '/data/data.xlsx';
+function objectToArray($object, $fullJSON) {
+    return [$object -> id,
+        $object -> lastSave,
+        $fullJSON,
+        $object -> timeWatchM,
+        $object -> timeWatchW,
+        $object -> timeWatchD,
+        $object -> countWatchM,
+        $object -> countWatchW,
+        $object -> countWatchD];
+}
+
+
+$conn = getDatabaseConnection();
+// Check connection
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+} else {
+    echo "connection sucessful<br>";
+}
+
+function saveToDatabase($contentArray, $conn) {
+    echo "sending Query to Database<br>";
+    $sql1 = "SELECT * FROM `topics` WHERE id='".$contentArray[0]."'";
+    $result1 = $conn->query($sql1);
+    echo "Select Query sent<br>";
+    if($result1->num_rows === 0) {
+        $sql = "INSERT INTO `topics` (`id`, `lastSave`, `fullJSON`, `timeWatchM`,`timeWatchW`, `timeWatchD`, `countWatchM`, `countWatchW`, `countWatchD`) values ('".$contentArray[0]."', ".$contentArray[1]." , '".$contentArray[2]."', ".$contentArray[3].", ".$contentArray[4].", ".$contentArray[5].", ".$contentArray[6].", ".$contentArray[7].", ".$contentArray[8].") ON DUPLICATE KEY UPDATE `id` = '".$contentArray[0]."'";
+        $result = $conn->query($sql);
+        echo "Insert Query sent<br> Result: " . $result;
+    } else {
+        $sql = "UPDATE `topics` SET `id`='".$contentArray[0]."',`lastSave`='".$contentArray[1]."',`fullJSON`='".$contentArray[2]."',`timeWatchM`='".$contentArray[3]."',`timeWatchW`='".$contentArray[4]."',`timeWatchD`='".$contentArray[5]."',`countWatchM`='".$contentArray[6]."',`countWatchW`='".$contentArray[7]."',`countWatchD`='".$contentArray[8]."' WHERE `id` = '".$contentArray[0]."'";
+        $result = $conn->query($sql);
+        echo "Update Query sent<br> Result: " . $result;
+    }
+    return;
+}
+
+function getFromDatabase($conn) {
+    $sql = "SELECT `id`, `firstSave`, `lastSave`, `fullJSON`, `timeWatchM`,`timeWatchW`, `timeWatchD`, `countWatchM`, `countWatchW`, `countWatchD` FROM `topics`";
+    $result = $conn->query($sql);
+    $dataArray = Array();
+    while($row = $result->fetch_assoc()) {
+        array_push($dataArray, [$row["id"],$row["firstSave"],$row["lastSave"],$row["fullJSON"],$row["timeWatchM"],$row["timeWatchW"],$row["timeWatchD"],$row["countWatchM"],$row["countWatchW"],$row["countWatchD"]]);
+    }
+    return $dataArray;
+}
+
+$entityBody = '{"lastSave": 0, "timeWatchM": 0, "timeWatchW": 0, "timeWatchD": 0, "countWatchM": 0, "countWatchW": 0, "countWatchD": 0, "id":"test","watches":[{"actions":[]},{"actions":[]},{"actions":[]}]}';
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $entityBody = file_get_contents('php://input');
+    $entityBodyObject = json_decode($entityBody);
+
+    echo "POST Request received.<br>";
+
+    if(property_exists($entityBodyObject, "id")) {
+        if(! ($entityBodyObject->countWatchM + $entityBodyObject->countWatchW + $entityBodyObject->countWatchD === 0)){
+            saveToDatabase(objectToArray($entityBodyObject, $entityBody), $conn);
+            echo "<br>Data saved.<br>";
+        }
+    }
+} elseif($_SERVER['REQUEST_METHOD'] === 'GET') {
+    download_xlsxFile(getFromDatabase($conn));
+} else {
+    echo "invalid Request.<br> Type: ".$_SERVER['REQUEST_METHOD'];
+}
+
+
+
+$conn->close();
+

databaseConnection/databaseConnection.php

@@ -0,0 +1,62 @@
+<?php
+
+// Lädt die .env Datei einen Ordner über dieser Datei
+function loadEnv(): void
+{
+    $envPath = dirname(__DIR__, 1) . '/.env';
+
+    if (!file_exists($envPath)) {
+        throw new RuntimeException('.env file not found at: ' . $envPath);
+    }
+
+    $lines = file($envPath, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+
+    foreach ($lines as $line) {
+        $line = trim($line);
+
+        if ($line === '' || str_starts_with($line, '#')) {
+            continue;
+        }
+
+        [$key, $value] = array_pad(explode('=', $line, 2), 2, '');
+
+        $key = trim($key);
+        $value = trim($value);
+
+        $_ENV[$key] = $value;
+        putenv("$key=$value");
+    }
+}
+
+// .env einmal laden
+loadEnv();
+
+function env(string $key, $default = null)
+{
+    return $_ENV[$key] ?? getenv($key) ?? $default;
+}
+
+function getDatabaseConnection(): mysqli
+{
+    $databaseAddress  = env('DB_HOST', '127.0.0.1');
+    $databasePort     = env('DB_PORT', '3306');
+    $databaseName     = env('DB_NAME');
+    $databaseUser     = env('DB_USER');
+    $databasePassword = env('DB_PASS');
+
+    $mysqli = new mysqli(
+        $databaseAddress,
+        $databaseUser,
+        $databasePassword,
+        $databaseName,
+        (int) $databasePort
+    );
+
+    if ($mysqli->connect_error) {
+        throw new RuntimeException(
+            'Database connection failed: ' . $mysqli->connect_error
+        );
+    }
+
+    return $mysqli;
+}

index.html

@@ -1,140 +1,223 @@
-<html>
-    <head>
-        <meta charset="UTF-8">
-        <link rel="stylesheet" href="css/custom.css">
-        <link rel="stylesheet" href="css/bootstrap.css">
-
-    </head>
-    <body>
-        <section>
-            <div class="container">
-                <h1>Genderwatch-protocol</h1>
-                <h2 style="margin-left: 10px;">Aktuelles Thema</h2>
-                <table class="table-bordered">
-                    <tr>
-                        <td colspan="2">
-                            <input class="form-control" type="text" id="topicInput" placeholder="Thema hier eingeben">
-                        </td>
-                        <td>
-                            <button class="" onclick="closeTopic()">
-                                Thema abschliessen
-                            </button>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>
-                            M
-                        </th>
-                        <th>
-                            W
-                        </th>
-                        <th>
-                            D
-                        </th>
-                    </tr>
-                    
-                    <tr>
-                        <td id="time-0">
-                            0
-                        </td>
-                        <td id="time-1">
-                            0
-                        </td>
-                        <td id="time-2">
-                            0
-                        </td>
-                    </tr>
-                    <tr>
-                        <td id="count-0">
-                            0
-                        </td>
-                        <td id="count-1">
-                            0
-                        </td>
-                        <td id="count-2">
-                            0
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <button class="" onclick="start(0)">Beginnt zu Reden</button>
-                        </td>
-                        <td>
-                            <button class="" onclick="start(1)">Beginnt zu Reden</button>
-                        </td>
-                        <td>
-                            <button class="" onclick="start(2)">Beginnt zu Reden</button>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td colspan="3">
-                            <button class="" style="width: 98%;" onclick="stop()">Hört auf zu Reden, -> Stille</button>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td colspan="3">
-                            <button class="" style="width: 98%;" onclick="resetButton()">Reset</button>
-                        </td>
-                    </tr>
-                </table>
-            
-
-            </div>
-
-            <div class="container">
-        
-        
-                <H2>Abgeschlossene Themen</H2>
-                <button class="" onclick="buttonDeleteAllClosedTopics()">alle Löschen</button>
-                <table class="table-bordered">
-                    <thead>
-                        <tr>
-                            <th style="min-width: 100px;">
-                                Thema
-                            </th>
-                            <th style="min-width: 100px;">
-                                M
-                            </th>
-                            <th style="min-width: 100px;">
-                                W
-                            </th>
-                            <th style="min-width: 100px;">
-                                D
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody id="closedTopicsTable">
-        
-                    </tbody>
-                    
-                
-                
-                </table>
-
-            </div>
-        </section>
-
-
-        <script src="js/functions.js"></script>
-        <script>
-            closedTopics = JSON.parse(localStorage.getItem("closedTopics"))
-            if(!closedTopics) {
-                closedTopics = []
-            }
-
-            watches = JSON.parse(localStorage.getItem("watches"))
-            if(!watches){
-                reset()
-            }
-
-            document.getElementById("topicInput").value = localStorage.getItem("actualTopic")
-            document.getElementById("topicInput").addEventListener('keyup', saveActualTopicToLocalStorage);
-            refreshClosedTopics()
-            setInterval(() => {
-                refreshWatch(0)
-                refreshWatch(1)
-                refreshWatch(2)
-            }, 100);
-        </script>
-    </body>
-</html>
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="css/custom.css?v=1.2">
+        <link rel="stylesheet" href="css/bootstrap.css">
+        <title>Gender Watch Protocol</title>
+
+    </head>
+    <body>
+<!--    <nav class="navbar navbar-expand-lg navbar-light bg-light">-->
+<!--        <a class="navbar-brand" href="index.html">Genderwatch-protocol&nbsp;</a>-->
+<!--        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>-->
+<!--        <div class="navbar-collapse collapse show" id="navbarSupportedContent">-->
+<!--            <ul class="navbar-nav mr-auto">-->
+
+
+<!--                <li class="nav-item active"> <a class="nav-link" href="index.html">Home</a> </li>-->
+
+<!--                <li class="nav-item"> <a class="nav-link" href="beschreibung.php">Über uns</a> </li>-->
+
+
+<!--            </ul>-->
+<!--            <form class="form-inline my-2 my-lg-0">-->
+<!--            </form>-->
+<!--        </div>-->
+<!--    </nav>-->
+        <div class="wrapper">
+            <section>
+                <div class="container">
+                    <h1>Gender Watch Protocol</h1>
+
+
+                    Mit diesem Tool kannst du die Redezeit in einer Diskussionsrunde oder Sitzung nach Geschlecht stoppen. So kannst du sicherstellen, dass Männer nicht am meisten Sprechzeit beanspruchen.
+
+                    <h2>Aktuelles Thema</h2>
+                    <table class="table-bordered">
+                        <tr>
+                            <td colspan="2">
+                                <div class="form-group">
+                                    <input class="form-control" type="text" id="topicInput" placeholder="Thema hier eingeben">
+                                </div>
+                            </td>
+                            <td>
+                                <button class="" onclick="closeTopic()">
+                                    Thema abschliessen
+                                </button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th>
+                                Mann
+                            </th>
+                            <th>
+                                Frau
+                            </th>
+                            <th>
+                                Divers
+                            </th>
+                        </tr>
+
+                        <tr>
+                            <td id="time-0">
+                                0
+                            </td>
+                            <td id="time-1">
+                                0
+                            </td>
+                            <td id="time-2">
+                                0
+                            </td>
+                        </tr>
+                        <tr>
+                            <td id="count-0">
+                                0
+                            </td>
+                            <td id="count-1">
+                                0
+                            </td>
+                            <td id="count-2">
+                                0
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <button class="" onclick="start(0)">Beginnt zu reden</button>
+                            </td>
+                            <td>
+                                <button class="" onclick="start(1)">Beginnt zu reden</button>
+                            </td>
+                            <td>
+                                <button class="" onclick="start(2)">Beginnt zu reden</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="3">
+                                <button class="stopButton" onclick="stop()">Hört auf zu reden, -> Stille</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="3">
+                                <button class="resetButton" onclick="resetButton()">Reset</button>
+                            </td>
+                        </tr>
+                    </table>
+
+
+                </div>
+
+                <div class="container">
+
+
+                    <H2>Abgeschlossene Themen</H2>
+                    <button class="" onclick="buttonDeleteAllClosedTopics()">alle löschen</button>
+
+<a href="dataCollector/dataCollector.php">Alle Daten herunterladen (anonymisiert)</a>
+
+
+
+                    <table class="table-bordered">
+                        <thead>
+                        <tr>
+                            <th class="tableHeader">
+                                Thema
+                            </th>
+                            <th class="tableHeader">
+                                Mann
+                            </th>
+                            <th class="tableHeader">
+                                Frau
+                            </th>
+                            <th class="tableHeader">
+                                Divers
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody id="closedTopicsTable">
+
+                        </tbody>
+
+
+
+                    </table>
+
+                </div>
+            </section>
+            <div class="push"></div>
+
+            </div>
+
+
+        </div>
+
+
+
+
+        <footer class="text-center">
+
+            <div class="container footer">
+                <div class="row">
+                    <table>
+                        <tr>
+                            <td class="footer">
+                                <div class="col-12">
+                                    <p><span><b>Impressum</b></span><br>
+                                        Die Feministen<br>
+                                        3000 Bern<br>
+                                        <a href="https://feministen.ch/" target="_blank" rel="noopener">www.feministen.ch</a><br>
+                                    </p>
+                                </div>
+                            </td>
+                            <td class="footer">
+                                <div class="col-12">
+                                    <p><span><b>Erstellt durch</b></span><br>
+                                        Silias KLG<br>
+                                        Toggenburgstrasse 31<br>
+                                        8245 Feuerthalen<br>
+                                        <a href="https://www.silias.ch" target="_blank">www.silias.ch</a><br>
+                                        <a href="mailto:info@silias.ch">info@silias.ch</a><br>
+                                        <a href="https://gitea.silias.ch/Silias-Public/genderwatchprotocol">Projekt Repository</a>
+                                    </p>
+                                </div>
+                            </td>
+                        </tr>
+                    </table>
+
+                </div>
+            </div>
+        </footer>
+
+        <script src="js/functions.js"></script>
+        <script>
+            try {
+                closedTopics = JSON.parse(localStorage.getItem("closedTopics"))
+            } catch (e) {
+                closedTopics = []
+            }
+            if(!closedTopics) {
+                closedTopics = []
+            }
+
+            try{
+                actualTopic = JSON.parse(localStorage.getItem("actualTopic"))
+            } catch (e) {
+                initializeNewTopic()
+            }
+            if(!actualTopic) {
+                initializeNewTopic()
+            }
+            document.getElementById("topicInput").value = actualTopic.name
+
+            document.getElementById("topicInput").addEventListener('keyup', saveActualTopicName);
+            refreshClosedTopics()
+            setInterval(() => {
+                refreshWatch(0)
+                refreshWatch(1)
+                refreshWatch(2)
+            }, 100);
+        </script>
+    </body>
+</html>

js/functions.js

@@ -1,10 +1,16 @@
+function initializeNewTopic() {
+    actualTopic = {"name": "", "id": randomId()}
+    reset()
+    document.getElementById("topicInput").value = actualTopic.name
+}
+
 function reset() {
     actualTopic.watches = [{"actions": []}, {"actions": []}, {"actions": []}]
-    saveWatchesToLocalStorage()
+    saveActualTopic()
 }
 
 function resetButton() {
-    if(confirm("Soll die Zähler zurückgesetzt werden?")){
+    if(confirm("Sollen die Zähler zurückgesetzt werden?")){
         reset()
     }
 }
@@ -12,7 +18,7 @@ function resetButton() {
 function buttonDeleteAllClosedTopics() {
     if(confirm("Sollen alle abgeschlossenen Themen gelöscht werden?")) {
         closedTopics = []
-        saveClosedTopicsToLocalStorage()
+        saveClosedTopics()
         refreshClosedTopics()
     }
 }
@@ -24,8 +30,9 @@ function buttonDeleteClosedTopic(topicIndex) {
 }
 
 function closeTopic() {
+    stop()
     let defaultname = "Thema"
-    let name = document.getElementById("topicInput").value
+    let name = actualTopic.name
     let nameLessCounter = 1
     while(!name){
         let foundName = false
@@ -40,53 +47,50 @@ function closeTopic() {
             name = defaultname + nameLessCounter
         }
     }
-
-    closedTopics.push({"name": name, "watches": watches})
-    stop()
-    reset()
-    document.getElementById("topicInput").value = ""
-    saveActualTopicToLocalStorage()
-    saveClosedTopicsToLocalStorage()
+    actualTopic.name = name
+    closedTopics.push(actualTopic)
+    saveClosedTopics()
     refreshClosedTopics()
+    initializeNewTopic()
 }
 
 function deleteTopic(topicIndex) {
     closedTopics = closedTopics.slice(0, topicIndex).concat(closedTopics.slice(topicIndex+1))
-    saveClosedTopicsToLocalStorage()
+    saveClosedTopics()
     refreshClosedTopics()
 }
 
 function reopenTopic(topicIndex) {
-    if(watches[0]["actions"]["length"] > 0 || watches[1]["actions"]["length"] > 0 ||watches[2]["actions"]["length"] > 0 || document.getElementById("topicInput").value != "") {
+    if(actualTopic.watches[0]["actions"]["length"] > 0 || actualTopic.watches[1]["actions"]["length"] > 0 ||actualTopic.watches[2]["actions"]["length"] > 0 || actualTopic.name !== "") {
         closeTopic()
     }
-    watches = closedTopics[topicIndex]["watches"]
-    document.getElementById("topicInput").value = closedTopics[topicIndex]["name"]
+    actualTopic = closedTopics[topicIndex]
+    document.getElementById("topicInput").value = actualTopic.name
     deleteTopic(topicIndex)
-    saveWatchesToLocalStorage()
-    saveActualTopicToLocalStorage()
+    saveClosedTopics()
+    saveActualTopic()
 }
 
 function start(watchIndex) {
     stop()
-    watches[watchIndex].actions.push({"type": "start", "time": new Date().getTime()})
-    saveWatchesToLocalStorage()
+    actualTopic.watches[watchIndex].actions.push({"type": "start", "time": new Date().getTime()})
+    saveActualTopic()
 }
 
 function stop() {
-    watches.forEach(watch => {
+    actualTopic.watches.forEach(watch => {
         if(watch["actions"]["length"] > 0) {
-            if(watch["actions"]["length"] % 2 == 1){
+            if(watch["actions"]["length"] % 2 === 1){
                 watch["actions"].push({"type": "stop", "time": new Date().getTime()})
             }
         }
     });
-    saveWatchesToLocalStorage()
+    saveActualTopic()
 }
 
 function calcPercForWatch(watchIndex, topic) {
     let sumAll = sumAllwatches(topic)
-    if(sumAll == 0) {
+    if(sumAll === 0) {
         return 0
     }
     return Math.round(sumForWatch(topic.watches[watchIndex]) / sumAllwatches(topic) * 100)
@@ -112,7 +116,7 @@ function countForWatch(watch) {
 
 function calcPercCountForWatch(watchindex, topic) {
     let sumAll = sumCountAllWatches(topic)
-    if(sumAll == 0) {
+    if(sumAll === 0) {
         return 0
     }
     return Math.round(countForWatch(topic.watches[watchindex]) / sumAll * 100)
@@ -132,14 +136,14 @@ function timeToISO(time){
 
 function refreshWatch(watchIndex) {
     let timeCell = document.getElementById("time-" + watchIndex)
-    timeCell.textContent = timeToISO(sumForWatch(watches[watchIndex]))
-    if(watches[watchIndex]["actions"].length != 0 && watches[watchIndex]["actions"].slice(-1)[0]["type"] == "start"){
-        timeCell.classList.add("active")
+    timeCell.textContent = timeToISO(sumForWatch(actualTopic.watches[watchIndex]))
+    if(actualTopic.watches[watchIndex]["actions"].length !== 0 && actualTopic.watches[watchIndex]["actions"].slice(-1)[0]["type"] === "start"){
+        timeCell.classList.add("activeWatch")
     } else {
-        timeCell.classList.remove("active")
+        timeCell.classList.remove("activeWatch")
     }
     let countCell = document.getElementById("count-" + watchIndex)
-    countCell.textContent = countForWatch(watches[watchIndex]) + " Wortmeldungen"
+    countCell.textContent = countForWatch(actualTopic.watches[watchIndex]) + " Wortmeldungen"
 }
 
 function refreshClosedTopics() {
@@ -178,15 +182,36 @@ function refreshClosedTopics() {
     }
 }
 
-function saveWatchesToLocalStorage() {
-    localStorage.setItem("watches", JSON.stringify(watches))
+function saveActualTopicName() {
+    actualTopic.name = document.getElementById("topicInput").value
+    saveActualTopic()
 }
 
-function saveActualTopicToLocalStorage() {
-    localStorage.setItem("actualTopic", document.getElementById("topicInput").value)
+
+
+function saveActualTopic() {
+    //save it to LocalStorage
+    localStorage.setItem("actualTopic", JSON.stringify(actualTopic))
+
+    //save it to Server
+    fetch(document.URL + "dataCollector/dataCollector.php", {
+        method: 'POST',
+        headers: { 'Content-type': 'application/json' },
+        body: JSON.stringify({
+            "lastSave": new Date().getTime(),
+            "timeWatchM": sumForWatch(actualTopic.watches[0]),
+            "timeWatchW": sumForWatch(actualTopic.watches[1]),
+            "timeWatchD": sumForWatch(actualTopic.watches[2]),
+            "countWatchM": countForWatch(actualTopic.watches[0]),
+            "countWatchW": countForWatch(actualTopic.watches[1]),
+            "countWatchD": countForWatch(actualTopic.watches[2]),
+            "id": actualTopic.id,
+            "watches": actualTopic.watches
+        })
+    });
 }
 
-function saveClosedTopicsToLocalStorage() {
+function saveClosedTopics() {
     localStorage.setItem("closedTopics", JSON.stringify(closedTopics))
 }
 
@@ -202,4 +227,10 @@ function elt (type, attrs, ...children) {
         else node.appendChild(document.createTextNode(child))
     }
     return node
+}
+
+// random.ts
+function randomId() {
+    const uint32 = window.crypto.getRandomValues(new Uint32Array(1))[0];
+    return uint32.toString(16);
 }

spreadSheetReader/read_write_xlsx.php

@@ -0,0 +1,29 @@
+<?php
+require $_SERVER['DOCUMENT_ROOT'] . '/spreadSheetReader/SimpleXLSX.php';
+require $_SERVER['DOCUMENT_ROOT'] . '/spreadSheetReader/SimpleXLSXGen.php';
+
+function read_xls_file($filename){
+    $fileContent = [];
+    if ($xlsx = SimpleXLSX::parse($filename)) {
+        $fileContent = ($xlsx->rows());
+    } else {
+        echo SimpleXLSX::parseError();
+    }
+    return $fileContent;
+}
+
+
+
+function write_xlsxFile($filename, $data) {
+    $xlsx = SimpleXLSXGen::fromArray($data);
+    $xlsx->saveAs($filename);
+}
+
+function download_xlsxFile($data) {
+    $xlsxArray = read_xls_file($_SERVER['DOCUMENT_ROOT'] ."/data/data.xlsx");
+    foreach ($data as $row) {
+        array_push($xlsxArray, $row);
+    }
+    $xlsx = SimpleXLSXGen::fromArray($xlsxArray);
+    $xlsx->downloadAs("data.xlsx");
+}