From 200d341a01cd2151668f1c49533141fff94b91aa Mon Sep 17 00:00:00 2001
From: develcookingtest <modding@placeq.com>
Date: Wed, 20 Mar 2024 17:22:47 +0000
Subject: [PATCH] Dateien nach "/" hochladen

---
 da.html    |  89 +++++++++++++++++++++++++++++
 du.html    | 141 ++++++++++++++++++++++++++++++++++++++++++++++
 ende.json  |  15 +++++
 exist.html | 114 ++++++++++++++++++++++++++++++++++++++
 index.html | 160 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 519 insertions(+)
 create mode 100644 da.html
 create mode 100644 du.html
 create mode 100644 ende.json
 create mode 100644 exist.html
 create mode 100644 index.html
diff --git a/da.html b/da.html
new file mode 100644
index 0000000..6179c55
--- /dev/null
+++ b/da.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Wecker in Übersicht</title>
+<style>
+    .json-element {
+        border: 1px solid #ccc;
+        margin-bottom: 10px;
+        padding: 10px;
+        border-radius: 0.75em;
+        
+    }
+    .weekday-btn-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .weekday-btn-container div {
+        margin-right: 10px;
+    }
+    h1{
+        text-align: center;
+
+    }
+</style>
+</head>
+<body>
+<h1>Wecker in Übersicht</h1>
+<div id="jsonContainer"></div>
+
+<script>
+    window.onload = function() {
+        fetch('/selectedTime')
+            .then(response => response.json())
+            .then(data => {
+                const jsonContainer = document.getElementById('jsonContainer');
+                jsonContainer.innerHTML = '';
+
+                data.forEach(item => {
+                    const jsonElement = document.createElement('div');
+                    jsonElement.classList.add('json-element');
+
+                    const name = document.createElement('p');
+                    name.textContent = `Name: ${item.NameValue.name}`;
+                    jsonElement.appendChild(name);
+
+                    const time = document.createElement('p');
+                    time.textContent = `Time: ${item.timeValue.time}`;
+                    jsonElement.appendChild(time);
+
+                    const daysValue = item.daysValue;
+
+                    const weekdays = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
+
+                    const weekdayContainer = document.createElement('div');
+                    weekdayContainer.classList.add('weekday-btn-container');
+
+                    weekdays.forEach(day => {
+                        const checkboxDiv = document.createElement('div');
+                        const checkbox = document.createElement('input');
+                        checkbox.type = 'checkbox';
+                        checkbox.id = `${day.toLowerCase()}Checkbox`;
+                        checkbox.checked = daysValue[day];
+
+                        // Preventing checkbox clicks
+                        checkbox.addEventListener('click', function(event) {
+                            event.preventDefault();
+                        });
+
+                        const label = document.createElement('label');
+                        label.textContent = day;
+                        label.htmlFor = `${day.toLowerCase()}Checkbox`;
+
+                        checkboxDiv.appendChild(checkbox);
+                        checkboxDiv.appendChild(label);
+                        weekdayContainer.appendChild(checkboxDiv);
+                    });
+
+                    jsonElement.appendChild(weekdayContainer);
+                    jsonContainer.appendChild(jsonElement);
+                });
+            })
+            .catch(error => console.error('Error fetching data:', error));
+    }
+</script>
+
+</body>
+</html>
diff --git a/du.html b/du.html
new file mode 100644
index 0000000..6587117
--- /dev/null
+++ b/du.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Wecker in Übersicht</title>
+<style>
+    .json-element {
+        border: 1px solid #ccc;
+        margin-bottom: 10px;
+        padding: 10px;
+    }
+    .weekday-btn-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .weekday-btn-container div {
+        margin-right: 10px;
+    }
+    .custom-checkbox {
+        position: relative;
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 5px;
+    }
+    .custom-checkbox input {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+    }
+    .checkmark {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 24px;
+        width: 24px;
+        background-color: #eee;
+        border-radius: 50%;
+        z-index: -1;
+    }
+    .custom-checkbox input:checked ~ .checkmark {
+        background-color: #54f17b;
+    }
+    .checkmark:after {
+        content: "";
+        position: absolute;
+        display: none;
+    }
+    .custom-checkbox input:checked ~ .checkmark:after {
+        display: none;
+    }
+    .custom-checkbox .checkmark:after {
+        content: "";
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: white;
+    }
+    h1{
+        text-align: center;
+
+    }
+</style>
+</head>
+<body>
+    <h1>Wecker in Übersicht</h1>
+<div id="jsonContainer"></div>
+
+<script>
+    window.onload = function() {
+        fetch('/selectedTime')
+            .then(response => response.json())
+            .then(data => {
+                const jsonContainer = document.getElementById('jsonContainer');
+                jsonContainer.innerHTML = '';
+
+                data.forEach(item => {
+                    const jsonElement = document.createElement('div');
+                    jsonElement.classList.add('json-element');
+
+                    const name = document.createElement('p');
+                    name.textContent = `Name: ${item.NameValue.name}`;
+                    jsonElement.appendChild(name);
+
+                    const time = document.createElement('p');
+                    time.textContent = `Time: ${item.timeValue.time}`;
+                    jsonElement.appendChild(time);
+
+                    const daysValue = item.daysValue;
+
+                    const weekdays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
+
+                    const weekdayContainer = document.createElement('div');
+                    weekdayContainer.classList.add('weekday-btn-container');
+
+                    weekdays.forEach((day, index) => {
+                        const checkboxDiv = document.createElement('div');
+                        const checkbox = document.createElement('label');
+                        checkbox.classList.add('custom-checkbox');
+
+                        const input = document.createElement('input');
+                        input.type = 'checkbox';
+                        input.id = `${day.toLowerCase()}Checkbox`;
+                        input.checked = daysValue[Object.keys(daysValue)[index]];
+
+                           // Preventing checkbox clicks
+                            checkbox.addEventListener('click', function(event) {
+                            event.preventDefault();
+                        });
+                        const checkmark = document.createElement('span');
+                        checkmark.classList.add('checkmark');
+
+                        const labelText = document.createElement('span');
+                        labelText.textContent = day;
+                        checkbox.appendChild(input);
+                        checkbox.appendChild(checkmark);
+                        checkbox.appendChild(labelText);
+
+                        checkboxDiv.appendChild(checkbox);
+                        weekdayContainer.appendChild(checkboxDiv);
+                    });
+
+                    jsonElement.appendChild(weekdayContainer);
+                    jsonContainer.appendChild(jsonElement);
+                });
+            })
+            .catch(error => console.error('Error fetching data:', error));
+    }
+</script>
+
+</body>
+</html>
diff --git a/ende.json b/ende.json
new file mode 100644
index 0000000..8e11bf6
--- /dev/null
+++ b/ende.json
@@ -0,0 +1,15 @@
+{
+    "WeckerName": "Wecker 1",
+    "Uhrzeit": "16:34",
+    "Tage":
+    {
+    "Montag":false,
+    "Dienstag":true,
+    "Mittwoch":false,
+    "Donnerstag":false,
+    "Freitag":false,
+    "Samstag":false,
+    "Sonntag":false
+    } 
+  }
+ 
\ No newline at end of file
diff --git a/exist.html b/exist.html
new file mode 100644
index 0000000..5cb80da
--- /dev/null
+++ b/exist.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Wochentags-Buttons</title>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        text-align: center;
+    }
+    .weekday-btn-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .weekday-btn {
+        margin: 10px;
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+        background-color: #4CAF50;
+        color: white;
+        border: none;
+        border-radius: 5px;
+    }
+    .weekday-checkbox {
+       /* margin-right: 1px; /* Angepasst */
+        margin-bottom: 1em;
+    }
+    .weekday-text {
+        display: inline-block;
+        margin-right: 1em;
+    }
+    .timecl{
+        padding: 1em;
+    }
+</style>
+</head>
+<body>
+  
+<h2>Wochentags-Buttons</h2>
+
+<form >
+    <label for="weckerName0">Name des Weckers:</label><br>
+    <input type="text" id="weckerName"><br>
+</form>
+
+<div class="timecl">
+    <input type="text" id="timePick" value="08:06">
+</div>
+
+<div class="weekday-btn-container">
+    <div>
+        <input type="checkbox" id="montagCheckbox" class="weekday-checkbox">
+        <label for="montagCheckbox" class="weekday-text">Montag</label>
+    </div>
+    <div>
+        <input type="checkbox" id="dienstagCheckbox" class="weekday-checkbox">
+        <label for="dienstagCheckbox" class="weekday-text">Dienstag</label>
+    </div>
+    <div>
+        <input type="checkbox" id="mittwochCheckbox" class="weekday-checkbox">
+        <label for="mittwochCheckbox" class="weekday-text">Mittwoch</label>
+    </div>
+    <div>
+        <input type="checkbox" id="donnerstagCheckbox" class="weekday-checkbox">
+        <label for="donnerstagCheckbox" class="weekday-text">Donnerstag</label>
+    </div>
+    <div>
+        <input type="checkbox" id="freitagCheckbox" class="weekday-checkbox">
+        <label for="freitagCheckbox" class="weekday-text">Freitag</label>
+    </div>
+    <div>
+        <input type="checkbox" id="samstagCheckbox" class="weekday-checkbox">
+        <label for="samstagCheckbox" class="weekday-text">Samstag</label>
+    </div>
+    <div>
+        <input type="checkbox" id="sonntagCheckbox" class="weekday-checkbox">
+        <label for="sonntagCheckbox" class="weekday-text">Sonntag</label>
+    </div>
+</div>
+
+
+
+<script>
+
+
+        // Laden der JSON-Daten vom Server
+        window.onload = function() {
+        fetch('/selectedTime')
+            .then(response => response.json())
+            .then(data => {
+                // Name des Weckers
+                document.getElementById('weckerName').value = data.NameValue.name;
+
+                // Uhrzeit
+                document.getElementById('timePick').value = data.timeValue.time;
+
+                // Tage
+                document.getElementById('montagCheckbox').checked = data.daysValue.Montag;
+                document.getElementById('dienstagCheckbox').checked = data.daysValue.Dienstag;
+                document.getElementById('mittwochCheckbox').checked = data.daysValue.Mittwoch;
+                document.getElementById('donnerstagCheckbox').checked = data.daysValue.Donnerstag;
+                document.getElementById('freitagCheckbox').checked = data.daysValue.Freitag;
+                document.getElementById('samstagCheckbox').checked = data.daysValue.Samstag;
+                document.getElementById('sonntagCheckbox').checked = data.daysValue.Sonntag;
+                // Hier musst du die restlichen Tage ebenfalls setzen
+            })
+            .catch(error => console.error('Fehler beim Laden der Daten:', error));
+    }
+</script>
+</body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..025dea0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Wochentags-Buttons</title>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        text-align: center;
+    }
+    .weekday-btn-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .weekday-btn {
+        margin: 10px;
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+        background-color: #4CAF50;
+        color: white;
+        border: none;
+        border-radius: 5px;
+    }
+    .weekday-checkbox {
+       /* margin-right: 1px; /* Angepasst */
+        margin-bottom: 1em;
+    }
+    .weekday-text {
+        display: inline-block;
+        margin-right: 1em;
+    }
+    .timecl{
+        padding: 1em;
+    }
+</style>
+</head>
+<body>
+  
+<h2>Wochentags-Buttons</h2>
+
+<form >
+    <label for="weckerName0">Name des Weckers:</label><br>
+    <input type="text" id="weckerName"><br>
+  </form>
+
+<div class="timecl">
+<input type="text" id="timePick" value="08:06">
+</div>
+
+<div class="weekday-btn-container">
+    <div>
+        <input type="checkbox" id="montagCheckbox" class="weekday-checkbox">
+        <label for="montagCheckbox" class="weekday-text">Montag</label>
+    </div>
+    <div>
+        <input type="checkbox" id="dienstagCheckbox" class="weekday-checkbox">
+        <label for="dienstagCheckbox" class="weekday-text">Dienstag</label>
+    </div>
+    <div>
+        <input type="checkbox" id="mittwochCheckbox" class="weekday-checkbox">
+        <label for="mittwochCheckbox" class="weekday-text">Mittwoch</label>
+    </div>
+    <div>
+        <input type="checkbox" id="donnerstagCheckbox" class="weekday-checkbox">
+        <label for="donnerstagCheckbox" class="weekday-text">Donnerstag</label>
+    </div>
+    <div>
+        <input type="checkbox" id="freitagCheckbox" class="weekday-checkbox">
+        <label for="freitagCheckbox" class="weekday-text">Freitag</label>
+    </div>
+    <div>
+        <input type="checkbox" id="samstagCheckbox" class="weekday-checkbox">
+        <label for="samstagCheckbox" class="weekday-text">Samstag</label>
+    </div>
+    <div>
+        <input type="checkbox" id="sonntagCheckbox" class="weekday-checkbox">
+        <label for="sonntagCheckbox" class="weekday-text">Sonntag</label>
+    </div>
+</div>
+
+<button onclick="saveData()">Speichern</button>
+
+<script>
+
+    function saveData(){
+        saveName();
+        saveTime();
+        savedays();
+    }
+  
+    function saveName() {
+    const nameElement = document.getElementById('weckerName');
+    if (nameElement) {
+        const nameValue = nameElement.value;
+        if (nameValue) {
+            console.log('ID "weckerName" existiert und Variable NameValue ist befüllt:', nameValue);
+
+            // AJAX-Anfrage an den Server senden
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', '/saveName');
+            xhr.setRequestHeader('Content-Type', 'application/json');
+            xhr.send(JSON.stringify({ name: nameValue })); // Hier senden wir den Wert als "name"
+        } else {
+            console.log('ID "weckerName" existiert, aber Variable NameValue ist leer.');
+        }
+    } else {
+        console.log('ID "weckerName" existiert nicht.');
+    }
+}
+
+function saveTime() {
+    const timeElement = document.getElementById('timePick');
+    if (timeElement) {
+        const timeValue = timeElement.value;
+        if (timeValue) {
+            console.log('ID "timePick" existiert und Variable timeValue ist befüllt:', timeValue);
+
+            // AJAX-Anfrage an den Server senden
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', '/saveTime');
+            xhr.setRequestHeader('Content-Type', 'application/json');
+            xhr.send(JSON.stringify({ time: timeValue })); // Hier senden wir den Wert als "time"
+        } else {
+            console.log('ID "timePick" existiert, aber Variable timeValue ist leer.');
+        }
+    } else {
+        console.log('ID "timePick" existiert nicht.');
+    }
+}
+
+
+    function savedays() {
+        const daysValue = {
+            Montag: document.getElementById('montagCheckbox').checked,
+            Dienstag: document.getElementById('dienstagCheckbox').checked,
+            Mittwoch: document.getElementById('mittwochCheckbox').checked,
+            Donnerstag: document.getElementById('donnerstagCheckbox').checked,
+            Freitag: document.getElementById('freitagCheckbox').checked,
+            Samstag: document.getElementById('samstagCheckbox').checked,
+            Sonntag: document.getElementById('sonntagCheckbox').checked
+        };
+
+        // AJAX-Anfrage an den Server senden
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', '/savedays');
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.send(JSON.stringify(daysValue));
+    }
+</script>
+
+<script src="./time-pick.js"></script>
+<script>
+    var timepicker = new TimePick('#timePick');
+    var timepickerz = new TimePick('.timePicker');
+</script> 
+</body>
+</html>
