fix version of parcel

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
-/.cache
+/.cache
+/.parcel-cache

.terserrc

@@ -0,0 +1,13 @@
+{
+  "mangle": {
+    "reserved": [
+      "setPlan",
+      "logEvent",
+      "exportCSV",
+      "resetSystem",
+      "navigateTemp",
+      "logTemp",
+      "showGraph"
+    ]
+  }
+}

.vscode/tasks.json

@@ -14,7 +14,7 @@
         "reveal": "always"
       }
     },
-        {
+    {
       "label": "Clean site",
       "type": "shell",
       "command": "cd ${workspaceFolder}; rm -rf dist",
@@ -26,6 +26,19 @@
       "presentation": {
         "reveal": "always"
       }
+    },
+    {
+      "label": "Run Site",
+      "type": "shell",
+      "command": "cd ${workspaceFolder}; source nodetopath.sh; npm run start",
+      "problemMatcher": [],
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "presentation": {
+        "reveal": "always"
+      }
     }
   ]
 }

init.sh

@@ -5,6 +5,8 @@
 npm install -g typescript
 npm install -g ts-node
 npm install --save-dev @types/node
-npm install --save-dev typescript parcel-bundler
+#npm install --save-dev typescript parcel-bundler
+npm i --save-dev parcel
+npm install --save-dev autoprefixer postcss
 npm install chart.js@4.4.1
 npm install chartjs-plugin-annotation@3.1.0

package.json

@@ -4,11 +4,18 @@
     "chartjs-plugin-annotation": "^3.1.0"
   },
   "devDependencies": {
-    "@types/node": "^22.15.30",
+    "@types/node": "^22.15.31",
-    "parcel-bundler": "^1.12.5",
+    "parcel": "^2.15.2",
     "typescript": "^5.8.3"
   },
   "scripts": {
-    "build": "parcel build src/roast.html --public-url=./ --out-dir dist"
+    "start": "parcel src/roast.html",
+    "build": "parcel build src/roast.html --public-url=./ --dist-dir dist"
+
+  },
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "module": "ESNext"
   }
 }

postcss.config.js

@@ -1,19 +0,0 @@
-module.exports = {
-  plugins: [
-    // Other PostCSS plugins can be listed here if you use them.
-  ],
-  minify: true,  // Ensure this is set to true so Parcel uses the provided options
-  terserOptions: {
-    mangle: {
-      // Specify functions that should not be mangled by their names
-      reserved: [
-        "setPlan",
-        "logEvent",
-        "exportCSV",
-        "resetSystem",
-        "navigateTemp",
-        "logTemp"
-      ]
-    }
-  }
-};

src/roast.css

@@ -121,4 +121,40 @@ body {
 #temp-buttons button {
     text-align: center;
     width: 3.5em;
+}
+
+.graph-container {
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+}
+
+canvas {
+    width: 100%;
+    height: 100%;
+}
+
+#close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 5px 10px;
+    font-size: 16px;
+    cursor: pointer;
+    z-index: 10;
+    border-radius: 4px;
+}
+
+#close-btn:hover {
+    background-color: #f8f8f8;
 }

src/roast.html

@@ -22,6 +22,7 @@
         </div>
         <div id="export-csv">
             <button onclick="exportCSV()">Export CSV</button>
+            <button onclick="showGraph()">Show Graph</button>
             <button onclick="resetSystem()">Reset</button>
         </div>
     </div>
@@ -39,6 +40,10 @@
             </tbody>
         </table>
     </div>
-    <script src="./roast.ts"></script>
+    <div id="graph-container">
-</body>
+        <button id="close-btn">X</button>
+        <canvas id="myChart"></canvas>
+    </div>
+    <!--script type="module" src="./tempgraph.ts"></script-->
+    <script type="module" src="./roast.ts"></script></body>
 </html>

src/roast.ts

@@ -5,12 +5,25 @@ let targets: number[] = [];
 let currentTargetIndex = 0;
 let interval: NodeJS.Timeout | null = null;
 
