Merge pull request #62 from rdmorganiser/roadmap

Roadmap

Roadmap.md

@@ -0,0 +1 @@
+

_data/navigation.yml

@@ -11,6 +11,10 @@
       label:
         de: Veranstaltungen
         en: Events
+    - key: roadmap
+      label:
+        de: Roadmap
+        en: Roadmap
 
 - key: rdmo-arge
   label:

_data/pages.yml

@@ -1,4 +1,5 @@
-index:
+---
+index:
   path:
     de:
     en: en/
@@ -26,7 +27,7 @@ rdmo-arge:
   path:
     de: Community
     en: en/Community
-    
+
 docu_user:
   label:
     de: für Nutzer:innen
@@ -58,7 +59,7 @@ rdmo-begin:
   path:
     de: Historie
     en: en/History
-  
+
 more:
   label:
     de: Weiteres
@@ -67,5 +68,16 @@ more:
     de: More
     en: en/More
 
+roadmap:
+  label:
+    de: Roadmap
+    en: Roadmap
+  path:
+    de: roadmap
+    en: en/roadmap
+
+
+
+
 
 

_includes/roadmap.html

@@ -0,0 +1,6 @@
+<link rel="stylesheet" href="/css/roadmap.css">
+<div id="milestones"></div>
+<script src="/js/roadmap.js"></script>
+<script>
+    render_milestones()
+</script>

css/roadmap.css

@@ -0,0 +1,61 @@
+#milestones .fl {
+	float: left;
+	margin-right: 20px;
+}
+
+#milestones .fl:last-child:after {
+	margin-right: 4px;
+}
+
+.milestone {
+	display: inline-block;
+	width: 100%;
+	border: 1px solid #ccc;
+	margin: 20px 0px;
+	padding: 15px;
+}
+
+.milestone .header {
+	display: flex;
+	width: 100%
+}
+
+.milestone .header h2 {
+	float: left;
+	margin: 0 10px 10px 0;
+}
+
+.milestone .header h3 {
+	margin: 5px;
+}
+
+.milestone span {
+	margin-right: 20px;
+}
+
+.milestone-title-link {
+	margin-top: 0px;
+}
+
+.milestone-stats {
+	float: right;
+}
+
+.milestone-meta {
+	float: left;
+}
+
+.milestone-meta div:first-of-type {
+	margin-left: 5px;
+}
+
+
+.milestone-meta .fl {
+	float: left;
+	margin: 0px 20px 0px 0px;
+}
+
+.milestone-stats div:last-of-type {
+	float: right;
+	margin-right: 5px;
+}

en/roadmap.md

@@ -0,0 +1,11 @@
+---
+layout: page
+lang: en
+key: roadmap
+---
+
+# Roadmap
+
+The further development of RDMO is based on a roadmap agreed by the RDMO community. The individual releases are organised via milestones and issues on GitHub. We are currently working on the following releases:
+
+{% include roadmap.html %}

js/roadmap.js

@@ -0,0 +1,69 @@
+async function fetch_json(url) {
+  let response = await fetch(url)
+  let data = await response.json()
+  return data
+}
+
+function render_milestones() {
+  var api_url = 'https://api.github.com/repos/rdmorganiser/rdmo/milestones'
+  var milestones = $('#milestones')
+  fetch_json(api_url)
+    .then(res => {
+      res.sort((a, b) => parseFloat(a.updated_at) - parseFloat(b.updated_at))
+      return res
+    })
+    .then(res => {
+      res.forEach(function (el) {
+        milestones.append('<div class="milestone ' + el.id + '"></div>')
+        var sel = '.milestone' + '.' + el.id
+        var milestone = $(sel)
+
+        var html = '<div class="header">'
+        html += '<h2>' + el.title + '</h2>'
+        html += '<h3>(' + el.state + ')</h3>'
+        html += '</div>'
+        // var html = '<h2 class="milestone-title-link fl"><a href="' + el.html_url + '" target=_blank>' + el.title +
+        //   '</a></h2>'
+        html += '<div class="milestone-meta">'
+        html += '<div class="fl">' + time_diff('due by', el.due_on, '', 'no due date') + '</div>'
+        html += '<div class="fl">' + time_diff('updated', el.updated_at, 'ago', '') + '</div>'
+        html += '</div>'
+        html += '<div class="milestone-stats fr">'
+        html += '<div class="fl">open issues ' + el.open_issues + '</div>'
+        html += '<div>closed issues ' + el.closed_issues + '</div>'
+        html += '</div>'
+        html += '</div>'
+        milestone.append(html)
+      })
+    }).catch(error => {
+      milestones.append('<br>The roadmap is currently not available. Please try again later.')
+      console.error('[error] ' + error)
+    })
+}
+
+function time_diff(pref, dat, postf, defr) {
+  if (dat === null) {
+    return defr
+  }
+  var date1 = new Date(dat)
+  var date2 = new Date()
+  if (!(date1 instanceof Date && date2 instanceof Date)) {
+    throw new RangeError('Invalid date arguments')
+  }
+
+  const timeIntervals = [31536000, 2628000, 604800, 86400, 3600, 60, 1]
+  const intervalNames = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second']
+
+  const diff = Math.abs(date2.getTime() - date1.getTime()) / 1000
+  const index = timeIntervals.findIndex(i => (diff / i) >= 1)
+  const n = Math.floor(diff / timeIntervals[index])
+  const interval = intervalNames[index]
+  return pref + ' ' + localize(n, interval) + ' ' + postf
+}
+
+function localize(value, str) {
+  if (value != 1) {
+    str += 's'
+  }
+  return `${value} ${str}`
+}

roadmap.md

@@ -0,0 +1,11 @@
+---
+layout: page
+lang: de
+key: roadmap
+---
+
+# Roadmap
+
+Die Weiterentwicklung von RDMO erfolgt anhand einer von der RDMO Community beschlossenen Roadmap. Die einzelnen Releases werden über Milestones und Issues auf GitHub organisiert. Derzeit arbeiten wir an den folgenden Releases:
+
+{% include roadmap.html %}