nicklozon · July 21, 2024 04:06
diff --git a/jettatemp.html b/jettatemp.html
 <html>
  <head>
    <script type="text/javascript" src="chart.umd.js"></script>
  </head>
  <body>
    <div style=""><canvas id="ventcanvas"></canvas></div>
    <div style=""><canvas id="cabincanvas"></canvas></div>

    <script type="text/javascript">
      function createChart() {
        const sessionId = Date.now().toString()
        let loadedSessionId = sessionId
        localStorage.setItem(sessionId, JSON.stringify([]))
        const labels = [...Array(120).keys()]

        const ventData = {
          labels: labels,
          datasets: [{
            label: 'Temperature',
            yAxisID: 'temp',
            data: [],
            fill: false,
            borderColor: 'rgb(192, 72, 72)',
            tension: 0.1
          }]
        };
        const cabinData = {
          labels: [...Array(120).keys()],
          datasets: [{
            label: 'Temperature',
            yAxisID: 'temp',
            data: [],
            fill: false,
            borderColor: 'rgb(192, 72, 72)',
            tension: 0.1
          }]
        };

        const ventConfig = {
          type: 'line',
          data: ventData,
          options: {
            scales: {
              temp: {
                type: 'linear',
                position: 'left',
                label: 'Temperature',
                min: 5
              }
            }
          }
        };
        const cabinConfig = {
          type: 'line',
          data: cabinData,
          options: {
            scales: {
              temp: {
                type: 'linear',
                position: 'left',
                label: 'Temperature',
                min: 5
              }
            }
          }
        };

        const ventChart = new Chart(
          document.getElementById('ventcanvas'),
          ventConfig
        )
        const cabinChart = new Chart(
          document.getElementById('cabincanvas'),
          cabinConfig
        )

        setInterval(() => {
          const ip = '192.168.4.1'
          fetch(`http://${ip}`).then(response => {
            response.json().then(json => {
          /*
           json = {
            vent_temp: Math.random()*30+5,
            cabin_temp: Math.random()*30+5
           }
          */
              // Save to session
              let session = JSON.parse(localStorage.getItem(sessionId))
              session.push(json)
              localStorage.setItem(sessionId, JSON.stringify(session))

              // Real-time update for active session
              if(loadedSessionId === sessionId) {
                if(ventChart.data.datasets[0].data.length === 120) {
                  ventChart.data.datasets[0].data.shift()
                }
                ventChart.data.datasets[0].data.push(json.vent_temp)
                //ventChart.data.datasets[1].data.push(json.vent_humidity)
                ventChart.update()

                if(cabinChart.data.datasets[0].data.length === 120) {
                  cabinChart.data.datasets[0].data.shift()
                }
                cabinChart.data.datasets[0].data.push(json.cabin_temp)
                //cabinChart.data.datasets[1].data.push(json.cabin_humidity)
                cabinChart.update()
              }
            })
          })
        }, 5000)

        const template = document.getElementById('template')
        const sessionIds = Object.keys(localStorage).sort()
        sessionIds.forEach(id => {
          const newElement = template.content.cloneNode(true)
          newElement.querySelector('span').innerHTML = id
          newElement.querySelector("button[name='load']").addEventListener('click', () => loadSession(id))
          newElement.querySelector("button[name='delete']").addEventListener('click', deleteSession(id))
          document.body.appendChild(newElement)
        })

        function loadSession(id) {
          loadedSessionId = id
          const session = JSON.parse(localStorage.getItem(id))
          ventChart.data.labels = [...Array(session.length).keys()]
          ventChart.data.datasets[0].data = session.map(datapoint => datapoint.vent_temp)
          ventChart.update()
          cabinChart.data.labels = [...Array(session.length).keys()]
          cabinChart.data.datasets[0].data = session.map(datapoint => datapoint.cabin_temp)
          cabinChart.update()
        }

        function deleteSession(id) {
          return (event) => {
            if(id === sessionId) return
            if(confirm('Are you sure?')) {
              localStorage.removeItem(id)
              event.currentTarget.parentElement.remove()
            }
          }
        }
      }

      window.onload = createChart
    </script>
    <template id="template">
      <div>
        <span name="label"></span>
        <button name="load">Load</button>
        <button name="delete">Delete</button>
      </div>
    </template>
  </body>
 </html>
	<html>
	<head>
	<script type="text/javascript" src="chart.umd.js"></script>
	</head>
	<body>
	<div style=""><canvas id="ventcanvas"></canvas></div>
	<div style=""><canvas id="cabincanvas"></canvas></div>

	<script type="text/javascript">
	function createChart() {
	const sessionId = Date.now().toString()
	let loadedSessionId = sessionId
	localStorage.setItem(sessionId, JSON.stringify([]))
	const labels = [...Array(120).keys()]

	const ventData = {
	labels: labels,
	datasets: [{
	label: 'Temperature',
	yAxisID: 'temp',
	data: [],
	fill: false,
	borderColor: 'rgb(192, 72, 72)',
	tension: 0.1
	}]
	};
	const cabinData = {
	labels: [...Array(120).keys()],
	datasets: [{
	label: 'Temperature',
	yAxisID: 'temp',
	data: [],
	fill: false,
	borderColor: 'rgb(192, 72, 72)',
	tension: 0.1
	}]
	};

	const ventConfig = {
	type: 'line',
	data: ventData,
	options: {
	scales: {
	temp: {
	type: 'linear',
	position: 'left',
	label: 'Temperature',
	min: 5
	}
	}
	}
	};
	const cabinConfig = {
	type: 'line',
	data: cabinData,
	options: {
	scales: {
	temp: {
	type: 'linear',
	position: 'left',
	label: 'Temperature',
	min: 5
	}
	}
	}
	};

	const ventChart = new Chart(
	document.getElementById('ventcanvas'),
	ventConfig
	)
	const cabinChart = new Chart(
	document.getElementById('cabincanvas'),
	cabinConfig
	)

	setInterval(() => {
	const ip = '192.168.4.1'
	fetch(`http://${ip}`).then(response => {
	response.json().then(json => {
	/*
	json = {
	vent_temp: Math.random()*30+5,
	cabin_temp: Math.random()*30+5
	}
	*/
	// Save to session
	let session = JSON.parse(localStorage.getItem(sessionId))
	session.push(json)
	localStorage.setItem(sessionId, JSON.stringify(session))

	// Real-time update for active session
	if(loadedSessionId === sessionId) {
	if(ventChart.data.datasets[0].data.length === 120) {
	ventChart.data.datasets[0].data.shift()
	}
	ventChart.data.datasets[0].data.push(json.vent_temp)
	//ventChart.data.datasets[1].data.push(json.vent_humidity)
	ventChart.update()

	if(cabinChart.data.datasets[0].data.length === 120) {
	cabinChart.data.datasets[0].data.shift()
	}
	cabinChart.data.datasets[0].data.push(json.cabin_temp)
	//cabinChart.data.datasets[1].data.push(json.cabin_humidity)
	cabinChart.update()
	}
	})
	})
	}, 5000)

	const template = document.getElementById('template')
	const sessionIds = Object.keys(localStorage).sort()
	sessionIds.forEach(id => {
	const newElement = template.content.cloneNode(true)
	newElement.querySelector('span').innerHTML = id
	newElement.querySelector("button[name='load']").addEventListener('click', () => loadSession(id))
	newElement.querySelector("button[name='delete']").addEventListener('click', deleteSession(id))
	document.body.appendChild(newElement)
	})

	function loadSession(id) {
	loadedSessionId = id
	const session = JSON.parse(localStorage.getItem(id))
	ventChart.data.labels = [...Array(session.length).keys()]
	ventChart.data.datasets[0].data = session.map(datapoint => datapoint.vent_temp)
	ventChart.update()
	cabinChart.data.labels = [...Array(session.length).keys()]
	cabinChart.data.datasets[0].data = session.map(datapoint => datapoint.cabin_temp)
	cabinChart.update()
	}

	function deleteSession(id) {
	return (event) => {
	if(id === sessionId) return
	if(confirm('Are you sure?')) {
	localStorage.removeItem(id)
	event.currentTarget.parentElement.remove()
	}
	}
	}
	}

	window.onload = createChart
	</script>
	<template id="template">
	<div>
	<span name="label"></span>
	<button name="load">Load</button>
	<button name="delete">Delete</button>
	</div>
	</template>
	</body>
	</html>