only-one-collection-with-data-instead-of-several-for-each-cat

tik9 · Dec 26, 2023 · 1788383 · 1788383
1 parent 037bee6
commit 1788383
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 182 deletions.
diff --git a/README.md b/README.md
@@ -7,24 +7,24 @@
 
 ### Steps to reach Goal
 
-- Started with Node js and Express using [Heroku](https://tik9.herokuapp.com)
+- Started with Node js and Express
 - Single Page App
-- Now: Hugo
 
 <br>
 
 ### Tools needed while making the site
 
 - Html, Markdown and CSS
 - Javascript
-- Hugo
+- Mongo db, a document data base
 
 <br>
 
 ### Contents
 
 - [Overview](/)
 - [Contact](/contact)
+- [Imprint](/imprint)
 
 <br>
 
@@ -35,11 +35,4 @@
 | Js   | async/await           |
 | hugo | static site generator |
 <br>
-
-### To Do
-
- | page  | to do                                                            | done |
- | ----- | ---------------------------------------------------------------- |
- | menu  | menu for smartphone with three horizontal lines - hamburger menu |
- | debug | debug env for smartphone on localhost                            |
 
diff --git a/layouts/contact/single.html b/layouts/contact/single.html
@@ -1,6 +1,6 @@
 {{ partial "head.html" }}
 <div id="contact">
-    <h3 style="margin-bottom: 20px;">Kontakt Timo's Nachhilfe</h3>
+    <h3 style="margin-top: 130px;margin-bottom: 30px;">Kontakt</h3>
 
     {{.Content}}
 

diff --git a/layouts/imprint/single.html b/layouts/imprint/single.html
@@ -1,6 +1,7 @@
 {{ partial "head.html" }}
-<div id="imprint">
-    <h3 style="margin-bottom: 20px">Impressum Timo's Nachhilfe</h3>
+<div id="imprint" style="margin-bottom: 100px;">
+    <h3 style="margin-top: 130px;margin-bottom: 30px">Imprint</h3>
+
     {{.Content}}
 
     {{ partial "foot.html" }}
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,20 +1,16 @@
+<html>
 {{ partial "head.html" }}
 
 <h2
-    style="font-size: 5rem; color: #fef6e4; text-shadow: 5px 5px 0px #172c66, 10px 10px 0px #001858, 15px 15px 0px #f9bc60,20px 20px 0px #ff8e3c, 25px 25px 0px #9656a1;">
-    Timo's Nachhilfe</h2>
+    style="margin-bottom: 50px; font-size: 5rem; color: #fef6e4; text-shadow: 5px 5px 0px #172c66, 10px 10px 0px #001858, 15px 15px 0px #f9bc60,20px 20px 0px #ff8e3c, 25px 25px 0px #9656a1;">
+    Online math classes</h2>
 
-<div id="about" style="margin-top: 40px;">
-    Online Nachhilfe mit folgenden Tools:<br>
-    Google Meet<br>
-    kollaborative Whiteboards <br><br>
 
-    Meine Qualifikation:<br>
-    BWL Studium - Abschluss Dipl.-Kfm. Univ.<br>
-    Auslandssemester in Spanien<br>
-    Erfahrung mit Online - Nachhilfe
+{{ partial "foot.html" }}
 
-    {{ partial "foot.html" }}
+<script>
+    // console.log(0)
+</script>
+<script src=/client.js></script>
 
-    <script src=/table.js></script>
-    <script src=/index.js></script>
+</html>
diff --git a/layouts/partials/foot.html b/layouts/partials/foot.html
@@ -1,9 +1,9 @@
-
 </div>
 <div id=bottomnav></div>
 </div>
 
-<script src=/client.js></script>
-</body>
+<script>
 
-</html>
+    // console.log(123)
+</script>
+<script src="/nav.js"></script>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -1,14 +1,17 @@
-<html>
-
 <head>
     <link href="/favicon.png" rel="icon">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0/css/bootstrap.min.css"
         rel="stylesheet" />
     <link href="/style.css" rel="stylesheet">
-
+    <script>
+        // console.log('head')
+    </script>
 </head>
 
 <body>
     <div id=container class="container">
-        <div class="nav" id="topnav">
+        <div id="topnav">
+            <h4 class="mt-5 mb-3" style="color: white;">
+                Timo' s online classes
+            </h4>
         </div>
diff --git a/static/client.js b/static/client.js
@@ -1,47 +1,88 @@
 
-var cdn = 'https://cdnjs.cloudflare.com/ajax/libs/'
-var tiko = "Tiko's"
-
 document.title = tiko
 document.body.style.paddingTop = '90px'
 container.style.paddingBottom = '80px'
 
-async function client(topic = 'index') {
-    var topicUp = topic[0].toUpperCase() + topic.slice(1)
-    var elem = document.createElement('div')
-    container.append(elem)
-    elem.id = topic
-
-    var hIntro = document.createElement("h4");
-    hIntro.classList.add('mt-5', 'mb-3');
-    hIntro.innerHTML = topicUp
-    elem.prepend(hIntro)
-    var aHref = document.createElement("a");
-    aHref.textContent = topicUp
-    aHref.classList.add('nav')
-    aHref.href = '#' + topic
-    topnav.append(aHref)
-    if (topic === 'index') {
-        aHref.classList.add('active')
-        aHref.href = '#container'
+var net_host = 'http://localhost'
+var net_host = 'https://tifun.netlify.app'
+var net_fun = '/.netlify/functions/'
+
+data()
+async function data() {
+    var data = 'data'
+    var res = (await (await fetch(net_host + net_fun + 'mongo?op=find&coll=' + data)).json());
+    res = await (await (fetch(net_host + net_fun + 'utils', { method: 'post', body: JSON.stringify({ type: 'sortTable', val: res, sort1: 'cat', sort2: 'text' }) }))).json();
+
+    var main_div = document.createElement('div')
+    main_div.id = data
+    container.append(main_div)
+    var list = document.createElement('ul')
+    main_div.append(list)
+
+    // res = [        { text: 'Alice', cat: 21 },{ text: 'Max', cat: 20 },{ text: 'Jane', cat: 20 },{ text: 'Jane2', cat: 20 },{ text: 'Jane3', cat: 22 },];
+
+    function groupBy(objectArray, property) {
+        return objectArray.reduce(function (acc, obj) {
+            var key = obj[property];
+            if (!acc[key]) {
+                acc[key] = [];
+            }
+            acc[key].push(obj);
+            return acc;
+        }, {});
+    }
+
+    res = groupBy(res, 'cat');
+    // console.log(res)
+
+    for (var elem in res) {
+        var head = document.createElement('h5')
+        head.textContent = elem
+        head.style.marginTop = '40px'
+        list.append(head)
+        for (var elem2 of res[elem]) {
+            var li = document.createElement('li')
+            li.textContent = elem2.text
+            list.append(li)
+        }
     }
-    return elem
 }
 
-nav()
-function nav() {
-    var aref = document.createElement("a");
-    topnav.classList.add('fixed-top', 'bg-dark')
-    bottomnav.classList.add('fixed-bottom', 'bg-dark')
-    aref.textContent = tiko;
-    aref.href = '/'
-    aref.classList.add('active', 'nav')
-    bottomnav.append(aref)
-    for (var elem of ["contact", 'imprint']) {
-        var ahref = document.createElement("a");
-        ahref.href = '/' + elem;
-        ahref.textContent = elem[0].toUpperCase() + elem.slice(1)
-        ahref.classList.add('nav')
-        bottomnav.append(ahref)
+
+function table(arr) {
+    var excludes = ['_id', '__v', 'cat', 'name', 'url']
+    var table_ = document.createElement('table')
+    var thead = document.createElement('thead')
+    var tr = document.createElement('tr')
+    thead.appendChild(tr)
+    var columns = []
+    for (var elem of arr) {
+        for (var key in elem) {
+            if (excludes.includes(key)) continue
+            if (elem.hasOwnProperty(key) && !columns.includes(key)) {
+                columns.push(key);
+                var th = document.createElement('th')
+                th.appendChild(document.createTextNode(key[0].toUpperCase() + key.slice(1)));
+                tr.appendChild(th);
+            }
+        }
+    }
+    table_.appendChild(thead);
+    var tbody = document.createElement('tbody');
+    for (var elem of arr) {
+        var tr = document.createElement('tr')
+
+        for (var elem2 of columns) {
+            var val = elem[elem2]
+            var td = document.createElement('td');
+
+
+            td.innerHTML = val
+            tr.appendChild(td);
+        }
+        tbody.appendChild(tr)
     }
+    table_.appendChild(tbody);
+    table_.classList.add('table', 'table-bordered', 'table-striped')
+    return table_;
 }
diff --git a/static/index.js b/static/index.js
diff --git a/static/nav.js b/static/nav.js
@@ -0,0 +1,26 @@
+
+// console.log(4)
+
+var tiko = "Tiko's"
+
+var aref = document.createElement("a");
+
+// var test = document.createElement("a");
+// test.classList.add('focus')
+// test.textContent = 'test'
+// test.href = '/'
+// bottomnav.append(test)
+
+topnav.classList.add('fixed-top', 'bg-dark')
+bottomnav.classList.add('fixed-bottom', 'bg-dark')
+aref.textContent = tiko;
+aref.href = '/'
+aref.classList.add('active')
+bottomnav.append(aref)
+for (var elem of ["contact", 'imprint']) {
+    var ahref = document.createElement("a");
+    ahref.href = '/' + elem;
+    ahref.textContent = elem[0].toUpperCase() + elem.slice(1)
+    ahref.classList.add('nav')
+    bottomnav.append(ahref)
+}
diff --git a/static/style.css b/static/style.css
@@ -1,3 +1,7 @@
+.focus:focus {
+    color: wheat;
+}
+
 /* Style the links inside the navigation bar */
 #topnav a,
 #bottomnav a {
@@ -23,17 +27,9 @@ a.active {
 
 @media screen and (max-width: 650px) {
     .nav {
-        /* a:not(:first-child), */
-        /* .nav a:not(:last-child) { */
-        /* display: none; */
         background-color: transparent;
     }
 
-    /* .icon {
-        float: right;
-        display: block;
-    } */
-
     .nav.responsive {
         position: relative;
     }