refactor part2

tkmoties · Dec 31, 2023 · e59c170 · e59c170
1 parent b245452
commit e59c170
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 268 deletions.
diff --git a/.github/workflows/jekyll.yml b/.github/workflows/jekyll.yml
@@ -39,9 +39,15 @@ jobs:
           ruby-version: '3.1' # Not needed with a .ruby-version file
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically
           cache-version: 0 # Increment this number if you need to re-download cached gems
+      - name: Setup Nodejs
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v4
+      - name: Pull in all data from https://gegevensmagazijn.tweedekamer.nl/OData/v4/2.0/
+        run: ./motie-cache.sh
       - name: Build with Jekyll
         # Outputs to the './_site' directory by default
         run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"

diff --git a/.gitignore b/.gitignore
@@ -6,5 +6,5 @@ _site
 vendor
 node_modules
 
-moties/**/moties/
+moties/
 _data/moties/
diff --git a/_includes/motie-year.html b/_includes/motie-year.html
@@ -1,23 +1,20 @@
-<!doctype html>
-<html lang="en" data-bs-theme="dark">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Moties met stemmingen van de Tweede Kamer {{ page.jaar }}</title>
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-  <link rel="stylesheet" href="/assets/css/styles.css">
-  <script>var moties = [];</script>
-</head>
 <body>
 
 <div id="progressMoties" class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
   <div class="progress-bar" style="width: 0%;"></div>
 </div>
 
-<div id="moties" class="container">
-
+<div id="main" class="container">
+
+<h1>Moties met stemmingen van de Tweede Kamer in {{ year }}</h1>
+
+<p>Een overzicht van alle moties waarover gestemd is in de Tweede Kamer in {{ year }}.</p>
+
+{% if site.data.moties[year] != null %}
+
 {% assign motiesSorted = site.data.moties[year] | group_by_exp: "motie", "motie[1].Zaak[0].GestartOp | slice: 0,10" | sort: "name" | reverse %}
 
+<div id="moties">
 {% assign previousDate = "" %}
 {% for motieDateGroup in motiesSorted %}
   {% assign currentDate = motieDateGroup.name %}
@@ -35,54 +32,33 @@
         <a href="#">{% include symbol-down1.html %}</a>
       </div>
     </div>
-    {% for kv in motieDateGroup.items %}
-      {% assign currentId = kv[0] %}
-      {% assign motie = kv[1] %}
-      <script>moties.push({"date": "{{currentDate}}", "Id": "{{kv[0]}}"});</script>
-    {% endfor %}
   </div>
-
+  {% for kv in motieDateGroup.items %}
+    {% assign currentId = kv[0] %}
+    <div motieId="{{ currentId }}" year="{{ year }}" class="motie-placeholder"></div>
+  {% endfor %}
   {% assign previousDate = currentDate %}
 {% endfor %}
+</div>
+
+{% endif %}
 
+<footer>
+  <small>
+    <a href="https://opendata.tweedekamer.nl/documentatie/odata-api">data sources</a>
+    <a href="https://github.com/tkmoties/tkmoties.github.io">page sources</a>
+  </small>
+</footer>
 </div>
 </body>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"/></script>
-
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 
+{% if site.data.moties[year] != null %}
+<script src="/assets/js/load-moties.js"></script>
 <script>
 window.addEventListener('load', function () {
-  (async() => {
-    const dateSeparators = document.querySelectorAll('.date-separator');
-    dateSeparators[0].parentNode.childNodes[1].childNodes[1].href = '#';
-    for (var idx = 0; idx < dateSeparators.length - 1; idx += 1) {
-      dateSeparators[idx].parentNode.childNodes[5].childNodes[1].href = dateSeparators[idx+1].childNodes[1].href;
-    }
-
-    let motieCounter = 0;
-    await moties.forEach(motie => {
-      fetch(`http://localhost:4000/moties/{{ year }}/moties/${motie.Id}.html`)
-      .then(response => {
-        if (response.status != 200) {
-          console.log(response)
-        }
-        return response;
-      })
-      .then(response => response.text())
-      .then(response => {
-        document.querySelector(`#date-${motie.date}`)
-        .insertAdjacentHTML('beforeend', response);
-        motieCounter += 1;
-        document.querySelector('#progressMoties')
-        .childNodes[1].style.width = `${100 * motieCounter / moties.length}%`;
-
-        if (motieCounter === moties.length) {
-          document.querySelector('#progressMoties').hidden = true;
-        }
-      })
-    });
-  })();
+  fixDateseparators();
+  loadMoties();
 });
