diff --git a/.htaccess b/.htaccess
new file mode 100644
index 0000000..e69de29
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..dbc20af
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,14 @@
+.container {
+ display: flex;
+}
+
+.room {
+ padding: .5em 1em;
+ background-color: lightgray;
+ margin: .2em;
+}
+
+.room > h2 {
+ margin: 0;
+ border-bottom: 1px gray solid;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..54c8278
--- /dev/null
+++ b/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+ Startseite
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..e69de29
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..052333d
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,205 @@
+let example = [
+ {
+ number: "123",
+ devices: [
+ {
+ name: "Beamer LG 123456",
+ type: "Beamer",
+ count: 1,
+ },
+ {
+ name: "Overheadprojektor",
+ type: "Overhead",
+ count: 3,
+ },
+ ],
+ },
+ {
+ number: "124",
+ devices: [
+ {
+ name: "Beamer SM 143456",
+ type: "Beamer",
+ count: 1,
+ },
+ {
+ name: "Overheadprojektor",
+ type: "Overhead",
+ count: 1,
+ },
+ ],
+ },
+ {
+ number: "238",
+ devices: [
+ {
+ name: "ZIEH001",
+ type: "PC",
+ count: 1,
+ },
+ {
+ name: "ZIEH002",
+ type: "PC",
+ count: 1,
+ },
+ {
+ name: "ZIEH003",
+ type: "PC",
+ count: 1,
+ },
+ {
+ name: "ZIEH004",
+ type: "PC",
+ count: 1,
+ },
+ {
+ name: "ZIEH005",
+ type: "PC",
+ count: 1,
+ },
+ {
+ name: "ZIEH006",
+ type: "PC",
+ count: 1,
+ },
+ {
+ name: "ZIEH007",
+ type: "PC",
+ count: 1,
+ },
+ ],
+ },
+ {
+ number: "254",
+ devices: [
+ {
+ name: "Smartboard",
+ type: "Smartboard",
+ count: 1,
+ },
+ ],
+ },
+];
+/*###########################################*/
+document.addEventListener("DOMContentLoaded", init);
+
+function init() {
+ console.log("loaded");
+ registerEventlistener();
+ let daten = fetchData({ extend: "all" });
+ generateTable(daten);
+}
+
+function postData(dataobject) {
+
+}
+
+function fetchData(config) {
+ let result = [];
+ switch (config.extend) {
+ case "all":
+ result = example;
+ break;
+ case "room":
+ console.log('To be implemented');
+ break;
+ default:
+ console.log('wrong extend');
+ console.log(config.extend);
+ break;
+ }
+ return result;
+}
+
+function editRoom(room) {
+ alert('edit Room ' + room);
+}
+
+function addRoom() {
+ alert('add Room');
+}
+
+function addDevice(room) {
+ alert('add Device ' + room);
+}
+
+function registerEventlistener() {
+ document.querySelector('.new').addEventListener('click', (event) => {
+ console.log(event.target.value);
+ addRoom();
+ })
+}
+
+function generateTable(daten) {
+ let container = document.querySelector(".container");
+ daten.forEach(room => {
+ let roomHeading = document.createElement('h2');
+ let roomNumber = document.createElement('span');
+ let roomNumberText = document.createTextNode(room.number);
+ let roomText = document.createTextNode("Raum ");
+ let box = document.createElement("div");
+ let list = document.createElement('ul');
+ room.devices.forEach((device) => {
+ let listItem = document.createElement('li');
+ let text = document.createTextNode(device.name)
+ listItem.append(text);
+ list.append(listItem);
+ });
+ let button = document.createElement('button');
+ roomHeading.append(roomText);
+ roomNumber.append(roomNumberText);
+ roomHeading.append(roomNumber);
+ roomHeading.addEventListener('click', (event) => {
+ console.log(event.target.querySelector('span').textContent);
+ editRoom(event.target.querySelector("span").textContent);
+ })
+ button.textContent = "+";
+ button.value = room.number;
+ button.addEventListener('click', (event) => {
+ console.log(event.target.value);
+ addDevice(event.target.value);
+ })
+ box.setAttribute('class', 'room')
+ box.append(roomHeading);
+ box.append(list);
+ box.append(button);
+ container.append(box);
+ });
+}
+
+/*function generateTable(daten) {
+ let count = 0;
+ daten.forEach((element) => {
+ let edit = document.createElement('td');
+ let button = document.createElement('button');
+ let buttontext = document.createTextNode("Bearbeiten");
+ let zelle = document.createElement("td");
+ let zeile = document.createElement("tr");
+ let text = document.createTextNode(element.room);
+ zelle.append(text);
+ button.append(buttontext);
+ button.setAttribute("value", element.room);
+ button.addEventListener('click', (event) => {
+ let value = event.target.getAttribute('value');
+ console.log(value);
+ })
+ edit.append(button);
+ zeile.append(edit);
+ zeile.append(zelle);
+ let index = 0;
+ element.devices.forEach((device) => {
+ index++;
+ let text = document.createTextNode(device.name);
+ let zelle = document.createElement("td");
+ zelle.append(text);
+ zeile.append(zelle);
+ if (index > count) {
+ count = index;
+ }
+ });
+ console.log(count);
+
+ document.querySelector("table").append(zeile);
+ document.querySelector(".devices").setAttribute("colspan", count);
+ });
+}*/