sensor_data/view_1.php at main · dodosi/sensor_data · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dashboard with Map & Graphs</title>
  <link rel="stylesheet" href="css/style.css">

  <!-- Leaflet for Map -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

  <!-- Plotly for Charts -->
  <script src="https://cdn.plot.ly/plotly-2.29.0.min.js"></script>
</head>
<body>
  <div class="container">
    <!-- Map on the left -->
    <div class="map-container">
      <div id="map"></div>
    </div>

    <!-- Right side: Tabs + Controls + Graphs -->
    <div class="graphs-container">
      <div class="top-bar">
        <div class="tabs" id="graphTabs">
          <button data-graph="temperature" class="active">Temperature</button>
          <button data-graph="humidity">Humidity</button>
          <button data-graph="pressure">Pressure</button>
          <button data-graph="rain">Rain</button>
        </div>

        <div class="time-selector">
          <label for="timeSelect">Time:</label>
          <select id="timeSelect">
            <option value="all">All</option>
            <option value="hourly">Last Hour</option>
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
            <option value="yearly">Yearly</option>
          </select>
          <button id="resetZoom">Reset Zoom</button>
        </div>
      </div>

      <!-- Location Label -->
      <div id="locationLabel">
        Location: <span id="selectedLocation">None</span>
      </div>

      <!-- Graphs -->
      <div class="chart-container">
        <div id="temperatureChart" class="chart active"></div>
        <div id="humidityChart" class="chart"></div>
        <div id="pressureChart" class="chart"></div>
        <div id="rainChart" class="chart"></div>
      </div>
    </div>
  </div>

  <!-- Our scripts -->
  <script type="module" src="./js/dashboard.js"></script>
</body>
</html>