michie1 · michie1 · Jan 12, 2024 · Jan 12, 2024 · Jan 12, 2024 · Jan 12, 2024
diff --git a/README.md b/README.md
@@ -37,13 +37,13 @@ Check [http://localhost:8080](http://localhost:8080)
 1. Copy previous year:
 `cd prod && cp -r 2020 2021`
 2. Remove `wrs.js` and download latest from `https://uitslagen.wtos.nl/wrs.js`.
-3. Increment year in `index.html`.
+3. Increment year in title in `index.html`.
 4. Use `prod/config.js` and paste the values into `config.js` temporarily.
-5. Add a console.log with JSON.stringify for the races, results and riders.
-6. Copy the arrays to `races.js`, `results.js` and `riders.js`.
+5. Add a console.log with JSON.stringify for the races, results and riders in `src/index.js`.
+6. Copy the arrays to `prod/year/`/`races.js`, `results.js` and `riders.js`.
 7. Remove the console logs and revert `config.js`.
 8. In `package.json` extent the `build` script for the newly added year.
-9. In de `sidebar` (`App/View.elm`), add link to the newly added year.
+9. In de `sidebar` (`App/View.elm`), add link to the newly added year around line 114.
 10. `npm run build`.
 11. Commit & push.
 12. Export firebase database as backup. Clear the firebase database.

diff --git a/package.json b/package.json
@@ -6,9 +6,9 @@
   "main": "index.js",
   "scripts": {
     "dev": "webpack-dev-server --hot --inline",
-    "build": "yarn make && yarn uglify && cp -r src/static dist && cp src/_redirects dist && cp prod/index.* dist && cp prod/config.js dist && cp -r prod/2018 dist && cp -r prod/2019 dist && cp -r prod/2020 dist && cp -r prod/2021 dist && cp -r prod/2022 dist",
+    "build": "yarn make && yarn uglify && cp -r src/static dist && cp src/_redirects dist && cp prod/index.* dist && cp prod/config.js dist && cp -r prod/2018 dist && cp -r prod/2019 dist && cp -r prod/2020 dist && cp -r prod/2021 dist && cp -r prod/2022 dist && cp -r prod/2023 dist",
     "make": "elm make src/Main.elm --optimize --output dist/wrs.js",
-    "uglify": "uglifyjs dist/wrs.js --compress 'pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe' | uglifyjs --mangle --output=dist/wrs.js",
+    "uglify": "uglifyjs dist/wrs.js --compress 'pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe' | uglifyjs --mangle --output dist/wrs.js",
     "test": "yarn elm-test",
     "format": "yarn elm-format src"
   },

diff --git a/prod/2023/config.js b/prod/2023/config.js
@@ -0,0 +1,3 @@
+const config = {
+  wtosLoginUrl: "https://wtos.nl/wrslogin.php"
+};
diff --git a/prod/2023/index.html b/prod/2023/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>WTOS Uitslagen 2023</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css"
+    />
+    <link rel="stylesheet" href="/static/wrs.css" />
+    <link rel="stylesheet" href="/static/elm-datepicker.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <script
+      defer
+      src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"
+    ></script>
+  </head>
+  <body>
+    <div id="main"></div>
+
+    <script src="wrs.js"></script>
+    <script src="config.js"></script>
+    <script src="races.js"></script>
+    <script src="riders.js"></script>
+    <script src="results.js"></script>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/prod/2023/index.js b/prod/2023/index.js
@@ -0,0 +1,109 @@
+"use strict";
+
+function hasParam(name) {
+  var regex = new RegExp("[\\?&]" + name);
+  var results = regex.exec(location.search);
+  return results !== null;
+}
+
+var url = new URL(window.location.href);
+var token = url.searchParams.get("token");
+
+if (token !== null) {
+  window.history.replaceState(null, null, window.location.href.split("?")[0]);
+}
+
+const { wtosLoginUrl } = config;
+
+const app = Elm.Main.init({
+  node: document.getElementById("main"),
+  flags: {
+    wtosLoginUrl
+  }
+});
+
+loadRiders();
+loadRaces();
+loadResults();
+
+function loadRiders() {
+  const riders = Object.keys(riders).map(function(key) {
+    return Object.assign(
+      {
+        key: key
+      },
+      riders[key]
+    );
+  });
+
+  app.ports.infoForElm.send({
+    tag: "RidersLoaded",
+    data: riders
+  });
+}
+
+function loadRaces() {
+  const races = Object.keys(races)
+    .map(function(key) {
+      return Object.assign(
+        {
+          key: key
+        },
+        races[key]
+      );
+    })
+    .map(race => {
+      race.date = new Date(race.date.split(" ")[0]).toISOString();
+      return race;
+    });
+
+  app.ports.infoForElm.send({
+    tag: "RacesLoaded",
+    data: races
+  });
+}
+
+function loadResults() {
+  const results = Object.keys(results).map(function(key) {
+    return Object.assign(
+      {
+        key: key
+      },
+      results[key]
+    );
+  });
+  app.ports.infoForElm.send({
+    tag: "ResultsLoaded",
+    data: results
+  });
+}
+
+function addRace() {}
+
+function addRider() {}
+
+function addResult() {}
+
+function editResult() {}
+
+function userSignedIn() {}
+
+function userSignOut() {}
+
+app.ports.infoForOutside.subscribe(function(msg) {
+  if (msg.tag === "RiderAdd") {
+    addRider(msg.data);
+  } else if (msg.tag === "RaceAdd") {
+    addRace(msg.data);
+  } else if (msg.tag === "ResultAdd") {
+    addResult(msg.data);
+  } else if (msg.tag === "ResultEdit") {
+    editResult(msg.data);
+  } else if (msg.tag === "UserSignOut") {
+    userSignOut();
+  } else {
+    console.log("msg", msg);
+    document.getElementsByTagName("body")[0].innerHTML =
+      "Something went wrong. Please try again in Chrome or see console for detailed error message.";
+  }
+});
diff --git a/prod/2023/races.js b/prod/2023/races.js
diff --git a/prod/2023/results.js b/prod/2023/results.js
diff --git a/prod/2023/riders.js b/prod/2023/riders.js
diff --git a/prod/2023/static/elm-datepicker.css b/prod/2023/static/elm-datepicker.css
@@ -0,0 +1,102 @@
+.elm-datepicker--container {
+  position: relative; }
+
+.elm-datepicker--input:focus {
+  outline: 0; }
+
+.elm-datepicker--picker {
+  position: absolute;
+  border: 1px solid #CCC;
+  z-index: 10;
+  background-color: white; }
+
+.elm-datepicker--picker-header,
+.elm-datepicker--weekdays {
+  background: #F2F2F2; }
+
+.elm-datepicker--picker-header {
+  display: flex;
+  align-items: center; }
+
+.elm-datepicker--prev-container,
+.elm-datepicker--next-container {
+  flex: 0 1 auto;
+  cursor: pointer; }
+
+.elm-datepicker--month-container {
+  flex: 1 1 auto;
+  padding: 0.5em;
+  display: flex;
+  flex-direction: column; }
+
+.elm-datepicker--month,
+.elm-datepicker--year {
+  flex: 1 1 auto;
+  cursor: default;
+  text-align: center; }
+
+.elm-datepicker--year {
+  font-size: 0.6em;
+  font-weight: 700; }
+
+.elm-datepicker--prev,
+.elm-datepicker--next {
+  border: 6px solid transparent;
+  background-color: inherit;
+  display: block;
+  width: 0;
+  height: 0;
+  padding: 0 0.2em; }
+
+.elm-datepicker--prev {
+  border-right-color: #AAA; }
+  .elm-datepicker--prev:hover {
+    border-right-color: #BBB; }
+
+.elm-datepicker--next {
+  border-left-color: #AAA; }
+  .elm-datepicker--next:hover {
+    border-left-color: #BBB; }
+
+.elm-datepicker--table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  font-size: 0.8em; }
+  .elm-datepicker--table td {
+    width: 2em;
+    height: 2em;
+    text-align: center; }
+
+.elm-datepicker--row {
+  border-top: 1px solid #F2F2F2; }
+
+.elm-datepicker--dow {
+  border-bottom: 1px solid #CCC;
+  cursor: default; }
+
+.elm-datepicker--day {
+  cursor: pointer; }
+  .elm-datepicker--day:hover {
+    background: #F2F2F2; }
+
+.elm-datepicker--disabled {
+  cursor: default;
+  color: #DDD; }
+  .elm-datepicker--disabled:hover {
+    background: inherit; }
+
+.elm-datepicker--picked {
+  color: white;
+  background: darkblue; }
+  .elm-datepicker--picked:hover {
+    background: darkblue; }
+
+.elm-datepicker--today {
+  font-weight: bold; }
+
+.elm-datepicker--other-month {
+  color: #AAA; }
+  .elm-datepicker--other-month.elm-datepicker--disabled {
+    color: #EEE; }
+  .elm-datepicker--other-month.elm-datepicker--picked {
+    color: white; }
diff --git a/prod/2023/static/wrs.css b/prod/2023/static/wrs.css
@@ -0,0 +1,44 @@
+.spinner {
+  width: 70px;
+  text-align: center;
+}
+
+.spinner > div {
+  width: 18px;
+  height: 18px;
+  background-color: #333;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}
+
+label {
+  padding-left: 5px;
+}
diff --git a/prod/2023/wrs.js b/prod/2023/wrs.js
diff --git a/src/App/View.elm b/src/App/View.elm
@@ -111,6 +111,7 @@ sidebar races maybeUser wtosLoginUrl =
         , ul [ class "menu-list" ] (List.map raceLi <| lastRaces races)
         , p [ class "menu-label" ] [ a [ href "/riders" ] [ text "Riders" ] ]
         , userUl maybeUser wtosLoginUrl
+        , p [ class "menu-label" ] [ a [ href "https://uitslagen.wtos.nl/2023/", target "_blank" ] [ text "Uitslagen 2023" ] ]
         , p [ class "menu-label" ] [ a [ href "https://uitslagen.wtos.nl/2022/", target "_blank" ] [ text "Uitslagen 2022" ] ]
         , p [ class "menu-label" ] [ a [ href "https://uitslagen.wtos.nl/2021/", target "_blank" ] [ text "Uitslagen 2021" ] ]
         , p [ class "menu-label" ] [ a [ href "https://uitslagen.wtos.nl/2020/", target "_blank" ] [ text "Uitslagen 2020" ] ]

diff --git a/src/index.js b/src/index.js
@@ -54,7 +54,7 @@
       .orderByChild("id")
       .on("value", function(snapshot) {
         const val = snapshot.val();
-        const arr = val
+        const riders = val
           ? Object.keys(val).map(function(key) {
               return Object.assign(
                 {
@@ -66,7 +66,7 @@
           : [];
         app.ports.infoForElm.send({
           tag: "RidersLoaded",
-          data: arr
+          data: riders
         });
       });
   }
@@ -105,7 +105,7 @@
       .ref("/results/")
       .on("value", function(snapshot) {
         const val = snapshot.val();
-        const arr = val
+        const results = val
           ? Object.keys(val).map(function(key) {
               return Object.assign(
                 {
@@ -117,7 +117,7 @@
           : [];
         app.ports.infoForElm.send({
           tag: "ResultsLoaded",
-          data: arr
+          data: results
         });
       });
   }