Initial commit
This commit is contained in:
root
@@ -0,0 +1,75 @@
|
||||
body{
|
||||
display: grid;
|
||||
grid-row: span;
|
||||
grid:
|
||||
"header header header"
|
||||
"main main main"
|
||||
"footer footer footer";
|
||||
grid-template-columns:250px auto 20%;
|
||||
column-gap: 10px;
|
||||
|
||||
font-family: 'Gowun Dodum', sans-serif;
|
||||
background-color: #EAEDF8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header{grid-area: header;}
|
||||
nav{grid-area: nav;}
|
||||
main{grid-area: main;}
|
||||
aside{grid-area: aside;}
|
||||
footer{grid-area: footer;}
|
||||
|
||||
footer{
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
background-color: #343434;
|
||||
color: white;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header{
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 80px;
|
||||
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
padding-left: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
main{
|
||||
margin-top: 75px;
|
||||
margin-left: 280px;
|
||||
margin-bottom: 110px;
|
||||
margin-right: 280px;
|
||||
}
|
||||
|
||||
aside{
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding-top: 125px;
|
||||
padding-left: 20px;
|
||||
padding-right: 40px;
|
||||
height: 80vh;
|
||||
border-left: 4px;
|
||||
border-color: white;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
@media screen and (max-width:768px){
|
||||
body{
|
||||
grid:
|
||||
"header"
|
||||
"nav"
|
||||
"main"
|
||||
"aside"
|
||||
"footer";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
nav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 230px;
|
||||
background-color: #746CF5;
|
||||
margin-right: 32px;
|
||||
margin-top: 55px;
|
||||
padding-top: 50px;
|
||||
padding-left: 20px;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav img {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M13.05 42Q11.85 42 10.95 41.1Q10.05 40.2 10.05 39V10.5H8V7.5H17.4V6H30.6V7.5H40V10.5H37.95V39Q37.95 40.2 37.05 41.1Q36.15 42 34.95 42ZM34.95 10.5H13.05V39Q13.05 39 13.05 39Q13.05 39 13.05 39H34.95Q34.95 39 34.95 39Q34.95 39 34.95 39ZM18.35 34.7H21.35V14.75H18.35ZM26.65 34.7H29.65V14.75H26.65ZM13.05 10.5V39Q13.05 39 13.05 39Q13.05 39 13.05 39Q13.05 39 13.05 39Q13.05 39 13.05 39Z"/></svg>
|
||||
|
After Width: | Height: | Size: 461 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M28.3 8H39.8V11H33.25L34 11.7Q37 14.5 38.5 17.7Q40 20.9 40 23.85Q40 29.15 36.9 33.4Q33.8 37.65 28.7 39.25V36.1Q32.5 34.65 34.75 31.275Q37 27.9 37 23.85Q37 21.45 35.825 18.975Q34.65 16.5 32.75 14.6L31.3 13.3V19.5H28.3ZM19.85 40H8.35V37H14.85L14.1 36.4Q10.9 33.85 9.45 30.85Q8 27.85 8 24.15Q8 18.85 11.125 14.625Q14.25 10.4 19.35 8.8V11.9Q15.6 13.35 13.3 16.725Q11 20.1 11 24.15Q11 27.3 12.175 29.625Q13.35 31.95 15.35 33.65L16.85 34.7V28.5H19.85Z"/></svg>
|
||||
|
After Width: | Height: | Size: 526 B |
@@ -0,0 +1,2 @@
|
||||
[InternetShortcut]
|
||||
URL=https://fonts.google.com/icons?selected=Material+Icons:delete&icon.query=computer
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
|
||||
|
After Width: | Height: | Size: 315 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><rect fill="none" height="24" width="24"/></g><g><g/><g><path d="M21,5c-1.11-0.35-2.33-0.5-3.5-0.5c-1.95,0-4.05,0.4-5.5,1.5c-1.45-1.1-3.55-1.5-5.5-1.5S2.45,4.9,1,6v14.65 c0,0.25,0.25,0.5,0.5,0.5c0.1,0,0.15-0.05,0.25-0.05C3.1,20.45,5.05,20,6.5,20c1.95,0,4.05,0.4,5.5,1.5c1.35-0.85,3.8-1.5,5.5-1.5 c1.65,0,3.35,0.3,4.75,1.05c0.1,0.05,0.15,0.05,0.25,0.05c0.25,0,0.5-0.25,0.5-0.5V6C22.4,5.55,21.75,5.25,21,5z M21,18.5 c-1.1-0.35-2.3-0.5-3.5-0.5c-1.7,0-4.15,0.65-5.5,1.5V8c1.35-0.85,3.8-1.5,5.5-1.5c1.2,0,2.4,0.15,3.5,0.5V18.5z"/><g><path d="M17.5,10.5c0.88,0,1.73,0.09,2.5,0.26V9.24C19.21,9.09,18.36,9,17.5,9c-1.7,0-3.24,0.29-4.5,0.83v1.66 C14.13,10.85,15.7,10.5,17.5,10.5z"/><path d="M13,12.49v1.66c1.13-0.64,2.7-0.99,4.5-0.99c0.88,0,1.73,0.09,2.5,0.26V11.9c-0.79-0.15-1.64-0.24-2.5-0.24 C15.8,11.66,14.26,11.96,13,12.49z"/><path d="M17.5,14.33c-1.7,0-3.24,0.29-4.5,0.83v1.66c1.13-0.64,2.7-0.99,4.5-0.99c0.88,0,1.73,0.09,2.5,0.26v-1.52 C19.21,14.41,18.36,14.33,17.5,14.33z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M21.58,16.09l-1.09-7.66C20.21,6.46,18.52,5,16.53,5H7.47C5.48,5,3.79,6.46,3.51,8.43l-1.09,7.66 C2.2,17.63,3.39,19,4.94,19h0c0.68,0,1.32-0.27,1.8-0.75L9,16h6l2.25,2.25c0.48,0.48,1.13,0.75,1.8,0.75h0 C20.61,19,21.8,17.63,21.58,16.09z M11,11H9v2H8v-2H6v-1h2V8h1v2h2V11z M15,10c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1 C16,9.55,15.55,10,15,10z M17,13c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C18,12.55,17.55,13,17,13z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 642 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
|
||||
|
After Width: | Height: | Size: 192 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><rect fill="none" height="24" width="24"/></g><g><g/><g><path d="M21,5l-9-4L3,5v6c0,5.55,3.84,10.74,9,12c2.3-0.56,4.33-1.9,5.88-3.71l-3.12-3.12c-1.94,1.29-4.58,1.07-6.29-0.64 c-1.95-1.95-1.95-5.12,0-7.07c1.95-1.95,5.12-1.95,7.07,0c1.71,1.71,1.92,4.35,0.64,6.29l2.9,2.9C20.29,15.69,21,13.38,21,11V5z"/><circle cx="12" cy="12" r="3"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 485 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
|
||||
|
After Width: | Height: | Size: 379 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"/></svg>
|
||||
|
After Width: | Height: | Size: 295 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><path d="M0,0h24v24H0V0z" fill="none"/><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"/></svg>
|
||||
|
After Width: | Height: | Size: 383 B |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,19 @@
|
||||
import RoverApi from "./roverApi.js";
|
||||
|
||||
const api = new RoverApi();
|
||||
const body = document.getElementById("mainDivBody");
|
||||
|
||||
createBody();
|
||||
setInterval(checkNewData, 3 * 1000);
|
||||
|
||||
function checkNewData() {
|
||||
api.getRouteInfos(data => {
|
||||
body.innerText = JSON.stringify(data.infoObj, null, 2);
|
||||
});
|
||||
}
|
||||
|
||||
function createBody() {
|
||||
api.getRouteInfos(data => {
|
||||
body.innerHTML = JSON.stringify(data.infoObj, null, 2);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
const address = "http://rover.kleiax.de/api/";
|
||||
|
||||
class IrrigationApi {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
getRoute(id, callback) {
|
||||
httpGet(id, callback);
|
||||
}
|
||||
|
||||
getRouteInfos(callback) {
|
||||
httpGet('infos', callback);
|
||||
}
|
||||
|
||||
getRouteAmount(callback) {
|
||||
httpGet('amount', callback);
|
||||
}
|
||||
|
||||
deleteRoute(id, callback) {
|
||||
httpDelete(id, callback);
|
||||
}
|
||||
}
|
||||
|
||||
function httpGet(apiCall, callback) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', address + apiCall);
|
||||
request.onload = function () {
|
||||
const data = JSON.parse(request.response);
|
||||
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
callback(data);
|
||||
} else {
|
||||
console.log('Error irrigationApi.js httpGet()', data);
|
||||
}
|
||||
};
|
||||
request.send();
|
||||
}
|
||||
|
||||
|
||||
function httpDelete(apiCall, callback) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('DELETE', address + apiCall);
|
||||
request.onload = function () {
|
||||
const data = JSON.parse(request.response);
|
||||
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
callback(data);
|
||||
} else {
|
||||
console.log('Error irrigationApi.js httpDelete()', data);
|
||||
}
|
||||
};
|
||||
request.send();
|
||||
}
|
||||
|
||||
export default IrrigationApi;
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import RoverApi from "./roverApi.js";
|
||||
|
||||
const api = new RoverApi();
|
||||
const aside = document.getElementsByTagName("aside")[0];
|
||||
const amount = document.createElement("h2");
|
||||
|
||||
|
||||
createStatus();
|
||||
setInterval(checkNewStatus, 3 * 1000);
|
||||
|
||||
function checkNewStatus() {
|
||||
api.getRouteAmount(data => {
|
||||
amount.innerHTML = data.amount;
|
||||
});
|
||||
}
|
||||
|
||||
function createStatus() {
|
||||
api.getRouteAmount((data) => {
|
||||
const title = document.createElement("h2");
|
||||
title.innerHTML = "Anzahl <br> aller <br> Routen";
|
||||
amount.innerHTML = data.amount;
|
||||
aside.append(title);
|
||||
aside.append(amount);
|
||||
});
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user