add created pads to kits root page

src/static/js/index.js

@@ -44,15 +44,22 @@ $(() => {
   $('#go2Name').on('submit', () => {
     const padname = $('#padname').val();
     if (padname.length > 0) {
-      window.location = `p/${encodeURIComponent(padname.trim())}`;
+      const padName = encodeURIComponent(padname.trim());
+      window.location = `p/${padName}`;
     } else {
       alert('Please enter a name');
     }
     return false;
   });
 
   $('#button').on('click', () => {
-    window.location = `p/${randomPadName()}`;
+    const padName = randomPadName();
+    const json = window.localStorage.getItem('pads');
+
+    const pads = (json && json !== '') ? JSON.parse(json) : [];
+    pads.push({name: padName, createdAt: Date.now()});
+    window.localStorage.setItem('pads', JSON.stringify(pads));
+    window.location = `p/${padName}`;
   });
 
   // start the custom js

src/static/skins/kits/index.css

@@ -9267,7 +9267,8 @@ fieldset:disabled .btn {
 }
 
 .rounded-pill {
-  border-radius: var(--bs-border-radius-pill) !important
+  border-radius: var(--bs-border-radius-pill) !important;
+  font-size: 12px;
 }
 
 .rounded-top {

src/static/skins/kits/index.js

@@ -1,6 +1,23 @@
 'use strict';
 
-window.customStart = () => {
+async function queryTTL(padId) {
+  const ttlResponse = await fetch(`/ttl/${padId}`);
+  return (await ttlResponse.json())?.ttl;
+}
+
+async function addTTL(pads) {
+  return Promise.all(pads.map(async (pad) => {
+    const ttl = await queryTTL(pad.name);
+    pad['ttl'] = ttl;
+    return pad;
+  }))
+}
+
+function createTimeStringDE(createdAt) {
+  return `Pad vom ${createdAt.getDate()}.${createdAt.getMonth() + 1 }.${createdAt.getFullYear()} um ${createdAt.getHours()}:${('0'+createdAt.getMinutes()).slice(-2)} Uhr`;
+}
+
+window.customStart = async () => {
   // define your javascript here
   // jquery is available - except index.js
   // you can load extra scripts with $.getScript http://api.jquery.com/jQuery.getScript/
@@ -18,4 +35,33 @@ window.customStart = () => {
 
   // call initially:
   setLeftColumnHeight();
+
+  const lastPadsList = document.getElementById('pad-list');
+  const json = window.localStorage.getItem('pads');
+
+  const pads = (json && json !== '') ? JSON.parse(json) : [];
+
+  const padsWithTTL = (await addTTL(pads)).filter((pad) => pad?.ttl && pad?.ttl > 0);
+  window.localStorage.setItem('pads', JSON.stringify(padsWithTTL));
+
+  pads
+    .slice(Math.max(pads.length - 3, 0))
+    .reverse()
+    .forEach(pad => {
+      const createdAt = new Date(pad.createdAt);
+      const li = document.createElement('li');
+      const link = document.createElement('a');
+      link.setAttribute("class", "text-decoration-none text-break");
+      link.setAttribute("href", `/p/${pad.name}`);
+      link.textContent = createTimeStringDE(createdAt);
+      li.appendChild(link);
+      lastPadsList.appendChild(li);
+  });
+
+  if(pads.length === 0) {
+    const emptyText = document.createElement('span')
+    emptyText.textContent = '-'
+    lastPadsList.appendChild(emptyText);
+  }
 };
+

src/templates/index.html

@@ -88,8 +88,12 @@ <h1 class="fw-bold">
                       Dieses Tool darf nur in Bildungskontexten genutzt werden. Die Eingabe personenbezogener Daten ist
                       nicht gestattet.
                     </p>
+                    <br />
+                    <h5>Letzte Pads</h5>
+                      <ul id="pad-list" class="list-inline text-dark lh-sm"></ul>
                   </div>
                 </div>
+
               </div>
             </div>
              <!-- End Right Block -->