+interface Window {
+    startTimer?: Function; // function to start the timer
+    stopTimer?: Function; // function to stop the timer
+    logEvent?: Function; // function to log a new event
+    resetSystem?: Function; // function to reset all actions in the system
+    setPlan?: Function; // function to update the temp event plan
+    navigateTemp?: Function; //function to navigate forward/back between events in the setPlan() temp plan
+    logTemp?: Function; //function to log a temputure event
+    exportCSV?: Function; //function to export the events to CSV
+    showGraph?: Function; //function to show the graph on screen
+}
 
 function startTimer(): void {
     if (isRunning) {
         alert("Timer is already running. Click again to reset.");
         return;
     }
+    timer = 0;
+    updateTimerDisplay();
     isRunning = true;
     interval = setInterval(() => {
         timer++;
@@ -19,7 +32,9 @@ function startTimer(): void {
 }
 
 function stopTimer(): void {
-    clearInterval(interval!);
+    if(interval !== null){
+        clearInterval(interval);
+    }
     isRunning = false;
 }
 
@@ -31,10 +46,12 @@ function updateTimerDisplay(): void {
 
 function logEvent(eventName: string): void {
     if (eventName === "Charge") {
-        if (log.length > 0) {
+        if (log.length > 0 || isRunning) {
+            if(isRunning){
+                stopTimer();
+            }
             log = [];
             timer = 0;
-            isRunning = false;
         }
         startTimer();
         log.push({ time: formatTime(timer), event: eventName });
@@ -139,14 +156,14 @@ function exportCSV(): void {
     document.body.removeChild(link);
 }
 
-// Expose functions to the global scope
+// Expose functions to the global scope (allowing html direct access)
 if (typeof window !== 'undefined') {
-  window.startTimer = startTimer;
+    window.startTimer = startTimer;
-  window.stopTimer = stopTimer;
+    window.stopTimer = stopTimer;
-  window.logEvent = logEvent;
+    window.logEvent = logEvent;
-  window.resetSystem = resetSystem;
+    window.resetSystem = resetSystem;
-  window.setPlan = setPlan;
+    window.setPlan = setPlan;
-  window.navigateTemp = navigateTemp;
+    window.navigateTemp = navigateTemp;
-  window.logTemp = logTemp;
+    window.logTemp = logTemp;
-  window.exportCSV = exportCSV;
+    window.exportCSV = exportCSV;
 }

src/tempgraph.ts

@@ -0,0 +1,115 @@
+import { Chart, registerables } from 'chart.js';
+import annotationPlugin from 'chartjs-plugin-annotation';
+import {AnnotationOptions} from 'chartjs-plugin-annotation';
+
+// Register all Chart.js components
+Chart.register(...registerables);
+Chart.register(annotationPlugin);
+
+function updateData()
+const sampleData = `Time,Event,Temperature
+0:00,Charge,
+0:00,Temp,139
+0:03,Temp,90
+0:10,Temp,129
+0:13,Temp,161
+0:19,Temp,191
+0:22,Yellow,
+0:24,Temp,207
+0:24,First Crack,
+0:30,Temp,208
+0:31,Drop,`;
+
+const lines = sampleData.split('\n');
+const data = lines.slice(1).map(line => {
+  const [time, event, temp] = line.split(',');
+  return { time, event, temp };
+});
+
+function parseTime(time: string): number {
+  const [mins, secs] = time.split(':').map(Number);
+  return mins * 60 + secs;
+}
+
+const tempData = data
+  .filter(entry => entry.event === 'Temp')
+  .map(entry => {
+    const timeInSeconds = parseTime(entry.time);
+    const temp = parseFloat(entry.temp);
+    return { x: timeInSeconds, y: temp };
+  });
+
+const ctx = document.getElementById('myChart') as HTMLCanvasElement;
+ctx.width = 800;
+ctx.height = 400;
+
+const annotationsArray: AnnotationOptions<'line'>[] = data
+  .filter(entry => entry.event !== 'Temp')
+  .map(entry => {
+    const timeInSeconds = parseTime(entry.time);
+    return {
+      type: 'line',
+      mode: 'vertical',
+      scaleID: 'x',
+      value: timeInSeconds,
+      borderColor: 'red',
+      borderWidth: 2,
+      label: {
+        content: entry.event,
+        enabled: true,
+        position: 'center', // Use a valid predefined position
+        yAdjust: -10
+      }
+    };
+  });
+
+// Your Chart.js configuration remains the same:
+new Chart(ctx, {
+  type: 'line',
+  data: {
+    datasets: [{
+      label: 'Temperature (°C)',
+      data: tempData,
+      borderColor: 'blue',
+      fill: false,
+      pointRadius: 5,
+      pointBackgroundColor: 'blue'
+    }]
+  },
+  options: {
+    responsive: true,
+    scales: {
+      x: {
+        type: 'linear',
+        position: 'bottom',
+        ticks: {
+          callback: function(value) {
+            const mins = Math.floor(Number(value) / 60);
+            const secs = Number(value) % 60;
+            return `${mins}:${secs.toString().padStart(2, '0')}`;
+          }
+        },
+        min: 0,
+        max: 31
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'Temperature (°C)'
+        }
+      }
+    },
+    plugins: { // Correctly nested as per the previous answer
+      annotation: {
+        annotations: annotationsArray
+      }
+    }
+  }
+});
+
+document.getElementById('close-btn')?.addEventListener('click', () => {
+  const container = document.getElementById('graph-container');
+  if (container) {
+    container.style.display = container.style.display === 'none' ? 'flex' : 'none';
+  }
+});