From 7e5aff4b223f890f1bd0f022e5bb26e323acb559 Mon Sep 17 00:00:00 2001 From: Gabe WSL Debian <24978329+EarthenSky@users.noreply.github.com> Date: Mon, 5 Aug 2024 13:25:08 -0700 Subject: [PATCH 01/17] add v1 admin page (need to make it more modern ofc) --- public/admin/index.html | 257 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 257 insertions(+) create mode 100644 public/admin/index.html diff --git a/public/admin/index.html b/public/admin/index.html new file mode 100644 index 0000000..9c169eb --- /dev/null +++ b/public/admin/index.html @@ -0,0 +1,257 @@ + + + + + + + + CSSS Admin Dashboard + + + + + + + + +
+----------------------------------------------------------------------------------------------------
+
+

+    CSSS Admin Dashboard
+    go home
+

+
+----------------------------------------------------------------------------------------------------
+
+

+
Views
+- Execs
+- Logs
+

+
Actions

+

+
+ +
+enter a view! +
+ +
+====================================================================================================
+
+ + + + \ No newline at end of file From a2e20315243a37f32d0254ce46ecf5a527d1d8a0 Mon Sep 17 00:00:00 2001 From: Gabe WSL Debian <24978329+EarthenSky@users.noreply.github.com> Date: Tue, 13 Aug 2024 00:22:47 -0700 Subject: [PATCH 02/17] update style of page --- public/admin/index.html | 372 +++++++++++++--------------------------- public/admin/script.js | 131 ++++++++++++++ public/admin/style.css | 227 ++++++++++++++++++++++++ 3 files changed, 478 insertions(+), 252 deletions(-) create mode 100644 public/admin/script.js create mode 100644 public/admin/style.css diff --git a/public/admin/index.html b/public/admin/index.html index 9c169eb..1675a5b 100644 --- a/public/admin/index.html +++ b/public/admin/index.html @@ -1,257 +1,125 @@ - - - - - CSSS Admin Dashboard - - - - - - - - -
-----------------------------------------------------------------------------------------------------
-
-

-    CSSS Admin Dashboard
-    go home
-

-
-----------------------------------------------------------------------------------------------------
-
-

-
Views
-- Execs
-- Logs
-

-
Actions

-

