Made time and region selection html selects, updated about to new site

dist/index.html

@@ -4,7 +4,7 @@
         <title>WoW Historical Token Prices Tracker</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="description" content="Track current and historical gold price trends for the World of Warcraft (WoW) in game token, including the US, EU, TW, and KR regions. Prices updated every minute. Simple, quick, and easy info, no ads ever.">
+        <meta name="description" content="Track current and historical gold price trends for the World of Warcraft (WoW) in game token, including the US, EU, TW, and KR regions. Prices updated every minute. Simple, quick, and easy info, no ads or tracking, ever.">
 	    <link rel="preconnect" href="https://data.wowtoken.app">
 	    <link rel="dns-prefetch" href="https://data.wowtoken.app">
         <link rel="preload" href="https://data.wowtoken.app/token/current.json" as="fetch" type="application/json" crossorigin="anonymous">
@@ -18,29 +18,31 @@
             <div>
                 <canvas id="token-chart"></canvas>
                 <div id="option_select">
-                    <p>
+                    <label for="region">Region:</label>
-                        Region: 
+                    <select name="region" id="region">
-                        <a href="javascript:updateRegionPreference('us')">US</a>
+                        <option value="us">US</option>
-                        <a href="javascript:updateRegionPreference('eu')">EU</a>
+                        <option value="eu">EU</option>
-                        <a href="javascript:updateRegionPreference('kr')">KR</a>
+                        <option value="kr">KR</option>
-                        <a href="javascript:updateRegionPreference('tw')">TW</a>
+                        <option value="tw">TW</option>
-                    </p>
+                    </select>
-                    <p>
+                    <br />
-                        Time Selection:
+                    <label for="time">Time Selection:</label>
-                        <a href="javascript:updateTimePreference('72h')">3d</a>
+                    <select name="time" id="time">
-                        <a href="javascript:updateTimePreference('168h')">7d</a>
+                        <option value="72h">3 Days</option>
-                        <a href="javascript:updateTimePreference('336h')">14d</a>
+                        <option value="168h">7 Days</option>
-                        <a href="javascript:updateTimePreference('30d')">30d</a>
+                        <option value="336h">14 Days</option>
-                        <a href="javascript:updateTimePreference('90d')">3m</a>
+                        <option value="30d">1 Month</option>
-                        <a href="javascript:updateTimePreference('6m')">6m</a>
+                        <option value="90d">3 Months</option>
-                        <a href="javascript:updateTimePreference('all')">all</a>
+                        <option value="6m">6 Months</option>
-                    </p>
+                        <option value="1y">1 Year</option>
+                        <option value="all">All Available</option>
+                    </select>
                 </div>
                 <div id="source">
                     <p>
                         <a href="https://github.com/sneaky-emily/wowtoken.app">Source</a>
                         |
-                        <a href="https://emilyd.xyz/projects/wowtoken-app/">About</a>
+                        <a href="https://emily.sh/blog/2021/04/developing-a-simple-wow-token-tracker/">About</a>
                     </p>
                 </div>
             </div>

package.json

@@ -9,7 +9,7 @@
   "devDependencies": {
     "css-loader": "^5.2.6",
     "style-loader": "^3.0.0",
-    "webpack": "^5.41.1",
+    "webpack": "^5.73.0",
     "webpack-cli": "^4.7.2"
   },
   "dependencies": {

src/index.js

@@ -25,8 +25,8 @@ Chart.register(
     Tooltip
 )
 
-var current_region_selection = 'us'
+var current_region_selection = ''
-var current_time_selection = '72h'
+var current_time_selection = ''
 var current_price_hash = {
     us: 0,
     eu: 0,
@@ -138,7 +138,7 @@ function detectURLQuery() {
     // In the future, we will allow all the times to be selected,
     // once I come up with a good reduction algorithm.
     // For larger time selections, it's currently hardcoded into the backend
-    const allowedTimes = ['72h', '167h', '336h', '30d', '90d', '6m', 'all']
+    const allowedTimes = ['72h', '167h', '336h', '30d', '90d', '1y', '6m', 'all']
     if (urlSearchParams.has('time')) {
         if (allowedTimes.includes(urlSearchParams.get('time').toLowerCase())) {
             current_time_selection = urlSearchParams.get('time').toLowerCase()
@@ -150,10 +150,17 @@ function detectURLQuery() {
 
 
 $(document).ready(function() {
+    document.getElementById('region').addEventListener('change', function() {
+        updateRegionPreference(this.value);
+    });
+    current_region_selection = document.getElementById('region').value;
+    document.getElementById('time').addEventListener('change', function() {
+        updateTimePreference(this.value);
+    });
+    current_time_selection = document.getElementById('time').value;
     detectURLQuery();
     callUpdateURL();
     setInterval(callUpdateURL, 60*1000);
     pullChartData().then(populateChart);
-    setInterval(updateChartData, 15*60*1000);
 });