diff --git a/.gitignore b/.gitignore index 168e6ff..cef7839 100644 --- a/.gitignore +++ b/.gitignore @@ -29,3 +29,6 @@ jspm_packages/ .env .env.test node_modules + +# excel temp files +~$* \ No newline at end of file diff --git a/sample_data/FY26 Detail Sheet - v3.0 Prototype.xlsx b/sample_data/FY26 Detail Sheet - v3.0 Prototype.xlsx index b4e24f8..f1ca3b9 100644 Binary files a/sample_data/FY26 Detail Sheet - v3.0 Prototype.xlsx and b/sample_data/FY26 Detail Sheet - v3.0 Prototype.xlsx differ diff --git a/src/css/common.css b/src/css/common.css index 26127be..7af6839 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -21,7 +21,7 @@ font-size: 14px; /* spacing */ --header-height : 125px; - --sidebar-width: 250px; + --sidebar-width: 300px; } /* Button styling */ diff --git a/src/index.html b/src/index.html index 028589c..fd1fee1 100644 --- a/src/index.html +++ b/src/index.html @@ -123,45 +123,11 @@



-
Baseline
-
- - - - - -
-
-
Supplemental
-
- - - -
+
Baseline
+
+ +
Supplemental
+
diff --git a/src/js/components/sidebar/sidebar.css b/src/js/components/sidebar/sidebar.css index f25f9fe..976f051 100644 --- a/src/js/components/sidebar/sidebar.css +++ b/src/js/components/sidebar/sidebar.css @@ -41,4 +41,48 @@ color: var(--darkGray); font-weight: bold; border-bottom: 1px solid var(--citygreen); +} + +hr { + margin-top: -5px; + margin-bottom: 8px; +} + +h6 { + font-weight: 600; +} + +.section-header { + background-color: var(--mediumGray); +} + +.sidebar-stat-line { + display: flex; + align-items: center; + justify-content: space-between; /* Distribute space between children */ + padding: 2px; + border-bottom: 1px solid #ddd; +} + +.edit-icon { + color: var(--spiritgreen); + cursor: pointer; + font-size: 16px; /* Adjust the size as needed */ + margin-left: 10px; +} + +.edit-icon:hover { + color: var(--citygreen); +} + +.stat-label { + margin-right: auto; /* Push next elements to the right */ +} + +.stat { + margin-left: 5px; /* Optional: Add some space between currency and edit icon */ +} + +.sidebar-stat-line.fund-total .stat { + margin-right: 05px; /* 25px lines up with lines above (with edit symbol) */ } \ No newline at end of file diff --git a/src/js/components/sidebar/sidebar.js b/src/js/components/sidebar/sidebar.js index 03bac8a..03daa64 100644 --- a/src/js/components/sidebar/sidebar.js +++ b/src/js/components/sidebar/sidebar.js @@ -1,10 +1,9 @@ import './sidebar.css' +import { BaselineSection } from './subcomponents/baseline_section'; -import { formatCurrency } from "../../utils/common_utils.js"; -import {Baseline, Supplemental} from '../../models/'; +import SuppSection from './subcomponents/supp_section' - -// Assuming you have a CSS variable --main-color defined on the :root +// fetch CSS variables saved in :root const root = document.documentElement; const sideBarWidth = getComputedStyle(root).getPropertyValue('--sidebar-width').trim(); @@ -26,9 +25,6 @@ function showSidebar() { mainPanel.style.width = `${contentWidth - parseInt(sideBarWidth, 10)}px`; header.style.width = `${contentWidth - parseInt(sideBarWidth, 10)}px`; - // add target to sidebar - addTarget(Baseline.target()); - // add event listener to resize content if window is adjusted window.addEventListener('resize', showSidebar); } @@ -37,51 +33,9 @@ function updateSidebarTitle(new_title){ document.getElementById('sidebar-title').textContent = new_title; } -function replaceSidebarStat(stat_id, new_figure){ - const span = document.querySelector(`#${stat_id} .stat`); - span.setAttribute('value', new_figure); - span.textContent = formatCurrency(new_figure); -} - -function fetchStat(stat_id){ - const stat = document.querySelector(`#${stat_id} .stat`); - return parseFloat(stat.getAttribute('value')) || 0; -} - - -function addTarget(target){ - replaceSidebarStat('target', target); -} - -// update all stats based on saved data -async function updateBaseline(){ - // gather info and update sidebar accordingly - var baseline = new Baseline(); - replaceSidebarStat('baseline-revenue', baseline.revenue()); - replaceSidebarStat('baseline-personnel', baseline.personnel()); - replaceSidebarStat('baseline-nonpersonnel', baseline.nonpersonnel()); - replaceSidebarStat('baseline-total', baseline.total()); - - // color code based on target - var target = fetchStat('target'); - if(baseline.total() <= target){ - document.querySelector('#baseline-total .stat').style.color = "green"; - } - if(baseline.total() > target){ - document.querySelector('#baseline-total .stat').style.color = "red"; - } -} - -function updateSupp(){ - var supp = new Supplemental; - replaceSidebarStat('supp-revenue', supp.revenue()); - replaceSidebarStat('supp-expenses', supp.expenses()); - replaceSidebarStat('supp-total', supp.total()); -} - function updateTotals(){ - updateBaseline(); - updateSupp(); + SuppSection.update(); + BaselineSection.update(); } function resetAll(){ @@ -91,10 +45,11 @@ function resetAll(){ } const Sidebar = { + SuppSection : SuppSection, + BaselineSection : BaselineSection, hide: hideSidebar, show: showSidebar, updateTitle: updateSidebarTitle, - addTarget: addTarget, updateTotals: updateTotals, reset: resetAll }; diff --git a/src/js/components/sidebar/subcomponents/baseline_section.js b/src/js/components/sidebar/subcomponents/baseline_section.js new file mode 100644 index 0000000..52ad898 --- /dev/null +++ b/src/js/components/sidebar/subcomponents/baseline_section.js @@ -0,0 +1,106 @@ +import { FISCAL_YEAR } from "../../../constants"; +import { Baseline, FundLookupTable, Fund, CurrentFund } from "../../../models"; +import { formatCurrency } from "../../../utils/common_utils"; +import { visitPage } from "../../../views/view_logic"; + +export const BaselineSection = { + _data: new Baseline(), + _genFund : new Fund(1000), + + get data() { + this._data = new Baseline(); + return this._data; + }, + + set data(newData) { + this._data = newData; + }, + + get genFund() { + this._genFund = new Fund(1000); + return this._genFund; + }, + + set genFund(newFund) { + this._genFund = newFund; + }, + + target_html() { + return ` + + + +
`; + }, + + fund_html(fund) { + return ` +
${FundLookupTable.getName(fund.fund)}
+
+
+ Projected revenues: + ${formatCurrency(fund.getRevenue())} + +
+
+ Personnel cost: + ${formatCurrency(fund.getPersonnelCost())} + +
+
+ Non-personnel cost: + ${formatCurrency(fund.getNonPersonnelCost())} + +
+
+ Fund total: + ${formatCurrency(fund.getTotal())} +
+
`; + }, + + linkEditBtns() { + let btns = document.querySelectorAll('.edit-icon'); + btns.forEach((btn) => { + // Get the fund from the div the button is in + let fund = btn.closest('.fund-div').id.replace('fund_', ''); + let page = btn.closest('.sidebar-stat-line').classList[1]; + + btn.addEventListener('click', function(event) { + CurrentFund.update(fund); + visitPage(page); + }); + }); + }, + + update() { + const baselineDiv = document.querySelector('#baseline-stats'); + baselineDiv.innerHTML = this.target_html(); + + this.data.funds.forEach((fund) => { + var fundDiv = document.createElement('div'); + fundDiv.id = `fund_${fund.fund}`; + fundDiv.classList.add('fund-div'); + fundDiv.innerHTML = this.fund_html(fund); + baselineDiv.appendChild(fundDiv); + }); + + if(this.genFund.getTotal() <= Baseline.target()){ + document.querySelector('#GF-total .stat').style.color = "green"; + document.querySelector('#fund_100 sidebar-stat-line.fund-total .stat').style.color = "green"; + } else { + document.querySelector('#GF-total .stat').style.color = "red"; + document.querySelector('#fund_1000 .sidebar-stat-line:last-of-type .stat').style.color = "red"; + } + this.linkEditBtns(); + } +}; \ No newline at end of file diff --git a/src/js/components/sidebar/subcomponents/supp_section.js b/src/js/components/sidebar/subcomponents/supp_section.js new file mode 100644 index 0000000..0576b9c --- /dev/null +++ b/src/js/components/sidebar/subcomponents/supp_section.js @@ -0,0 +1,28 @@ +import { Supplemental } from "../../../models"; +import { formatCurrency } from "../../../utils/common_utils"; + +export const SuppSection = { + html() { + var supp = new Supplemental; + return ` + + + ` + }, + + update() { + const suppDiv = document.querySelector('#supp-stats'); + suppDiv.innerHTML = this.html(); + } +} + +export default SuppSection; \ No newline at end of file diff --git a/src/js/models/supplemental.js b/src/js/models/supplemental.js index 5126324..d25add9 100644 --- a/src/js/models/supplemental.js +++ b/src/js/models/supplemental.js @@ -1,6 +1,6 @@ import Initiative from "./initiative.js"; -import { colSum } from "../utils/common_utils.js"; +import { colSum, formatCurrency } from "../utils/common_utils.js"; // data structure to hold supplemental requests export class Supplemental {