Add dynamic tip on how to subscribe the calendar

There could be more polishing with animations but this is good enough.
flofriday · Feb 26, 2024 · 9d33f5f · 9d33f5f
1 parent 33e6f1e
commit 9d33f5f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/app/static/home.js b/app/static/home.js
@@ -11,6 +11,7 @@ const googleCheck = document.getElementById("is_google");
 const noShorthandCheck = document.getElementById("no_shorthand");
 const previewTitle = document.getElementById("preview-title");
 const previewLectureName = document.getElementById("preview-lecturename");
+const importTip = document.getElementById("import-tip");
 
 let isDisabled = true;
 let currentUrl = "";
@@ -84,6 +85,7 @@ function disableBetterUrl() {
   errorText.classList.add("invisible");
   betterText.classList.add("hidden");
   betterTextPlaceholder.classList.remove("hidden");
+  importTip.classList.add("invisible");
   copyBtn.disabled = true;
 }
 
@@ -97,6 +99,8 @@ function setBetterUrl(originalUrl) {
   errorText.classList.add("invisible");
   betterText.classList.remove("hidden");
   betterTextPlaceholder.classList.add("hidden");
+  importTip.classList.remove("invisible");
+  console.log(importTip);
   copyBtn.disabled = false;
 
   const tmpurl = new URL(originalUrl);
@@ -106,7 +110,7 @@ function setBetterUrl(originalUrl) {
 
   const domain = window.location.origin;
   let betterUrl = `${domain}/personal.ics?token=${encodeURIComponent(
-    token
+    token,
   )}&locale=${encodeURIComponent(locale)}`;
   if (googleCheck.checked) {
     betterUrl += "&google";

diff --git a/app/templates/home.html b/app/templates/home.html
@@ -25,7 +25,8 @@
 
 <body class="h-screen">
     <div class="h-full flex flex-col justify-between">
-        <main class="container w-full max-w-[32rem] mx-auto px-4 text-center"> <h1 class="text-6xl font-bold pt-12 pb-6 leading-snug"> Better TISS Calendar </h1>
+        <main class="container w-full max-w-[32rem] mx-auto px-4 text-center">
+            <h1 class="text-6xl font-bold pt-12 pb-6 leading-snug"> Better TISS Calendar </h1>
             <div class="flex flex-row justify-around mb-12">
                 <div class="my-auto w-[12rem] h-full border border-[color:#666] rounded-2xl text-start p-3">
                     <div lang="de" class="text-lg font-bold">183.579 VU Technische Grundlagen der
@@ -34,7 +35,9 @@
                     <div lang="de" class="my-1 text-xs">Vorlesung</div>
                 </div>
                 <span aria-hidden="true" class="my-auto text-5xl px-2 whitespace-nowrap">➔</span>
-                <div class="w-[12rem] w-min-[12rem] h-full rounded-2xl p-[1px] bg-gradient-to-r from-pink-500 to-yellow-500"> <div class="w-full h-full bg-black rounded-2xl text-start p-3">
+                <div
+                    class="w-[12rem] w-min-[12rem] h-full rounded-2xl p-[1px] bg-gradient-to-r from-pink-500 to-yellow-500">
+                    <div class="w-full h-full bg-black rounded-2xl text-start p-3">
                         <div lang="de" id="preview-title" class="text-lg font-bold">TGI VU</div>
                         <div lang="de" class="my-2 text-sm">Getreidemarkt 9</div>
                         <div class="my-1 text-sm">
@@ -125,6 +128,13 @@ <h2 class="font-medium">Better calendar url:</h2>
 
 
                         </div>
+                        <div id="import-tip" class="text-sm mt-3 invisible">
+                            <a
+                                href="https://github.com/flofriday/better-tiss-calendar?tab=readme-ov-file#importing-the-calendar">
+                                How to subscribe the calendar 📅
+                            </a>
+                        </div>
+
                     </div>
                 </div>
         </main>
@@ -142,4 +152,4 @@ <h2 class="font-medium">Better calendar url:</h2>
     <script src="static/home.js"></script>
 </body>
 
-</html>
+</html>