add side boxes

themes/hugo-theme-flat/layouts/_default/baseof.html

@@ -17,6 +17,9 @@
                 {{ partial "side-categories.html" . }}
                 {{ partial "side-tags.html" . }}
                 */}}
+                {{ partial "side-contact.html" . }}
+                {{ partial "side-calendar.html" . }}
+                {{ partial "side-door-status.html" . }}
             </div>
         </main>
         {{ partial "footer.html" . }}

themes/hugo-theme-flat/layouts/partials/head.html

@@ -77,4 +77,7 @@
 <link rel="stylesheet" href="{{ "css/syntax.css" | relURL }}" />
 <link rel="stylesheet" href="{{ "css/style.css" | relURL }}" />
 <link rel="shortcut icon" href="{{ "images/favicon.ico" | relURL }}" type="image/x-icon" />
-<script src="/js/layout.js"></script>
+<script src="/js/jquery-3.7.1.min.js"></script>
+<script src="/js/layout.js"></script>
+<script src="/js/door-status.js"></script>
+<script src="/js/calendar.js"></script>

themes/hugo-theme-flat/layouts/partials/side-calendar.html

@@ -0,0 +1,7 @@
+<div class="side-calendar">
+    <h2>Termine</h2>
+    <ul id="calendar"></ul>
+
+
+
+</div>

themes/hugo-theme-flat/layouts/partials/side-contact.html

@@ -0,0 +1,20 @@
+<div class="side-contact">
+    <h2>Kontakt</h2>
+
+
+    <ul>
+            <li>
+                kontakt@c3re.de
+            </li>
+        <li>
+                <a href="https://matrix.to/#/#hackerhuette:matrix.c3re.de">Matrix Chat</a>
+        </li>
+        <li>
+            <a href="https://chaos.social/@c3re">Mastodon</a>
+        </li>
+        <li>
+            <a href="https://github.com/orgs/c3re">Github</a>
+        </li>
+
+    </ul>
+</div>

themes/hugo-theme-flat/layouts/partials/side-door-status.html

@@ -0,0 +1,9 @@
+<div class="side-door-status">
+    <h2>Doorstatus</h2>
+
+
+    <p><img src="" id="ds-img"></p>
+    <p>Aktueller Status: <span id="ds-status"></span></p>
+    <p>Status vom: <span id="ds-date"></span></p>
+    <p>Temperatur Clubraum: <span id="ds-temp"></span></p>
+</div>

themes/hugo-theme-flat/static/css/style.css

@@ -161,7 +161,10 @@ body {
 .main,
 .side-recent,
 .side-categories,
-.side-tags
+.side-tags,
+.side-calendar,
+.side-door-status,
+.side-contact
 {
   background-color: var(--color-bg-content);
 }
@@ -178,6 +181,9 @@ body {
   margin-bottom: 0;
 }
 
+#calendar span{
+  display: block;
+}
 
 /********** set up break point **********/
 
@@ -380,7 +386,7 @@ body {
 .side a:hover { color: var(--color-fg-hyperlink); }
 
 /* horizontally place tags */
-.side .side-tags li { display: inline-block; margin: var(--len-1) var(--len-1); }
+.side .side-tags li {  margin: var(--len-1) var(--len-1); }
 
 /*****************************/
 /* set up single post layout */
@@ -715,3 +721,8 @@ body {
   padding: 0;
   margin: 0;
 }
+
+#ds-img{
+  /* make image fit in div */
+    width: 100%;
+}

themes/hugo-theme-flat/static/js/calendar.js

@@ -0,0 +1,54 @@
+document.addEventListener("DOMContentLoaded", function() {
+
+    let url="https://ical2json.c3re.de/api/?url=https%3A%2F%2Fcloud.c3re.de%2Fremote.php%2Fdav%2Fpublic-calendars%2FRLKKkdjNYgXH8yEz%3Fexport&start=today&end=next+month&maxitems=10"
+let xmlHttp = new XMLHttpRequest();
+let zeropad=function(i){
+    let o=""
+    if(i<=9) o+="0"
+    o+=i
+    return o
+}
+xmlHttp.onreadystatechange = function() {
+    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
+        let cal=JSON.parse(xmlHttp.responseText)
+        let $ = jQuery
+        let box=$('#calendar')
+        for(let item of cal){
+            let li=$("<li/>")
+            //li.text(item.summary)
+            let startDate=new Date(item.start * 1000)
+            let date=$("<span class='date'/>")
+            date.text(zeropad(startDate.getDate())+'.'+zeropad(1+startDate.getMonth())+'.'+startDate.getFullYear()+' - '+zeropad(startDate.getHours())+':'+zeropad(startDate.getMinutes()))
+            date.appendTo(li)
+            let summary=$("<span class='summary'/>")
+            summary.text(item.summary)
+            if(item.url){
+                let a = $('<a/>')
+                a.attr('href',item.url)
+                a.attr('title',item.description)
+                a.append(summary)
+                a.appendTo(li)
+            }else{
+                summary.appendTo(li)
+            }
+            if(item.location){
+                let loc=$("<span class='location'>📍</span>")
+
+                loc.attr('data-loc',item.location)
+                loc.attr('title',"Click to copy: "+item.location)
+                loc.appendTo(li)
+            }
+
+            li.attr('title',item.description)
+            li.appendTo(box)
+            console.log(item)
+        }
+        $(".location",box).click(function(){
+            navigator.clipboard.writeText($(this).attr('data-loc'))
+        })
+    }
+}
+xmlHttp.open("GET", url, true); // true for asynchronous
+xmlHttp.send();
+
+});

themes/hugo-theme-flat/static/js/door-status.js

@@ -0,0 +1,22 @@
+
+document.addEventListener("DOMContentLoaded", function() {
+    const update=function(){
+        fetch("https://spaceapi.c3re.de/").then(function(response) {
+            return( response.json());
+        }).then(function(data) {
+            console.log(data)
+            document.getElementById("ds-img").setAttribute("src",data.state.open?data.state.icon.open:data.state.icon.closed);
+            document.getElementById("ds-status").innerHTML=data.state.open?"Geöffnet":"Geschlossen";
+
+            document.getElementById("ds-temp").innerHTML=""+data.sensors.temperature[0].value+data.sensors.temperature[0].unit;
+            const lastchange=new Date(data.state.lastchange*1000)
+            document.getElementById('ds-date').innerHTML=lastchange.getDate().toString().padStart(2, "0")     + "."
+                + (lastchange.getMonth()+1).toString().padStart(2, "0") + "."
+                + lastchange.getFullYear()  + " "
+                + lastchange.getHours().toString().padStart(2, "0")     + ":"
+                + lastchange.getMinutes().toString().padStart(2, "0")
+        })
+    }
+    update();
+    setInterval(update,10000);
+});

themes/hugo-theme-flat/static/js/layout.js

@@ -5,6 +5,5 @@ document.querySelectorAll('a[href^="http"]').forEach(function(element) {
     const linkhost=new URL(element.href).hostname;
     if(myhost === linkhost) return;
     element.setAttribute("target","_blank");
-console.log(element.attributes)
 })
 });