Filter outdated topics and display dates in popup
This commit is contained in:
parent
4d840c7676
commit
6b0b8dcabc
96
src/App.vue
96
src/App.vue
|
@ -28,16 +28,20 @@
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
:href="`${baseUrl}t/${topic.slug}/${topic.id}`"
|
: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">
|
<h2 class="text-2xl pt-4 px-4" v-html="topic.fancy_title"></h2>
|
||||||
{{ topic.fancy_title }}
|
<div
|
||||||
</h2>
|
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
|
<img
|
||||||
v-if="topic.image_url"
|
v-if="topic.image_url"
|
||||||
:src="topic.image_url"
|
:src="topic.image_url"
|
||||||
:alt="topic.fancy_title"
|
:alt="topic.fancy_title"
|
||||||
class="pt-3 w-full"
|
class="mt-3 w-full"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
@ -54,7 +58,7 @@
|
||||||
topic.creator.avatar_template.replace(/{size}/, '20')
|
topic.creator.avatar_template.replace(/{size}/, '20')
|
||||||
"
|
"
|
||||||
:alt="topic.creator.name"
|
:alt="topic.creator.name"
|
||||||
class="pr-1 rounded-full"
|
class="mr-1 rounded-full"
|
||||||
/>
|
/>
|
||||||
<span class="font-bold text-gray-800 truncate">
|
<span class="font-bold text-gray-800 truncate">
|
||||||
{{ topic.creator.name }} ({{ topic.creator.username }})
|
{{ topic.creator.name }} ({{ topic.creator.username }})
|
||||||
|
@ -70,14 +74,20 @@
|
||||||
:key="t"
|
:key="t"
|
||||||
class="tag bg-gray-300 ml-1 mb-1 hover:bg-blue-300"
|
class="tag bg-gray-300 ml-1 mb-1 hover:bg-blue-300"
|
||||||
>
|
>
|
||||||
<a class="px-2 py-1" :href="`/tag/`">
|
<a
|
||||||
{{ tag }}
|
class="px-2 py-1"
|
||||||
</a>
|
:href="`${baseUrl}tag/${tag}`"
|
||||||
|
v-html="tag"
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<div v-if="topic.highest_post_number - 1 > 0">
|
||||||
<font-awesome-icon
|
<font-awesome-icon
|
||||||
icon="comment-alt"
|
icon="comment-alt"
|
||||||
|
@ -106,7 +116,7 @@
|
||||||
{{ topic.views }} vues
|
{{ topic.views }} vues
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</l-popup>
|
</l-popup>
|
||||||
</l-marker>
|
</l-marker>
|
||||||
</v-marker-cluster>
|
</v-marker-cluster>
|
||||||
|
@ -157,11 +167,21 @@ export default {
|
||||||
.then(resp => resp.json())
|
.then(resp => resp.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
this.users = data.users;
|
this.users = data.users;
|
||||||
// parse topics and feed each one with creator object
|
|
||||||
this.topics = data.topic_list.topics
|
this.topics = data.topic_list.topics
|
||||||
|
// parse topics with geolocation and remove old topic
|
||||||
.filter(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 => {
|
.map(topic => {
|
||||||
return {
|
return {
|
||||||
...topic,
|
...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 {
|
.tag a {
|
||||||
color: #333 !important;
|
color: #333 !important;
|
||||||
}
|
}
|
||||||
|
.title:hover h2 {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
.leaflet-popup-content-wrapper {
|
.leaflet-popup-content-wrapper {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
|
Reference in New Issue