-
 </script>
-</html>
+{% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en" data-bs-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Moties met stemmingen van de Tweede Kamer</title>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <link rel="stylesheet" href="/assets/css/styles.css">
+</head>
+{{ content }}
+</html>
diff --git a/_templates/year-index-front.html b/_templates/year-index-front.html
@@ -0,0 +1,8 @@
+---
+layout: default
+redirect_from: /
+---
+
+{% assign year = page.path | split: "/" | slice: 1 | append: "" | slice: 2,4 %}
+
+{% include motie-year.html %}
diff --git a/_templates/year-index.html b/_templates/year-index.html
@@ -1,4 +1,5 @@
 ---
+layout: default
 ---
 
 {% assign year = page.path | split: "/" | slice: 1 | append: "" | slice: 2,4 %}

diff --git a/assets/js/load-moties.js b/assets/js/load-moties.js
@@ -0,0 +1,30 @@
+async function fixDateseparators() {
+  const dateSeparators = document.querySelectorAll('.date-separator');
+  dateSeparators[0].parentNode.childNodes[1].childNodes[1].href = '#';
+  for (var idx = 0; idx < dateSeparators.length - 1; idx += 1) {
+    dateSeparators[idx].parentNode.childNodes[5].childNodes[1].href = dateSeparators[idx+1].childNodes[1].href;
+  }
+}
+
+async function loadMoties() {
+  let motieCounter = 0;
+  let moties = [...document.querySelectorAll('.motie-placeholder')];
+  moties.forEach(elem => {
+    const year = elem.getAttribute('year');
+    const Id = elem.getAttribute('motieId');
+    fetch(`http://localhost:4000/moties/${year}/moties/${Id}.html`)
+    .then(response => {
+      if (response.status != 200) {
+        console.log(response)
+      }
+      return response;
+    })
+    .then(response => response.text())
+    .then(response => {
+      motieCounter += 1;
+      elem.insertAdjacentHTML('beforeend', response);
+      document.querySelector('#progressMoties').children[0]
+      .style.width = `${100 * motieCounter / moties.length}%`;
+    })
+  });
+};
diff --git a/get-last-api-timestamp.js b/get-last-api-timestamp.js
diff --git a/motie-cache.sh b/motie-cache.sh
@@ -1,8 +1,14 @@
+echo "Set up dirs"
+
+mkdir -p _data/moties/
+
 for year in $(seq 2007 2024); do 
   mkdir -p moties/$year/moties;
   cp _templates/year-index.html moties/$year/index.html; 
 done
 
+cp _templates/year-index-front.html moties/2023/index.html; 
+
 echo "Start caching from https://gegevensmagazijn.tweedekamer.nl/OData/v4/2.0"
 
-node motie-cache2.js
+node motie-cache2.js 10
diff --git a/motie-cache2.js b/motie-cache2.js
@@ -3,14 +3,20 @@
   - Create a page in moties/{year}/{id}.html
  */
 
-
 var fs = require('fs');
 
+const topVal = process.argv[2];
+let top = ''
+if (typeof topVal !== 'undefined') {
+  top = `&$top=${topVal}`;
+}
+
 const urlApi = 'https://gegevensmagazijn.tweedekamer.nl/OData/v4/2.0';
 
 const motieQuery = `
 Besluit?
 &$orderby=ApiGewijzigdOp desc
+${top}
 &$count=true
 &$expand=Zaak(
   $expand=ZaakActor(