UMD-INST377 · Jzheng-prog · Oct 19, 2022 · Oct 19, 2022 · Oct 19, 2022 · Nov 9, 2022
diff --git a/README.md b/README.md
@@ -1,6 +1,23 @@
-# This is your readme
-You are required to fill it in with documentation similar to that found in the Sequelize example for the course as part of your final project.
+# Project-pgcounty-spending
+# README
+- Link to the Github Pages site where things are running
+    - [Prince George's County Finance](https://main.d3a5z6zabynccq.amplifyapp.com/index.html)
+- Title of your project
+    - Prince George County Finance
+- Description of target browsers (iOS? Android? Which ones? Which versions?)
+    - Our targeted browder is a computer web page. Our app should be inclusive to all browser types.
+
+- Description of your project:
+    - Data analysis web application of Prince George’s county finance management based on the county’s spending
+    - Compare data year by year, find trends to see resource allocation, what the sector county focuses on the most, where and what they spend most of their money on, and potentially forecasting future budgets.
+- What API did you use, link to the API
+    - https://data.princegeorgescountymd.gov/Finance-and-Budget/Spending-Information-for-FY-2022/jh2p-ym6a
+        - https://data.princegeorgescountymd.gov/resource/jh2p-ym6a.json "REST API for 2022"
+- What visualisations does your project drive? What visualisation or other JS libraries does your project use?
+    - Our project uses Chart.js to create visualizations of our data. It can change graph the data into a doughnut chart or bar chart depending on which the user prefer to see.
+    The visualization can be filtered to see different variables of the data we created, such as filter for payee, agency, zip code, and amoutns specifically. 
+- What CSS frameworks did you use? What version of them?
+    - We started out CSS framework from scratch, taking some ideas from past assignments and online searches.
+- What is your actual project trying to display and solve?
+    - Our project aim to visualize the Spendings of Prince Georges County throughout the years. Our request from the API pull data from various years and graph them on a chart. This allow us to see what the budget is going to throughout the years and what we are spending the most on, who we spending it on, and how much we spenidng on them. This could help direct future spendings in the county. It could provide us what needs to be improved or is lacking in development in the county. 
 
-### How to use Markdown
-Markdown is a text notation system used in Discord, Whatsapp and similar to structure pages without writing HTML at all. You'll be using it for your documentation.
-* [Markdown guide](https://www.markdownguide.org/cheat-sheet/)
diff --git a/client/data.html b/client/data.html
@@ -0,0 +1,62 @@
+<html lang="en-US">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>project-pgcounty-spending</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <header class="header">
+            <h2 class="header">
+                Prince George County Finance
+                <nav class="navbar">
+                    <a href='index.html'>Home</a>
+                    <a href=''>Data</a>
+                    <a href='viz.html'>Visualization</a>
+                </nav>
+            </h2>
+        </header>
+
+        <div class="form container">
+            <div class="left box">
+                <div class="innr">
+                    <form action="/api" class="sr_form" style="width: 110px">
+                        <div>
+                            <label for="resto">Search</label>
+                            <input type="text" name="resto" id="resto">
+                        </div>
+                        <button type="submit" id="get">Submit & filter</button>
+                    </form>
+                    <h5>Select Year:</h5>
+                    <form action="/api" class="yr_form">
+                        <div class="small" id="butts">
+                            <script>
+                                window.addEventListener('load', (event) => {
+                                    addButt('#butts');
+                                });
+                            </script>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <div class="inner"></div>
+            <div class="right box">
+                <div id="yrtitle"></div>
+                <div class="table" id="rlist">
+                    Loading data from an API...
+                </div>
+            </div>
+        </div>
+
+        <div class="footer">
+            <a href="https://github.com/bw1umd/Project-pgcounty-spending.git">Github</a>
+        </div>
+        <script src="./script.js"></script>
+    </div>
+</body>
+
+</html>
diff --git a/client/index.html b/client/index.html
@@ -1,12 +1,66 @@
-<html lang="en">
+<html lang="en-US">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Group Project Base</title>
+    <title>project-pgcounty-spending</title>
     <link rel="stylesheet" href="styles.css">
 </head>
+
 <body>
-    <script src="./script.js"></script>
+    <div class="wrapper">
+        <div class="header">
+            <h2 class="header">
+                Prince George County Finance
+                <nav class="navbar">
+                    <a href=''>Home</a>
+                    <a href='data.html'>Data</a>
+                    <a href='viz.html'>Visualization</a>
+                </nav>
+            </h2>
+        </div>
+
+        <div class="container">
+            <div class="slides">
+                <div class="mySlides fade">
+                    <img src="./media/orchard-terrace.jpg" style="width:100%">
+                </div>
+                <div class="mySlides fade">
+                    <img src="./media/imrs.php.webp" style="width:100%">
+                </div>
+                <script>
+                    let slideIndex = 0;
+                    function showSlides() {
+                        let i;
+                        let slides = document.getElementsByClassName("mySlides");
+                        for (i = 0; i < slides.length; i++) {
+                            slides[i].style.display = "none";
+                        }
+                        slideIndex++;
+                        if (slideIndex > slides.length) { slideIndex = 1 }
+                        slides[slideIndex - 1].style.display = "block";
+                        setTimeout(showSlides, 7000); // Change image every 2 seconds
+                    }
+                    showSlides();
+                </script>
+            </div>
+            <div class="text box">
+                <h3 15px style="padding-left: 15px;">
+                    Welcome to Prince George county's financial data visualizer!
+                </h3>
+                <a>
+                    Click Data button to see the tables
+                </a>
+                <a>
+                    Click Visualization button to see the charts
+                </a>
+            </div>
+        </div>
+
+        <div class="footer">
+            <a href="https://github.com/bw1umd/Project-pgcounty-spending.git">Github</a>
+        </div>
 </body>
-</html>
+
+</html>
diff --git a/client/media/imrs.php.webp b/client/media/imrs.php.webp
diff --git a/client/media/orchard-terrace.jpg b/client/media/orchard-terrace.jpg
diff --git a/client/script.js b/client/script.js
@@ -0,0 +1,125 @@
+function injectHTML(list, htmlelm) {
+  let target = document.querySelector(htmlelm);
+  target.innerHTML = '';
+
+  // populate table head
+  const head = document.createElement('tr');
+  for (const key of Object.keys(list[0])) {
+    const th = document.createElement('th');
+    th.innerText = cap(key.replaceAll('_', ' '));
+    head.appendChild(th);
+  }
+  target.appendChild(head);
+
+  // populate table content
+  for (const value of Object.values(list)) {
+    const tr = document.createElement('tr');
+    const row = Object.values(value);
+    row.forEach(element => {
+      const td = document.createElement('td');
+      td.innerText = element;
+      tr.appendChild(td);
+    });
+    target.appendChild(tr);
+  }
+  console.log('injected');
+}
+
+function cap(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+
+function getRandInt(min, max) {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+function filterlist(list, filterInputvalue) {
+  return list.filter((i) => {
+    if (!i) { return; }
+    const lowerCaseName = JSON.stringify(i).toLowerCase();
+    const lowerCaseQuery = filterInputvalue.toLowerCase();
+    return lowerCaseName.includes(lowerCaseQuery);
+  });
+}
+
+function addButt(htmlelm) {
+  const form = document.querySelector(htmlelm);
+  for (var i = 0; i < 11; i++) {
+    var div = document.createElement('div');
+    var btn = document.createElement('input');
+    var labl = document.createElement('label');
+    div.className = 'combo';
+    btn.className = 'radiobutt';
+    btn.type = 'radio';
+    btn.name = 'butt';
+    const year = 2022 - i;
+    btn.id = year;
+    btn.value = year;
+    labl.htmlFor = year;
+    labl.innerText = year;
+    if (year === 2022) {
+      btn.checked = true;
+    }
+    div.appendChild(btn);
+    div.appendChild(labl);
+    form.appendChild(div);
+  }
+}
+
+async function fetchJson(yr) {
+  const main = await fetch(`api/finServices/${yr}`);
+  return await main.json();
+}
+
+async function mainEvent() {
+
+  // hide button
+  const submit = document.querySelector('#get');
+  submit.style.display = 'none';
+
+  // show the table 
+  let yrtitle = '2022';
+  let yr = document.querySelector('.yr_form');
+  let data = await fetchJson(2022);
+  injectHTML(data.data, '#rlist');
+  let table = document.querySelector('#yrtitle');
+  let title = document.createElement('h2');
+  title.innerText = 'Data from ' + yrtitle;
+  table.appendChild(title);
+
+  // click button to change the year
+  yr.addEventListener('input', async (event) => {
+    event.preventDefault();
+    data = await fetchJson(event.target.value);
+    console.log(data.data.length);
+    if (data.data.length > 0) {
+      document.querySelector('#rlist')
+        .addEventListener('load', injectHTML(data.data, '#rlist'));
+      yrtitle = await event.target.value;
+      // add table title
+      title.innerText = 'Data from ' + yrtitle;
+      table.replaceChild(title);
+    }
+  });
+
+  // search box
+  if (data.data.length > 0) {
+    let search = document.querySelector('.sr_form');
+    search.addEventListener('input', async (event) => {
+      console.log(event.target.value)
+      const flist = await filterlist(data.data, event.target.value);
+      injectHTML(flist, '#rlist');
+    });
+    submit.style.display = 'block';
+    search.addEventListener('submit', async (event) => {
+      event.preventDefault();
+    });
+  }
+}
+
+// run main
+document.addEventListener('DOMContentLoaded', async () => mainEvent());
+