anto/XIP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add geolocation support for messages and replies
All checks were successful
Deploy XIP / deploy (push) Successful in 53s
Details

Browse Source
This commit is contained in:
arussac
2026-05-31 16:42:32 +02:00
parent 9354e2022a
commit 366d4e8f8b
4 changed files with 183 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/components/MessageItem.vue
View File

@@ -9,6 +9,13 @@
<span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
<span v-if="message.authorPerks?.badge" class="vip-badge">VIP</span>
</span>
<span v-if="message.authorGeo && geoLabel(message.authorGeo)" class="geo-tag">
<a :href="geoLink(message.authorGeo)" target="_blank" rel="noopener noreferrer" class="geo-link">
<img v-if="message.authorGeo.countryCode" :src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`" :alt="message.authorGeo.countryCode" class="geo-flag" />
<span v-else>🏠</span>
{{ geoLabel(message.authorGeo) }}
</a>
</span>
<span class="ts">{{ fmt(message.createdAt) }}</span>
<button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: message.authorIp })" type="button">↩ répondre</button>
</div>
@@ -35,6 +42,13 @@
<span class="ip reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
<span v-if="petsRight(reply)" class="pet pet--sm">{{ petsRight(reply) }}</span>
</span>
<span v-if="reply.authorGeo && geoLabel(reply.authorGeo)" class="geo-tag geo-tag--sm">
<a :href="geoLink(reply.authorGeo)" target="_blank" rel="noopener noreferrer" class="geo-link">
<img v-if="reply.authorGeo.countryCode" :src="`https://flagcdn.com/16x12/${reply.authorGeo.countryCode.toLowerCase()}.png`" :alt="reply.authorGeo.countryCode" class="geo-flag" />
<span v-else>🏠</span>
{{ geoLabel(reply.authorGeo) }}
</a>
</span>
<span class="ts">{{ fmt(reply.createdAt) }}</span>
<button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: reply.authorIp })" type="button">↩</button>
<RichContent
@@ -51,7 +65,7 @@
</template>
<script setup lang="ts">
import type { Message, Reply } from '@/composables/useMessages';
import type { Message, Reply, GeoInfo } from '@/composables/useMessages';
import { getIpColorWithPerks, getIpGlowWithPerks, getIpColor, getIpGlow } from '@/composables/ipColor';
import { usePerks } from '@/composables/usePerks';
import { openContextMenu } from '@/composables/useContextMenu';
@@ -160,6 +174,23 @@ function openIpMenu(e: MouseEvent, ip: string): void {
function fmt(date: string): string {
return new Date(date).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
}
function geoLabel(geo?: GeoInfo | null): string {
if (!geo) return '';
if (!geo.countryCode) return 'Local';
const place = geo.city || geo.country;
if (geo.lat != null && geo.lon != null) {
const lat = geo.lat.toFixed(4);
const lon = geo.lon.toFixed(4);
return `${place} · ${lat}, ${lon}`;
}
return place;
}
function geoLink(geo?: GeoInfo | null): string {
if (!geo || geo.lat == null || geo.lon == null) return 'https://maps.google.com';
return `https://www.google.com/maps/search/?api=1&query=${geo.lat},${geo.lon}`;
}
</script>
<style scoped>
@@ -234,4 +265,34 @@ function fmt(date: string): string {
font-size: 12px;
padding-left: 0;
}
.geo-tag {
font-family: Arial, sans-serif;
font-size: 10px;
color: #44445a;
white-space: nowrap;
}
.geo-tag--sm { font-size: 9px; }
.geo-link {
color: inherit;
text-decoration: none;
opacity: 0.7;
display: inline-flex;
align-items: center;
gap: 4px;
transition: opacity 0.12s, color 0.12s;
}
.geo-link:hover {
color: #5588cc;
opacity: 1;
text-decoration: underline;
}
.geo-flag {
width: 16px;
height: 12px;
object-fit: cover;
border-radius: 2px;
vertical-align: middle;
flex-shrink: 0;
}
</style>