Smart-Dashboard/restricted/heat.html

<!--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">Heizung</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-3 col-xl-4 col-lg-5 col-md-5 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">Heater</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-3 d-flex flex-column">
              <object data="assets/img/heater.svg"></object>
            </div>
          </div>
          <!-- /.card -->
        </div>

      
        <!-- Heater 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">Temperaturen</h3>
              <div class="card-tools">
                <button type="button" class="btn btn-tool" title="Zoom out">
                  <i class="bi bi-zoom-out"></i>
                </button>
                <button type="button" class="btn btn-tool" title="Zoom in">
                  <i class="bi bi-zoom-in"></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="heat-chart" height="400px;"></canvas>
              </div>
            </div>
          </div>
        </div>
          <!-- /.card -->
        <!-- Water 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">Wasserverbrauch</h3>
              <div class="card-tools">
                <button type="button" class="btn btn-tool" title="Zoom out">
                  <i class="bi bi-zoom-out"></i>
                </button>
                <button type="button" class="btn btn-tool" title="Zoom in">
                  <i class="bi bi-zoom-in"></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="water-chart" height="400px;"></canvas>
              </div>
            </div>
          </div>
        </div>
          <!-- /.card -->
      </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-->