Structure and Index-site created
This commit is contained in:
parent
2dcc9aa426
commit
4cd0b5b062
5 changed files with 238 additions and 0 deletions
0
.htaccess
Normal file
0
.htaccess
Normal file
14
css/main.css
Normal file
14
css/main.css
Normal 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
19
index.html
Normal 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
0
index.php
Normal file
205
js/main.js
Normal file
205
js/main.js
Normal 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);
|
||||||
|
});
|
||||||
|
}*/
|
Loading…
Reference in a new issue