07c290a453
- zoesch.de - blitzkiste.net - gruene-hassberge (norbert.zoesch.de) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
151 lines
4.2 KiB
HTML
151 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<meta http-equiv="refresh" content="30" />
|
|
<title>Status Ladestationen</title>
|
|
|
|
<!-- Custom -->
|
|
<style>
|
|
h1 {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 2em;
|
|
color: #000;
|
|
margin-top: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.table-content {overflow-x: auto;}
|
|
table, th, tr {
|
|
border: none;
|
|
border-collapse: collapse;
|
|
}
|
|
tr:nth-child(even){background-color: #f5f5f5;}
|
|
tr:nth-child(odd){background-color: #E7E7E7;}
|
|
th, td {
|
|
font-family: 'Roboto', sans-serif;
|
|
padding-left: 10px;
|
|
padding-right: 20px;
|
|
width: auto;
|
|
}
|
|
th {
|
|
background-color: #7B242E;
|
|
color: #fff;
|
|
font-size: 1.3em;
|
|
text-align: left;
|
|
line-height: 2em;
|
|
height: 2em;
|
|
}
|
|
td {
|
|
font-size: 1em;
|
|
line-height: 1.5em;
|
|
height: 1.5em;
|
|
}
|
|
.icon {
|
|
text-align: center;
|
|
width: 20px;
|
|
padding-right: 5px;
|
|
}
|
|
.fa-check {color: #72E500;}
|
|
.fa-bolt {color: #7B242E;}
|
|
.fa-exclamation-triangle {color: #7B242E;}
|
|
</style>
|
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
|
|
|
</head>
|
|
<body>
|
|
<div class="table-content">
|
|
<h1>Status Ladestationen</h1>
|
|
<table>
|
|
<tr>
|
|
<th>Ladestation/-box</th>
|
|
<th>Ladepunkt</th>
|
|
<th colspan="2">Status</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Marktplatz</td>
|
|
<td>Ladepunkt 1</td>
|
|
<td id="m1_icon" class="icon"></td>
|
|
<td id="m1"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Marktplatz</td>
|
|
<td>Ladepunkt 2</td>
|
|
<td id="m2_icon" class="icon"></td>
|
|
<td id="m2"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Freizeitzentrum Box 1</td>
|
|
<td>Ladepunkt 1</td>
|
|
<td id="fzz1_icon" class="icon"></td>
|
|
<td id="fzz1"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Freizeitzentrum Box 1</td>
|
|
<td>Ladepunkt 2</td>
|
|
<td id="fzz2_icon" class="icon"></td>
|
|
<td id="fzz2"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Freizeitzentrum Box 2</td>
|
|
<td>Ladepunkt 1</td>
|
|
<td id="fzz3_icon" class="icon"></td>
|
|
<td id="fzz3"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Freizeitzentrum Box 2</td>
|
|
<td>Ladepunkt 2</td>
|
|
<td id="fzz4_icon" class="icon"></td>
|
|
<td id="fzz4"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Test</td>
|
|
<td>Ladepunkt 1</td>
|
|
<td id="test_icon" class="icon"></td>
|
|
<td id="test"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
|
<script>
|
|
function getStatus(code, elemID) {
|
|
var request = new XMLHttpRequest();
|
|
request.open('GET', 'https://api.charge-it-mobility.com/RNs/Prod/EVSEs-%3EStatus', true);
|
|
request.onload = function () {
|
|
var data = JSON.parse(this.response);
|
|
var state = "";
|
|
var icon = "";
|
|
var status = data[code];
|
|
if (status) {
|
|
var timeKey = Object.keys(status)[0];
|
|
var value = status[timeKey];
|
|
if (value == "Available") {
|
|
state = "frei";
|
|
icon = '<i class="fa fa-check" aria-hidden="true"></i>';
|
|
} else {
|
|
state = "belegt";
|
|
icon = '<i class="fa fa-bolt" aria-hidden="true"></i>';
|
|
}
|
|
} else {
|
|
state = "Keine Info";
|
|
icon = '<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>';
|
|
}
|
|
document.getElementById(elemID + "_icon").innerHTML = icon;
|
|
document.getElementById(elemID).innerHTML = state;
|
|
};
|
|
request.send();
|
|
}
|
|
getStatus("+49*822*501913362*1", "m1")
|
|
getStatus("+49*822*501913362*2", "m2")
|
|
getStatus("DE*BDO*E564751504*1", "fzz1")
|
|
getStatus("DE*BDO*E564751504*2", "fzz2")
|
|
getStatus("DE*BDO*E442011757*1", "fzz3")
|
|
getStatus("DE*BDO*E442011757*2", "fzz4")
|
|
getStatus("+49*822*58681451*2", "test")
|
|
</script>
|
|
</body>
|
|
</html>
|