Structure and Index-site created

This commit is contained in:
eichehome 2022-01-13 22:19:38 +01:00
parent 2dcc9aa426
commit 4cd0b5b062
5 changed files with 238 additions and 0 deletions

0
.htaccess Normal file
View file

14
css/main.css Normal file
View file

@ -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;
}

19
index.html Normal file
View file

@ -0,0 +1,19 @@
<!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.0">
<link rel="stylesheet" href="css/main.css">
<title>Startseite</title>
</head>
<body>
<button class="new" value="neu">neu</button>
<div class="container">
</div>
<script src="js/main.js"></script>
</body>
</html>

0
index.php Normal file
View file

205
js/main.js Normal file
View file

@ -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);
});
}*/