From 59a57f88a9ed340d432491256a34f566956bf146 Mon Sep 17 00:00:00 2001 From: Emily Date: Sun, 3 May 2026 11:15:50 -0700 Subject: [PATCH 1/2] holiday implementation front end desgins --- Front-End Documentation Instruction.md | 68 ++++++++++++++++++++++++++ holiday_frontend.md | 0 2 files changed, 68 insertions(+) create mode 100644 Front-End Documentation Instruction.md create mode 100644 holiday_frontend.md diff --git a/Front-End Documentation Instruction.md b/Front-End Documentation Instruction.md new file mode 100644 index 0000000..55fded6 --- /dev/null +++ b/Front-End Documentation Instruction.md @@ -0,0 +1,68 @@ +Front End Documentation + +Overall Goal: Create a page for admins of OED to create holiday exceptions + +What we did: + +- Went through OED design documents specifically + - Wef +- Drew up a design of what the page should look like, these are very rough, and I will explain them in detail for what they are supposed to be. +- Figure A. +- ![][image1] + +- The photo is separated into three parts, as noted on the left hand margin, the first iteration shows the drop down for “Location”, this is for the holiday region that the admin will select. +- When the holiday location is selected, for example North America +- The second iteration is triggered when the location is selected +- The second iteration has the “choose holiday” label that has appeared along with the holiday selection drop bar. In theory the drop down would contain different holidays within the holiday region. +- The third iteration shows a blank square, this is where the admin selector tool would come in, and you would be able to plan your holiday exceptions. +- + +General: + +- The look of the page should resemble other admin components stylization; ie conversions page +- The feel of the page is up to the designer, and those making the page itself + +Design: + +- Wanted a drop down menu of holiday regions; ie the options would not be + - North america + - Europe + - Africa +- Rather they would be options for what holiday region you are in, and what you celebrate and where your meter is located +- There is an already existing drop down component in OED located at src/client/app/components/UnitSelectComponents.tsx +- Initially tried to use this file, however it is not a generic so we needed to edit and make other files. +- Files we made and used: + - GenericSelectComponent.tsx + - This component provides a reusable dropdown select input with a label, allowing users to choose and clear options from a given list. + + - UnitSelectComponent.tsx + - This component renders a grouped dropdown for selecting a unit, pulling options from Redux state and updating the selected unit while showing loading status and helpful UI labels/tooltips. + + - UIOptionsComponent.tsx + - This component renders a dynamic control panel that displays different chart-related options and settings based on the currently selected chart type, while also handling resizing and scroll behavior for the UI. + + - HolidayOptionsComponent.tsx + - This component renders two linked dropdowns where selecting a location dynamically updates the list of available holidays for that region. + +- Once the location has been selected, you should be able to search through a drop down of all allowed holidays for this particular location +- There is going to be a text field to add context + +There will need to be a database either created or updated to include holidays + +- jhjhj + +Look at other pages; they should all be calling, translating format messages, OED translates automatically. + +- There is a key that is put into the data.js file, which has key-value pairs and needs to have an entry for 3 languages that are currently there. + +We would need to link it to Redux/state +Would need to create a local Redux/state to store any local value + +Here is what the page currently looks like: +![][image2] + +We hope these notes and diagrams will be helpful for you all moving forward\! + +[image1]: + +[image2]: \ No newline at end of file diff --git a/holiday_frontend.md b/holiday_frontend.md new file mode 100644 index 0000000..e69de29 From 8d59cc8f5ef836c848f0c290aa0da18c2c77c896 Mon Sep 17 00:00:00 2001 From: Emily Date: Sun, 3 May 2026 11:23:22 -0700 Subject: [PATCH 2/2] frontend for holiday implemenation --- Front-End Documentation Instruction.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/Front-End Documentation Instruction.md b/Front-End Documentation Instruction.md index 55fded6..2f57a5b 100644 --- a/Front-End Documentation Instruction.md +++ b/Front-End Documentation Instruction.md @@ -4,8 +4,7 @@ Overall Goal: Create a page for admins of OED to create holiday exceptions What we did: -- Went through OED design documents specifically - - Wef +- Went through OED design documents - Drew up a design of what the page should look like, these are very rough, and I will explain them in detail for what they are supposed to be. - Figure A. - ![][image1] @@ -49,8 +48,6 @@ Design: There will need to be a database either created or updated to include holidays -- jhjhj - Look at other pages; they should all be calling, translating format messages, OED translates automatically. - There is a key that is put into the data.js file, which has key-value pairs and needs to have an entry for 3 languages that are currently there.