Filter outdated topics and display dates in popup

src/App.vue

@@ -28,16 +28,20 @@
             <a
               target="_blank"
               :href="`${baseUrl}t/${topic.slug}/${topic.id}`"
-              class="font-bold leading-tight pb-2 block hover:underline"
+              class="title font-bold leading-tight pb-2 block"
             >
-              <h2 class="text-2xl pt-4 px-4">
-                {{ topic.fancy_title }}
-              </h2>
+              <h2 class="text-2xl pt-4 px-4" v-html="topic.fancy_title"></h2>
+              <div
+                v-if="topic.event"
+                class="text-lg text-blue-500 px-4 pt-2"
+                style="text-decoration: none !important;"
+                v-html="cleanDateEvent(topic.event)"
+              ></div>
               <img
                 v-if="topic.image_url"
                 :src="topic.image_url"
                 :alt="topic.fancy_title"
-                class="pt-3 w-full"
+                class="mt-3 w-full"
               />
             </a>
 
@@ -54,7 +58,7 @@
                       topic.creator.avatar_template.replace(/{size}/, '20')
                   "
                   :alt="topic.creator.name"
-                  class="pr-1 rounded-full"
+                  class="mr-1 rounded-full"
                 />
                 <span class="font-bold text-gray-800 truncate">
                   {{ topic.creator.name }} ({{ topic.creator.username }})
@@ -70,14 +74,20 @@
                   :key="t"
                   class="tag bg-gray-300 ml-1 mb-1 hover:bg-blue-300"
                 >
-                  <a class="px-2 py-1" :href="`/tag/`">
-                    {{ tag }}
-                  </a>
+                  <a
+                    class="px-2 py-1"
+                    :href="`${baseUrl}tag/${tag}`"
+                    v-html="tag"
+                  />
                 </span>
               </div>
             </div>
 
-            <div class="flex justify-around border-t py-3 px-2">
+            <a
+              target="_blank"
+              :href="`${baseUrl}t/${topic.slug}/${topic.id}`"
+              class="flex justify-around border-t py-3 px-2"
+            >
               <div v-if="topic.highest_post_number - 1 > 0">
                 <font-awesome-icon
                   icon="comment-alt"
@@ -106,7 +116,7 @@
                   {{ topic.views }} vues
                 </span>
               </div>
-            </div>
+            </a>
           </l-popup>
         </l-marker>
       </v-marker-cluster>
@@ -157,11 +167,21 @@ export default {
       .then(resp => resp.json())
       .then(data => {
         this.users = data.users;
-        // parse topics and feed each one with creator object
+
         this.topics = data.topic_list.topics
+          // parse topics with geolocation and remove old topic
           .filter(topic => {
-            return topic.location && topic.location.geo_location;
+            let outdated = false; // allow all topics
+            if (topic.event) {
+              const eventEnd = new Date(
+                topic.event.start || topic.event.end
+              ).getTime();
+              outdated = Date.now() > eventEnd;
+            }
+
+            return topic.location && topic.location.geo_location && !outdated;
           })
+          // and feed each one with creator object
           .map(topic => {
             return {
               ...topic,
@@ -188,6 +208,53 @@ export default {
           });
         }
       });
+  },
+  methods: {
+    cleanDateEvent(event) {
+      const sameDay =
+        event.end &&
+        new Date(event.start).toLocaleDateString("fr-FR") ===
+          new Date(event.end).toLocaleDateString("fr-FR");
+
+      let dateString = !event.end || sameDay ? "Le " : "Du ";
+      // eslint-disable-next-line no-console
+      console.log(event);
+      dateString += new Date(event.start).toLocaleDateString("fr-FR", {
+        weekday: "short",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+
+      if (event.end) {
+        if (sameDay) {
+          dateString =
+            dateString.replace(/à/, "de") +
+            " à" +
+            new Date(event.end)
+              .toLocaleDateString("fr-FR", {
+                hour: "2-digit",
+                minute: "2-digit"
+              })
+              .replace(/.*à/, "");
+        } else if (event.end) {
+          dateString +=
+            "<br>Au " +
+            new Date(event.end).toLocaleDateString("fr-FR", {
+              weekday: "short",
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+              hour: "2-digit",
+              minute: "2-digit"
+            });
+        }
+      }
+
+      return dateString;
+    }
   }
 };
 //
@@ -211,6 +278,9 @@ export default {
 .tag a {
   color: #333 !important;
 }
+.title:hover h2 {
+  text-decoration: underline;
+}
 
 .leaflet-popup-content-wrapper {
   padding: 0 !important;