Initial commit
This commit is contained in:
@@ -0,0 +1,250 @@
|
||||
<style>
|
||||
.datepicker-native {
|
||||
position: relative;
|
||||
}
|
||||
.datepicker-native-input {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.datepicker-native-input::-webkit-calendar-picker-indicator {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Header-->
|
||||
<div class="app-content-header">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h3 class="mb-0">Solar</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Header-->
|
||||
<!--begin::App Content-->
|
||||
<div class="app-content">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<!-- Start col -->
|
||||
<div class="col-xxl-12 col-xl-12 d-flex align-items-stretch">
|
||||
<div class="card p-0 mb-4" style="width:100%">
|
||||
<div class="card-header pb-0 pt-1">
|
||||
<h3 class="card-title">Realtime</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0 d-flex flex-column" id="realtimeSVGcontainer" style="position:relative;max-height:800px;">
|
||||
%%INSERTSVG%%
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
|
||||
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 d-flex align-items-stretch">
|
||||
<div class="card p-0 mb-4" style="width:100%">
|
||||
<div class="card-header pb-0 pt-1">
|
||||
<h3 class="card-title">Statistik dieses Jahr</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-cols-1 row-cols-md-1 g-4 p-2 pb-0" id="Stats-Year">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
|
||||
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 d-flex align-items-stretch">
|
||||
<div class="card p-0 mb-4" style="width:100%">
|
||||
<div class="card-header pb-0 pt-1">
|
||||
<h3 class="card-title">Forecast</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-1" id="meteogram">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
|
||||
<!-- Forecast Graph-->
|
||||
<div class="col-lg-12">
|
||||
<div class="card mb-4 p-0">
|
||||
<div class="card-header pb-0 pt-1">
|
||||
<h3 class="card-title">Forecast</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pb-1">
|
||||
<div class="chart-container" style="position: relative; height:100%; width:100%">
|
||||
<canvas id="forecast-chart" height="400px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Consumption Graph-->
|
||||
<div class="col-lg-12">
|
||||
<div class="card mb-4 p-0">
|
||||
<div class="card-header pb-0 pt-1">
|
||||
<h3 class="card-title">Power consumption</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" title="Voriger Tag" onclick="prevDay()">
|
||||
<i class="bi bi-skip-backward"></i>
|
||||
</button>
|
||||
<button type="button" type="btn btn-tool" class="btn btn-tool datepicker-native">
|
||||
<i class="bi bi-calendar-week"></i>
|
||||
<input type="date" id="DatePickerCons" class="datepicker-native-input" onInput="changeDay(event);" />
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" title="Nächster Tag" onclick="nextDay()">
|
||||
<i class="bi bi-skip-forward"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pb-1">
|
||||
<div class="chart-container" style="position: relative; height:100%; width:100%">
|
||||
<canvas id="consumption-chart" height="400px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Production Graph -->
|
||||
<div class="col-lg-12">
|
||||
<div class="card mb-4 p-0">
|
||||
<div class="card-header pb-0 pt-1">
|
||||
<h3 class="card-title">Power production</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" title="Voriger Tag" onclick="prevDay()">
|
||||
<i class="bi bi-skip-backward"></i>
|
||||
</button>
|
||||
<button type="button" type="btn btn-tool" class="btn btn-tool datepicker-native">
|
||||
<i class="bi bi-calendar-week"></i>
|
||||
<input type="date" id="DatePickerProd" class="datepicker-native-input" onInput="changeDay(event);" />
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" title="Nächster Tag" onclick="nextDay()">
|
||||
<i class="bi bi-skip-forward"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pb-1">
|
||||
<div class="chart-container" style="position: relative; height:100%; width:100%">
|
||||
<canvas id="production-chart" height="400px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.Start col -->
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- Start col -->
|
||||
<div class="m-0 col-xl-2 col-4 d-flex">
|
||||
<div class="card p-0 mb-4" style="width:100%">
|
||||
<div class="card-header pb-0 pt-1">
|
||||
<h3 class="card-title">Temp.</h3>
|
||||
</div>
|
||||
<div class="card-body p-2 d-flex flex-column" id="realtimeSVGcontainer" style="position:relative;">
|
||||
<h3 id="temp">--</h3>°C
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-0 col-xl-2 col-4 d-flex">
|
||||
<div class="card p-0 mb-4" style="width:100%">
|
||||
<div class="card-header pb-0 pt-1">
|
||||
<h3 class="card-title">Feuchte</h3>
|
||||
</div>
|
||||
<div class="card-body p-2 d-flex flex-column" id="realtimeSVGcontainer" style="position:relative;">
|
||||
<h3 id="humidity">--</h3>%rF
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-0 col-xl-2 col-4 d-flex">
|
||||
<div class="card p-0 mb-4" style="width:100%">
|
||||
<div class="card-header pb-0 pt-1">
|
||||
<h3 class="card-title">Wind</h3>
|
||||
</div>
|
||||
<div class="card-body p-2 d-flex flex-column" id="realtimeSVGcontainer" style="position:relative;">
|
||||
<div id="windDir" class="winddir" style="transform: rotate(180deg);"></div>
|
||||
<h3 id="windSpd">--</h3>km/h
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-0 col-xl-2 col-4 d-flex">
|
||||
<div class="card p-0 mb-4" style="width:100%">
|
||||
<div class="card-header pb-0 pt-1">
|
||||
<h3 class="card-title">Böen</h3>
|
||||
</div>
|
||||
<div class="card-body p-2 d-flex flex-column" id="realtimeSVGcontainer" style="position:relative;">
|
||||
<div id="windDirGust" class="winddir" style="transform: rotate(180deg);"></div>
|
||||
<h3 id="windGust">--</h3>km/h
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-0 col-xl-2 col-4 d-flex">
|
||||
<div class="card p-0 mb-4" style="width:100%">
|
||||
<div class="card-header pb-0 pt-1">
|
||||
<h3 class="card-title">Druck</h3>
|
||||
</div>
|
||||
<div class="card-body p-2 d-flex flex-column" id="realtimeSVGcontainer" style="position:relative;">
|
||||
<h3 id="ambPress">--</h3>hPa
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.row (main row) -->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
</main>
|
||||
<!--end::App Main-->
|
||||
Reference in New Issue
Block a user