-
- -
-enter a view! -
- -
-====================================================================================================
-
- - + + + + + CSSS Admin Dashboard + + + + + + + + + + + + + + +
+ +
+
OWO
+
+
+ + + + + + + \ No newline at end of file diff --git a/public/admin/script.js b/public/admin/script.js new file mode 100644 index 0000000..472990b --- /dev/null +++ b/public/admin/script.js @@ -0,0 +1,131 @@ + +function routeView() { + if (window.location.hash == "#execs") { + enterExecs(); + } else if (window.location.hash == "#logs") { + enterLogs(); + } +} +window.onload = routeView; +window.onhashchange = routeView; + +function enterExecs() { + console.log("#execs"); + + // TODO: get this data from the endpoint + response = { + "president": [ + { + "is_current_officer": true, + "position": "president", + "start_date": "2024-07-25T04:38:16.307842", + "end_date": "2025-07-25T04:38:16.307844", + "legal_name": "Person C", + "nickname": "CC", + "discord_name": null, + "discord_nickname": null, + "favourite_course_0": "CMPT 999", + "favourite_course_1": "CMPT 354", + "favourite_language_0": "C++", + "favourite_language_1": "C", + "csss_email": "csss-president-current@sfu.ca", + "biography": "I'm person C...", + "photo_url": null, + "private_data": null + } + ], + "president2": [ + { + "is_current_officer": true, + "position": "president", + "start_date": "2024-07-25T04:38:16.307842", + "end_date": "2025-07-25T04:38:16.307844", + "legal_name": "Person C", + "nickname": "CC", + "discord_name": null, + "discord_nickname": null, + "favourite_course_0": "CMPT 999", + "favourite_course_1": "CMPT 354", + "favourite_language_0": "C++", + "favourite_language_1": "C", + "csss_email": "csss-president-current@sfu.ca", + "biography": "I'm person C...", + "photo_url": null, + "private_data": null + } + ], + "president3": [ + { + "is_current_officer": true, + "position": "president", + "start_date": "2024-07-25T04:38:16.307842", + "end_date": "2025-07-25T04:38:16.307844", + "legal_name": "Person C", + "nickname": "CC", + "discord_name": null, + "discord_nickname": null, + "favourite_course_0": "CMPT 999", + "favourite_course_1": "CMPT 354", + "favourite_language_0": "C++", + "favourite_language_1": "C", + "csss_email": "csss-president-current@sfu.ca", + "biography": "I'm person C...", + "photo_url": null, + "private_data": null + } + ] + }; + + console.log(response); + + // document.getElementById("content").style.overflowX = "scroll"; + + let table = document.createElement("table"); + table.id = "enterExecsTable"; + table.style.height = "auto"; + table.style.fontSize = "10px"; + + let thead = document.createElement("thead"); + let row = document.createElement("tr"); + for (let key in Object.values(response)[0][0]) { + cell = document.createElement("th"); + cell.style.padding = "0 1ch 0 1ch"; + cell.innerHTML = key; + row.appendChild(cell); + } + thead.appendChild(row); + table.appendChild(thead); + + let tbody = document.createElement("tbody"); + tbody.style.color = "white"; + let runningIndex = 0; + for (let i in Object.values(response)) { + + let positionInfoList = Object.values(response)[i]; + for (let j in positionInfoList) { + + row = document.createElement("tr"); + row.style.backgroundColor = (runningIndex % 2 == 0) ? "midnightblue" : "#111"; + runningIndex += 1; + + let positionInfo = positionInfoList[j]; + for (let key in positionInfo) { + cell = document.createElement("td"); + cell.innerHTML = positionInfo[key]; + cell.style.padding = "0 1ch 0 1ch"; + row.appendChild(cell); + } + + tbody.appendChild(row); + } + } + + table.appendChild(tbody); + document.getElementById("content").innerHTML = ''; + document.getElementById("content").appendChild(table); +} + +function enterLogs() { + // TODO: flex center content + document.getElementById("content").innerHTML = 'nothing...'; +} \ No newline at end of file diff --git a/public/admin/style.css b/public/admin/style.css new file mode 100644 index 0000000..9e53abe --- /dev/null +++ b/public/admin/style.css @@ -0,0 +1,227 @@ +/* IBM Plex Mono; for headers */ +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700#display=swap'); + +:root { + --body-width-max: 1480px; + +} + +body { + display: flex; + flex-direction: column; + + margin: 0 auto; + + height: 100vh; + + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: 400; + font-size: 1rem; + + background-color: #fff; +} + +a { + color: rgb(128, 189, 79); +} + +a:hover { + color: rgb(36, 151, 117); +} + +/* ------------------- organization -------------------- */ + +#header { + width: 100%; + + border-bottom: #bbb 1px solid; + + background: rgb(184,252,223); + background: linear-gradient(19deg, rgb(202, 255, 232) 0%, rgb(236, 255, 218) 31%, rgba(255,254,243,1) 100%); +} + +#header-content { + display: flex; + flex-direction: row; + + height: 4.5rem; + margin: 0 auto; + + max-width: var(--body-width-max); +} + +#content { + display: flex; + flex-direction: row; + + margin: 0 auto; + max-width: var(--body-width-max); + height: 64rem; + + background-color: #fff; +} + +#nav-bar { + display: flex; + flex-direction: column; + + width: calc(16rem - 0.5rem); + height: calc(100% - 4rem - 1rem); + + margin-top: 1rem; + padding-right: 0.5rem; + + border-right: #ddd 1px solid; +} + +#view-area { + width: calc(var(--body-width-max) - 16rem); + height: calc(100% - 4rem); +} + +#footer { + display: flex; + flex-direction: row; + + width: 100%; + height: 8rem; + border-top: #bbb 1px solid; + + background-color: #fff; +} + +/* ------------------- items -------------------- */ + +#main-title { + display: flex; + align-items: center; + font-size: 1.5rem; + line-height: 1; + + text-align: center; + + padding: 0 1rem; + height: 100%; + + vertical-align: middle; + + cursor: pointer; + user-select: none; + + font-family: Poppins, sans-serif; +} + +#main-logo:hover { + filter: invert(15%); +} + +.nav-header { + display: flex; + flex-direction: row; + align-items: center; + + width: calc(100% - 2rem); + padding: 0.5rem 1rem; + + border-radius: 0.5rem; + background-color: #fff; + + cursor: pointer; + user-select: none; + + font-family: Poppins, sans-serif; + font-weight: 700; +} + +.nav-header:hover { + background-color: #eee; +} +.nav-header:active { + background-color: #f6f6f6; +} + +.nav-children { + display: flex; + flex-direction: column; + + width: 100%; + + padding-left: 1rem; + + color: #555; + + font-family: Poppins, sans-serif; + font-weight: 400; +} + +.nav-child { + width: calc(100% - 2rem); + + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 1rem; + + border-radius: 0.5rem; + + cursor: pointer; + user-select: none; + + transition: transform 0.11s ease-in-out; +} +.nav-child:hover { + background-color: #f7f7f7; + transform: translateX(-2px); +} +.nav-child:active { + transition: transform 0.05s ease-in-out; + transform: translateX(2px); +} + + +/* ------------------- old -------------------- */ + +#controls { + display: flex; + gap: 2ch; + + margin-top: -2ch; + padding: 1ch 0 0 1ch; +} +#controls div { + width: calc(50ch - 2ch); + padding: 1ch; +} + +clickable { + color: rgb(250, 204, 119); + cursor: pointer; + text-decoration: underline; +} +clickable:hover { + color: rgb(235, 157, 94); +} +clickable:active { + color: rgb(255, 246, 162); +} + +/* +#content { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + + width: 100ch; + height: 36ch; + + margin: auto; + + background-color: black; + color: grey; +} +*/ + +#enterExecsTable { + width: 100ch; + height: 36ch; +} \ No newline at end of file From 81fe41db82f122eea3d0b2840b9afd5792558428 Mon Sep 17 00:00:00 2001 From: Gabe WSL Debian <24978329+EarthenSky@users.noreply.github.com> Date: Tue, 13 Aug 2024 01:00:30 -0700 Subject: [PATCH 03/17] add tabs woooo --- public/admin/index.html | 19 ++++++++++++++-- public/admin/style.css | 48 +++++++++++++++++++++++++++++++++++++++-- 2 files changed, 63 insertions(+), 4 deletions(-) diff --git a/public/admin/index.html b/public/admin/index.html index 1675a5b..a652fb4 100644 --- a/public/admin/index.html +++ b/public/admin/index.html @@ -82,8 +82,23 @@ -
-
OWO
+
+
+
+ Officers Summary +
+
+ Election Log +
+
+
+ +
+
diff --git a/public/admin/style.css b/public/admin/style.css index 9e53abe..de9aea7 100644 --- a/public/admin/style.css +++ b/public/admin/style.css @@ -79,6 +79,50 @@ a:hover { height: calc(100% - 4rem); } +#tab-list { + display: flex; + flex-direction: row; + + overflow: hidden; + + height: 2rem; + padding-top: 1rem; + margin-left: 1rem; +} +.tab-item { + height: 4rem; + + border: #ddd 1px solid; + border-radius: 1.2rem; + + cursor: pointer; + user-select: none; + + padding: 0.3rem 1rem 0 1rem; + transition: transform 0.15s ease-in-out; +} + +.tab-item:hover { + background-color: #eee; + border: #eee 1px solid; + transform: translateY(-2px); +} +.tab-item:active { + transition: transform 0.1s ease-in-out; + + background-color: #f5f5f5; + border: #f5f5f5 1px solid; + transform: translateY(4px); +} + +#view-content { + height: calc(100% - 4rem); + margin: 0 1rem; + + background-color: #fff; + border-top: #ddd 1px solid; +} + #footer { display: flex; flex-direction: row; @@ -166,14 +210,14 @@ a:hover { cursor: pointer; user-select: none; - transition: transform 0.11s ease-in-out; + transition: transform 0.15s ease-in-out; } .nav-child:hover { background-color: #f7f7f7; transform: translateX(-2px); } .nav-child:active { - transition: transform 0.05s ease-in-out; + transition: transform 0.06s ease-in-out; transform: translateX(2px); } From f7097b26a3eb5166fbd20b13d1d6424f03ef6c96 Mon Sep 17 00:00:00 2001 From: Micah Baker Date: Wed, 14 Aug 2024 21:26:03 -0700 Subject: [PATCH 04/17] Configured webpack to proxy /api --- webpack.config.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index a481a4c..5eb7e94 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,6 +2,11 @@ const path = require('path'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; +// change this to your local instance of the CSSS API +// source: https://github.com/csss/csss-site-backend +// (if changed, don't commit your change please!) +const apiInstance = 'http://localhost:3049'; + module.exports = { entry: { react: ['react', 'react-dom'], @@ -34,7 +39,13 @@ module.exports = { directory: path.join(__dirname, 'public') }, compress: true, - port: 8080 + port: 8080, + proxy: [ + { + context: ['/api'], + target: apiInstance + } + ] }, plugins: [ new BundleAnalyzerPlugin({ From c506fa6bc0bdff85a5726fae60428c2eb4e40558 Mon Sep 17 00:00:00 2001 From: Micah Baker Date: Wed, 14 Aug 2024 21:27:28 -0700 Subject: [PATCH 05/17] code review'd --- webpack.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 5eb7e94..d49f86d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,7 +5,7 @@ const BundleAnalyzerPlugin = // change this to your local instance of the CSSS API // source: https://github.com/csss/csss-site-backend // (if changed, don't commit your change please!) -const apiInstance = 'http://localhost:3049'; +const API_INSTANCE = 'http://localhost:3049'; module.exports = { entry: { @@ -43,7 +43,7 @@ module.exports = { proxy: [ { context: ['/api'], - target: apiInstance + target: API_INSTANCE } ] }, From 964b9c578fb7f10f255a3929ed7b42b126e5f0f0 Mon Sep 17 00:00:00 2001 From: Gabe WSL Debian <24978329+EarthenSky@users.noreply.github.com> Date: Wed, 14 Aug 2024 22:39:51 -0700 Subject: [PATCH 06/17] add clickable tabs --- public/admin/handlers.js | 144 +++++++++++++++++++++++++++++++++++++++ public/admin/index.html | 64 +++++++++-------- public/admin/style.css | 84 ++++++++++++++++------- webpack.config.js | 3 +- 4 files changed, 240 insertions(+), 55 deletions(-) create mode 100644 public/admin/handlers.js diff --git a/public/admin/handlers.js b/public/admin/handlers.js new file mode 100644 index 0000000..ea53e60 --- /dev/null +++ b/public/admin/handlers.js @@ -0,0 +1,144 @@ +var activeTab = null; + +// --------------------------------------------------------------- // + +function initView() { + // TODO: look at #tag & load the current page + // TODO: also, add support for this tag + home.display() +} + +function updateActiveTab(newTab) { + if (activeTab != null && activeTab.ID == newTab.ID) { + return; + } else { + console.log("setting active tab to " + newTab.ID); + activeTab = newTab; + + for (const child of document.getElementById("view-content").children) { + child.style.display = "none"; + } + document.getElementById(activeTab.ID + "-content").style.removeProperty("display"); + } +} + +function createViewContent(tab_id) { + let viewContentChild = document.createElement("div"); + viewContentChild.id = tab_id + "-content"; + viewContentChild.style.display = "none"; + + document.getElementById("view-content").appendChild(viewContentChild); +} + +function updateContents(tab_id, html) { + document.getElementById(tab_id + "-content").innerHTML = html; +} + +function createTab(tab) { + let tabList = document.getElementById("tab-list"); + + // only create the tab if it doesn't already exist + if (tabList.querySelector("#" + tab.ID + "-tab") != null) + return; + + let tabElement = document.createElement("div"); + tabElement.id = tab.ID + "-tab"; + tabElement.classList.add("tab-item"); + tabElement.innerHTML = tab.NAME; + tabElement.addEventListener("click", _ => { updateActiveTab(tab) }); + + tabList.append(tabElement); +} + +// --------------------------------------------------------------- // + +class Home { + constructor() { + this.ID = "home"; + this.NAME = "⌂"; + createViewContent(this.ID); + } + + createContents() { + updateContents(this.ID, "home"); + } +} + +class Officers { + constructor() { + this.ID = "officers"; + this.NAME = "Officers"; + createViewContent(this.ID); + } + + createTab() { + createTab(this); + updateActiveTab(this); + } +} + +class AddNewOfficers { + constructor() { + this.ID = "add-new-officers"; + this.NAME = "Add New Officers"; + createViewContent(this.ID); + } + + createTab() { + createTab(this); + this.createContents(); + updateActiveTab(this); + } + + createContents() { + let contents = ` +
+ HELLO, I AM OFFICER! +
+ `; + updateContents(this.ID, contents); + } + + destroyContents() { + + } +} + +class Device { + constructor() { + this.ID = "device"; + this.NAME = "Device"; + createViewContent(this.ID); + } + + createTab() { + createTab(this); + this.display(); + } +} + +class Admin { + constructor() { + this.ID = "admin"; + this.NAME = "Admin"; + createViewContent(this.ID); + } + + createTab() { + createTab(this); + this.display(); + } +} + +// --------------------------------------------------------------- // + +const home = new Home(); + +const officers = new Officers(); +const addNewOfficers = new AddNewOfficers(); + +const device = new Device(); +const admin = new Admin(); + +updateActiveTab(home); +home.createContents(); diff --git a/public/admin/index.html b/public/admin/index.html index a652fb4..bc94493 100644 --- a/public/admin/index.html +++ b/public/admin/index.html @@ -1,14 +1,8 @@ - - - - CSSS Admin Dashboard + @@ -20,13 +14,34 @@ + +