uVPN/frontend
1
0
Fork 0
Code Issues 1 Pull Requests Actions Releases 6 Activity

update NodesStatus

Browse Source
This commit is contained in:
austnv
2026-06-21 17:51:54 +03:00
parent c5c0a6614a
commit f6af141f56
3 changed files with 77 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{ {
"name": "uvpn.shop", "name": "frontend",
"version": "0.8.1", "version": "0.8.2",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
src/components/NodesStatus.vue
+67 -35
View File
@@ -1,42 +1,57 @@
<template> <template>
<section class="px-6 py-12 max-w-7xl mx-auto"> <section class="px-6 py-20 md:px-12 max-w-7xl mx-auto">
<h2 class="text-2xl font-bold mb-6">🌍 Статус серверов</h2> <h2 class="text-3xl md:text-4xl font-bold text-center mb-14">
🌍 Статус серверов
</h2>
<div v-if="loading" class="flex justify-center py-8"> <div v-if="loading" class="flex justify-center py-12">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div> <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
</div> </div>
<p v-else-if="error" class="text-red-500">{{ error }}</p> <p v-else-if="error" class="text-center text-red-500 py-12">{{ error }}</p>
<div v-else class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3"> <div v-else class="space-y-3 max-w-3xl mx-auto">
<div <div
v-for="node in nodes" v-for="node in nodes"
:key="node.name" :key="node.name"
class="bg-white dark:bg-gray-900 rounded-lg p-3 border text-sm" class="flex items-center justify-between bg-white dark:bg-gray-900 rounded-xl px-4 py-3 border transition hover:shadow-md"
:class="node.isOnline ? 'border-green-400' : 'border-red-400 opacity-60'" :class="node.isOnline ? 'border-green-500/30' : 'border-red-500/30 opacity-60'"
> >
<div class="flex items-center gap-1.5 mb-1"> <div class="flex items-center gap-3">
<img <img
v-if="node.country_code.toLowerCase()" v-if="getCountryCode(node.country_code)"
:src="`https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/flags/4x3/${node.country_code.toLowerCase()}.svg`" :src="`https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/flags/4x3/${getCountryCode(node.country_code)}.svg`"
class="h-3.5 w-auto" class="h-5 w-auto rounded-sm"
/> />
<span class="font-semibold text-gray-800 dark:text-white">{{ node.name }}</span> <span class="font-semibold text-gray-800 dark:text-white">{{ node.name }}</span>
<span class="ml-auto text-[10px] px-1.5 py-0.5 rounded-full font-medium" <span
:class="node.isOnline ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"> class="text-[10px] px-2 py-0.5 rounded-full font-medium"
:class="node.isOnline ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
>
{{ node.isOnline ? 'online' : 'offline' }} {{ node.isOnline ? 'online' : 'offline' }}
</span> </span>
</div> </div>
<div class="flex justify-between text-gray-500 dark:text-gray-400 text-xs">
<span>👤 {{ node.users_online }}</span> <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
<span>⏱ {{ formatUptime(node.uptime) }}</span> <span class="flex items-center gap-1">
<span v-if="node.ping !== undefined && node.ping !== null" class="font-mono font-semibold" <Users :size="14" />
:class="{ {{ node.users_online }}
'text-green-600': node.ping < 50, </span>
'text-yellow-600': node.ping >= 50 && node.ping < 150, <span class="flex items-center gap-1">
'text-orange-600': node.ping >= 150 && node.ping < 300, <Clock :size="14" />
'text-red-600': node.ping >= 300 {{ formatUptime(node.uptime) }}
}"> </span>
<span
v-if="node.ping !== undefined && node.ping !== null"
class="font-mono font-semibold flex items-center gap-1"
:class="{
'text-green-600': node.ping < 50,
'text-yellow-600': node.ping >= 50 && node.ping < 150,
'text-orange-600': node.ping >= 150 && node.ping < 300,
'text-red-600': node.ping >= 300,
}"
>
<Wifi :size="14" />
{{ node.ping }}ms {{ node.ping }}ms
</span> </span>
<span v-else class="text-gray-300">⏳</span> <span v-else class="text-gray-300">⏳</span>
@@ -48,34 +63,51 @@
<script setup> <script setup>
import { ref, onMounted, onUnmounted } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
import { Users, Clock, Wifi } from '@lucide/vue'
const nodes = ref([]) const nodes = ref([])
const loading = ref(true) const loading = ref(true)
const error = ref(null) const error = ref(null)
let interval = null let interval = null
const countryMap = { RU:'ru', FI:'fi', SE:'se', US:'us', PL:'pl', LV:'lv', NL:'nl', DE:'de' }
const getCountryCode = (c) => countryMap[c] || null
const formatUptime = (s) => { const formatUptime = (s) => {
if (!s) return '0м' if (!s) return '0м'
const d = Math.floor(s/86400), h = Math.floor((s%86400)/3600), m = Math.floor((s%3600)/60) const d = Math.floor(s / 86400)
return d>0 ? `${d}д ${h}ч` : h>0 ? `${h}ч ${m}м` : `${m}м` const h = Math.floor((s % 86400) / 3600)
const m = Math.floor((s % 3600) / 60)
return d > 0 ? `${d}д ${h}ч` : h > 0 ? `${h}ч ${m}м` : `${m}м`
} }
const pingNode = (node) => new Promise(resolve => { // --- Новый метод пинга через HTTP HEAD ---
const pingNode = async (node) => {
const start = performance.now() const start = performance.now()
const ws = new WebSocket(`wss://${node.ip}:${node.port}`) const url = `https://${node.ip}:${node.port}`
const timer = setTimeout(() => { ws.close(); resolve(null) }, 3000)
ws.onopen = () => { clearTimeout(timer); resolve(Math.round(performance.now()-start)); ws.close() } try {
ws.onerror = () => { clearTimeout(timer); resolve(null) } await fetch(url, {
}) method: 'HEAD',
mode: 'no-cors',
cache: 'no-cache',
signal: AbortSignal.timeout(3000),
})
return Math.round(performance.now() - start)
} catch {
return null
}
}
const fetchNodes = async () => { const fetchNodes = async () => {
try { try {
const res = await fetch('/api/v1/nodes') const res = await fetch('/api/v1/nodes')
if (!res.ok) throw new Error() if (!res.ok) throw new Error()
const data = await res.json() const data = await res.json()
nodes.value = data.map(n => ({ ...n, isOnline: true, ping: null })) nodes.value = data.map((n) => ({ ...n, isOnline: true, ping: null }))
const pings = await Promise.all(nodes.value.map(n => pingNode(n)))
nodes.value.forEach((n, i) => n.ping = pings[i]) const pings = await Promise.all(nodes.value.map((n) => pingNode(n)))
nodes.value.forEach((n, i) => (n.ping = pings[i]))
} catch { } catch {
error.value = 'Ошибка загрузки' error.value = 'Ошибка загрузки'
} finally { } finally {
src/views/HomeView.vue
+8 -53
View File
@@ -1,14 +1,12 @@
<template> <template>
<div> <HeroSection />
<HeroSection /> <FeaturesSection />
<FeaturesSection /> <CompatibilitySection />
<CompatibilitySection /> <PricingSection />
<PricingSection /> <NodesStatus />
<NodesStatus /> <StepsSection />
<StepsSection /> <TestimonialsSection />
<TestimonialsSection /> <FaqSection />
<FaqSection />
</div>
</template> </template>
<script setup> <script setup>
@@ -21,51 +19,8 @@ import StepsSection from '../components/StepsSection.vue'
import TestimonialsSection from '../components/TestimonialsSection.vue' import TestimonialsSection from '../components/TestimonialsSection.vue'
import FaqSection from '../components/FaqSection.vue' import FaqSection from '../components/FaqSection.vue'
// import { useHead } from '@vueuse/head';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
const route = useRoute(); const route = useRoute();
// useHead({
// title: route.meta.title,
// meta: [
// {
// name: 'description',
// content: route.meta.description
// },
// {
// name: 'keywords',
// content: route.meta.keywords
// },
// // Open Graph теги для соцсетей
// {
// property: 'og:title',
// content: route.meta.title
// },
// {
// property: 'og:description',
// content: route.meta.description
// },
// {
// property: 'og:type',
// content: 'website'
// },
// {
// property: 'og:url',
// content: window.location.href // Здесь можно также задать каноничный URL
// },
// {
// property: 'og:site_name',
// content: route.meta.title
// },
// {
// property: 'telegram:channel',
// content: '@uvpn_shop'
// },
// {
// property: 'tg:site_verification',
// content: 'g7j8/rPFXfhyrq5q0QQV7EsYWv4='
// },
// ]
// });
</script> </script>