From a9b4d575e7ea50cd238d3019222a22f40529974d Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 22 Jul 2022 12:16:51 +0200
Subject: [PATCH] Add Kurse

---
 content/kurse.json           | 10 +++++++++
 src/css/sections/meetups.css |  3 ++-
 src/includes/template.pug    |  1 +
 src/kurse.pug                | 42 ++++++++++++++++++++++++++++++++++++
 src/meetups.pug              |  8 -------
 static/js/main.js            | 11 ++++++++++
 tasks/generate_pages.js      |  3 ++-
 7 files changed, 68 insertions(+), 10 deletions(-)
 create mode 100644 content/kurse.json
 create mode 100644 src/kurse.pug

diff --git a/content/kurse.json b/content/kurse.json
new file mode 100644
index 00000000000..3158bd350a1
--- /dev/null
+++ b/content/kurse.json
@@ -0,0 +1,10 @@
+[
+  {
+    "name": "VHS-Kurs Trading im Turm, Kempten",
+    "url": "https://t.me/EinundzwanzigKempten",
+    "top": 77,
+    "left": 41,
+    "country": "DE",
+    "state": ["Bayern"]
+  }
+]
diff --git a/src/css/sections/meetups.css b/src/css/sections/meetups.css
index 9a4bfd72b2a..f41775a0557 100644
--- a/src/css/sections/meetups.css
+++ b/src/css/sections/meetups.css
@@ -4,7 +4,8 @@
   3% { transform: scale(.75);  }
 }
 
-#meetups {
+#meetups,
+#kurse {
   & #map {
     @media (--up_to_L) {
       margin-top: var(--space-xl);
diff --git a/src/includes/template.pug b/src/includes/template.pug
index d470bd6833e..a0c1fc816ca 100644
--- a/src/includes/template.pug
+++ b/src/includes/template.pug
@@ -27,6 +27,7 @@ html(lang="en")
               .more
                 a(href="/meetups/" class=(navCurrent === 'meetups' && 'current')) Meetups
                 a(href="/events/" class=(navCurrent === 'events' && 'current')) Events
+                a(href="/kurse/" class=(navCurrent === 'kurse' && 'current')) Kurse
                 a(href="/spenden/" class=(navCurrent === 'spenden' && 'current')) Spenden
                 a(href="/telegram/" class=(navCurrent === 'telegram' && 'current')) Telegram
                 a(href="/shops/" class=(navCurrent === 'shops' && 'current')) Shops
diff --git a/src/kurse.pug b/src/kurse.pug
new file mode 100644
index 00000000000..e398ed4aa49
--- /dev/null
+++ b/src/kurse.pug
@@ -0,0 +1,42 @@
+extends /template.pug
+
+block vars
+  - const title = 'Bitcoin-Kurse'
+  - const description = 'Eine Liste von Bitcoin-Kursen und Lehrveranstaltungen im D/A/CH-Raum.'
+  - const filterUnmapped = (list) => list.filter(kurs => !kurs.top || !kurs.left)
+  - const unmapped = filterUnmapped(kurse)
+  - const style = m => m.top && m.left ? `top:${m.top}%;left:${m.left}%;` : null
+  - const clss = m => m.top && m.left ? null : 'unmapped'
+  - let j = 0
+
+block main
+  #kurse.wrap
+    section
+      h1= title
+      p= description
+
+      :markdown-it(html linkify typographer)
+        Neue Kurse können gerne [per Pull Request](https://github.com/Einundzwanzig-Podcast/einundzwanzig.space/edit/master/content/kurse.json) hinzugefügt werden.
+        Hier gibt es ein [Video-Tutorial](https://www.youtube.com/watch?v=BNJc9LExEzU), wie ein neuer Pull Request erstellt werden kann.
+        Die Werte für `top/left` geben prozentual die Position des Ortes auf der Karte an.
+
+      #map
+        h2 Lehrveranstaltungen im D/A/CH-Raum
+        ul.kurse
+          each m in kurse
+            li.official(class=clss(m) style=style(m))
+              a(href=m.url target="_blank" rel="nofollow noopener")
+                .dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${kurse.length*2}s;`)
+                = m.name
+              - j++
+
+        img#dach(src=assetPath('/img/dach.svg') alt="DE, AT, CH")
+
+      if unmapped.length
+        #unmapped
+          h2 Weitere Kurse
+          ul.kurse
+            each m in unmapped
+              li(class=clss(m) style=style(m))
+                a(href=m.url target="_blank" rel="nofollow noopener")
+                  = m.name
diff --git a/src/meetups.pug b/src/meetups.pug
index bd870c534ec..34a86db0780 100644
--- a/src/meetups.pug
+++ b/src/meetups.pug
@@ -64,11 +64,3 @@ block main
               if m.members
                 = ' '
                 small.members= `(${m.members})`
-
-  script.
-    document.getElementById('dach').onclick = e => {
-      console.log({
-        top: Math.round(e.offsetY / e.target.height * 100) - 2,
-        left: Math.round(e.offsetX / e.target.width * 100) + 1
-      })
-    }
diff --git a/static/js/main.js b/static/js/main.js
index 99be6d95955..aa4e2e188f4 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -107,4 +107,15 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     })
   })
+
+  // Map
+  const map = document.getElementById('dach')
+  if (map) {
+    map.onclick = e => {
+      console.log({
+        top: Math.round((e.offsetY / e.target.height) * 100) - 2,
+        left: Math.round((e.offsetX / e.target.width) * 100) + 1,
+      })
+    }
+  }
 })
diff --git a/tasks/generate_pages.js b/tasks/generate_pages.js
index 19b0ebf04a3..4b2db978a4e 100644
--- a/tasks/generate_pages.js
+++ b/tasks/generate_pages.js
@@ -8,7 +8,7 @@ const episodes = require('../generated/episodes.json')
 const spendenregister = require('../generated/spendenregister.json')
 const spendenuebersicht = require('../content/spendenuebersicht.json')
 const team = require('../content/team.json')
-const telegram = require('../content/telegram.json')
+const kurse = require('../content/kurse.json')
 const shops = require('../content/shops.json')
 const soundboard = require('../content/soundboard.json')
 const adventskalender = require('../content/adventskalender.json')
@@ -34,6 +34,7 @@ renderPage('index', 'index', { navCurrent: 'index', currentEpisode: episodes[0]
 renderPage('podcast', 'podcast', { navCurrent: 'podcast', episodes: [...episodes] })
 renderPage('team', 'team', { navCurrent: 'team', team })
 renderPage('meetups', 'meetups', { navCurrent: 'meetups', meetups: meetupsSorted })
+renderPage('kurse', 'kurse', { navCurrent: 'kurse', kurse })
 renderPage('spenden', 'spenden', { navCurrent: 'spenden', spendenregister, spendenuebersicht })
 renderPage('media', 'media', { navCurrent: 'media' })
 renderPage('soundboard', 'soundboard', { navCurrent: 'soundboard', soundboard })