From 0d976023eb0622d91428ad1150fdfd5304424a09 Mon Sep 17 00:00:00 2001 From: andrewzpu <66804382+andrewzpu@users.noreply.github.com> Date: Wed, 8 May 2024 01:39:24 -0700 Subject: [PATCH 01/11] Set Up House Points Tracker --- frontend/src/Pages/House.svelte | 177 ++++++++++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 frontend/src/Pages/House.svelte diff --git a/frontend/src/Pages/House.svelte b/frontend/src/Pages/House.svelte new file mode 100644 index 00000000..5a68ae26 --- /dev/null +++ b/frontend/src/Pages/House.svelte @@ -0,0 +1,177 @@ + + + + + + + + +
+

Houses

+
+ {#if window.innerWidth > 769} +
+
+
+ {:else} +
+
+
+ {/if} + + + \ No newline at end of file From c52acfc51e707d9d42490151adb1f7e977d51cb1 Mon Sep 17 00:00:00 2001 From: andrewzpu <66804382+andrewzpu@users.noreply.github.com> Date: Wed, 8 May 2024 01:42:36 -0700 Subject: [PATCH 02/11] Added house tab to side bar --- frontend/src/Components/Sidebar.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/Components/Sidebar.svelte b/frontend/src/Components/Sidebar.svelte index e42bb64d..8a56228b 100644 --- a/frontend/src/Components/Sidebar.svelte +++ b/frontend/src/Components/Sidebar.svelte @@ -67,6 +67,7 @@ {#if adminStatus} Inductees Outreach + Houses {/if} Logout From b344e365a0e58a62b89b68018a182a0deec89243 Mon Sep 17 00:00:00 2001 From: andrewzpu <66804382+andrewzpu@users.noreply.github.com> Date: Wed, 8 May 2024 01:47:25 -0700 Subject: [PATCH 03/11] Forgot to include route in App.svelte --- frontend/src/App.svelte | 2 ++ frontend/src/Components/Sidebar.svelte | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index e8b669a3..b7d83b34 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -8,6 +8,7 @@ //import ProfileEdit from "./Pages/ProfileEdit.svelte"; import Inductees from "./Pages/Inductees.svelte"; import Outreach from "./Pages/Outreach.svelte"; + import House from "./Pages/House.svelte"; async function getAdminStatus() { let response = await fetch(`/api/permissions/`); @@ -45,6 +46,7 @@ + diff --git a/frontend/src/Components/Sidebar.svelte b/frontend/src/Components/Sidebar.svelte index 8a56228b..b109356d 100644 --- a/frontend/src/Components/Sidebar.svelte +++ b/frontend/src/Components/Sidebar.svelte @@ -67,7 +67,7 @@ {#if adminStatus} Inductees Outreach - Houses + Houses {/if} Logout From c5ed89c1a1687a8fe40cf8133ea92a89c0c6bd82 Mon Sep 17 00:00:00 2001 From: andrewzpu <66804382+andrewzpu@users.noreply.github.com> Date: Sun, 26 May 2024 23:18:30 -0700 Subject: [PATCH 04/11] Changed House Points Chart to include switching to Bar Chart --- frontend/src/Pages/House.svelte | 113 ++++++++++++++++++++++------ frontend/src/Pages/Inductees.svelte | 2 +- 2 files changed, 93 insertions(+), 22 deletions(-) diff --git a/frontend/src/Pages/House.svelte b/frontend/src/Pages/House.svelte index 5a68ae26..1ca13f41 100644 --- a/frontend/src/Pages/House.svelte +++ b/frontend/src/Pages/House.svelte @@ -1,6 +1,5 @@ @@ -15,7 +14,7 @@ // key should be safe to leave public since it is restricted to only the spreadsheet api const key = "AIzaSyAlVjsRdCfuHsRt5RXriI2dLDrAjwMiP0Y" const year1 = 2023 // change year based on firsty half of school year (ie 24/25 --> year1 = 2024) - const title = "House Points Spring 2024" + const title = "Spring 2024 Points" const colors = ['Orange', 'Green', 'Purple', 'Yellow', 'Blue'] // Range D1 to Z1 is to get house names (assuming they may change) @@ -37,6 +36,7 @@ let houses = []; let max = 0; + // get list of house names from spreadsheet (in case they change) fetch(housesURL) .then(res => { return res.json(); @@ -47,7 +47,7 @@ }) .catch(error => console.log(error)); - + // get points data from spreadsheet fetch(dataURL) .then(res => { return res.json(); @@ -61,12 +61,14 @@ function updateData() { let currRow = 0; - dateData = []; numData = []; hoverData = []; + + // Keeps track of accumulating scores over time (each spreadsheet row only shows points earned at that event) prevTemp = [0,0,0,0,0] while(data[currRow][0] != '') { + // get dates const dateString = data[currRow][0] const month = parseInt(dateString.substring(0, dateString.indexOf('/'))) - 1 const day = parseInt(dateString.substring(dateString.indexOf('/') + 1)) @@ -78,12 +80,16 @@ let numTemp = data[currRow].slice(3) let hoverTemp = [] + // for each row of data, add point values on top of existing point values for (let i = 0; i < numTemp.length; i++) { numTemp[i] = parseFloat(numTemp[i]) + prevTemp[i]; - hoverTemp.push(numTemp[i] + "\n" + data[currRow][i + 3] + " points earned\n" + data[currRow][1] + "\n" + date.toLocaleDateString('en-US')) + hoverTemp.push("House " + houses[i] + "\n" + "\n" + numTemp[i] + " Points\n" + data[currRow][i + 3] + " points earned\n" + data[currRow][1] + date.toLocaleDateString("en-US")) } - dateData.push(date) + + // numData is all the points data numData.push(numTemp) + + // hoverData is the tooltips that appear when hovering over a point on the line graph hoverData.push(hoverTemp) currRow++; prevTemp = numTemp; @@ -93,38 +99,48 @@ max = Math.max(...rowMax) * 1.3 } + // on resize, redraw the chart to fit hopefully window.addEventListener("resize", () => { tryDrawChart(); }); function tryDrawChart() { - console.log("try"); + // first make sure that data has been retrieved if (!data || houses.length === 0) { return; } - console.log("success") - updateData(); - var dataTable = new google.visualization.DataTable(); - dataTable.addColumn('date', 'Day'); + // Building Line Chart + + var lineDataTable = new google.visualization.DataTable(); + lineDataTable.addColumn('number', 'Event Number'); for (let i = 0; i < houses.length; i++) { - dataTable.addColumn('number', houses[i]); - dataTable.addColumn({type:'string', role:'tooltip'}); + lineDataTable.addColumn('number', houses[i]); + lineDataTable.addColumn({type:'string', role:'tooltip'}); } + + // Initialize Starting Point (all houses start at 0 points) + let startRow = [0] + for (let i = 0; i < houses.length; i++) { + startRow.push(0) + startRow.push("House " + houses[i] + "\nStarting Point\n0 Points") + } + lineDataTable.addRow(startRow) + // add each row of data (each row represents 1 event) for (let i = 0; i < numData.length; i++) { - let newRow = [dateData[i]] + let newRow = [i + 1] for (let j = 0; j < houses.length; j++) { newRow.push(numData[i][j]) newRow.push(hoverData[i][j]); } - dataTable.addRow(newRow) + lineDataTable.addRow(newRow) } - var options = { + var lineOptions = { legend: 'right', title: title, width: '100%', @@ -138,25 +154,72 @@ } }, hAxis: { - title: "Houses" + title: "Event Count", + gridlines: { count: 20} } }; + // Building Bar Chart + + // get last entry in numData (current scores) + var currentScores = numData[numData.length - 1] + + barData = [['House', 'Points', { role: 'style'}]] + + // add each house, score, color triplet one by one + for (var i = 0; i < houses.length; i++) { + barData.push([houses[i], currentScores[i], colors[i]]) + } + + // convert to google Data Table + var barDataTable = google.visualization.arrayToDataTable(barData) + + var barOptions = { + title: title, + width: '100%', + height: '100%', + legend: { position: "none" }, + vAxis: { + title: "House Points", + viewWindow: { + min: 0, + max: max + } + }, + hAxis: { + title: "Houses", + } + } + + // Draw default chart (line chart) var chart = new google.visualization.LineChart(document.getElementById('chart_div')); - chart.draw(dataTable, options); + chart.draw(lineDataTable, lineOptions); + + // Add button listener to switch to line chart + document.getElementById("line_button").addEventListener("click", () => { + var lineChart = new google.visualization.LineChart(document.getElementById('chart_div')); + lineChart.draw(lineDataTable, lineOptions); + }) + + // Add button listener to switch to bar chart + document.getElementById("bar_button").addEventListener("click", () => { + var barChart = new google.visualization.ColumnChart(document.getElementById('chart_div')); + barChart.draw(barDataTable, barOptions) + }) } } else { + // if google hasn't loaded in yet, retry in a sec setTimeout(LoadGoogle, 30); } } - + LoadGoogle();
-

Houses

+

House Points

{#if window.innerWidth > 769}
@@ -167,11 +230,19 @@
{/if} +
+ + +
\ No newline at end of file diff --git a/frontend/src/Pages/Inductees.svelte b/frontend/src/Pages/Inductees.svelte index 3ccb6a11..9205125e 100644 --- a/frontend/src/Pages/Inductees.svelte +++ b/frontend/src/Pages/Inductees.svelte @@ -174,7 +174,7 @@

Inductees

loading...

-{:then [filler, adminStatus, classes]} +{:then [_, adminStatus, classes]} {#if adminStatus} From be5ca26cc32a39eb4229c2b3ce85ec981e07832c Mon Sep 17 00:00:00 2001 From: andrewzpu <66804382+andrewzpu@users.noreply.github.com> Date: Wed, 5 Jun 2024 04:10:26 -0700 Subject: [PATCH 05/11] Added user's house and points to house page --- frontend/src/Pages/House.svelte | 41 +++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/frontend/src/Pages/House.svelte b/frontend/src/Pages/House.svelte index 1ca13f41..ce7428d0 100644 --- a/frontend/src/Pages/House.svelte +++ b/frontend/src/Pages/House.svelte @@ -44,6 +44,7 @@ .then(output => { houses = output["values"][0]; tryDrawChart(); + getIndividualData(); }) .catch(error => console.log(error)); @@ -57,6 +58,42 @@ tryDrawChart(); }) .catch(error => console.log(error)); + + let name = "" + + function getIndividualData() { + + fetch(`/api/profile/self/`) + .then(res => { + return res.json(); + }) + .then(userData => { + name = userData.first_name + userData.last_name; + return name + }) + .then(name => { + + for (let i = 0; i < houses.length; i++) { + fetch("https://sheets.googleapis.com/v4/spreadsheets/" + id + "/values/'" + houses[i] + "'!C1:Z2?key=" + key) + .then(res => { + return res.json(); + }) + .then(output => { + let data = output["values"] + for (let j = 0; j < data[0].length; j++) { + console.log(data[0][j]); + if (name === data[0][j]) { + document.getElementById("houseId").innerHTML = "Your House: " + houses[i]; + document.getElementById("pointsId").innerHTML = "Your Points: " + data[1][j]; + found = true; + } + } + }) + } + + }) + } + function updateData() { @@ -221,6 +258,10 @@

House Points

+
+

Your House: Loading...

+

Your Points: Loading...

+
{#if window.innerWidth > 769}
From 448b3eecfed3dad1fa068876f9a4b7ab18afe72e Mon Sep 17 00:00:00 2001 From: ryanyychen Date: Wed, 23 Oct 2024 10:20:05 -0700 Subject: [PATCH 06/11] Update to new google sheet and change yellow line to red --- frontend/src/Pages/House.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/Pages/House.svelte b/frontend/src/Pages/House.svelte index ce7428d0..35f7777c 100644 --- a/frontend/src/Pages/House.svelte +++ b/frontend/src/Pages/House.svelte @@ -7,7 +7,7 @@ diff --git a/frontend/src/Components/Sidebar.svelte b/frontend/src/Components/Sidebar.svelte index 42f11668..555937f3 100644 --- a/frontend/src/Components/Sidebar.svelte +++ b/frontend/src/Components/Sidebar.svelte @@ -5,13 +5,9 @@ let onLogOut = () => { sessionStorage.removeItem('adminStatus'); } - - - -
- HKN logo - Home Page - Profile - {#if $adminStatus === true} - Inductees - Outreach - {/if} - Logout -
-{:then adminStatus} - -
- HKN logo - Home Page - Profile - - {#if adminStatus} + +
+ HKN logo + Home Page + Profile + {#if $adminStatus === true} Inductees Outreach Houses - {/if} + {/if} + Logout +