Intégration fonctionnalites V1
This commit is contained in:
bastien
@@ -1,4 +1,6 @@
|
||||
<script setup>
|
||||
import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
|
||||
import { cardClass, getStatusColor, machineStatusColors } from '@/Components/Supervisor/ui.js';
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
|
||||
@@ -20,18 +22,6 @@ const formatDate = (iso) => {
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(iso));
|
||||
};
|
||||
|
||||
const statusColor = (status) => {
|
||||
const colors = {
|
||||
available: 'bg-green-100 text-green-800',
|
||||
reserved: 'bg-yellow-100 text-yellow-800',
|
||||
running: 'bg-blue-100 text-blue-800',
|
||||
maintenance: 'bg-orange-100 text-orange-800',
|
||||
offline: 'bg-gray-100 text-gray-800',
|
||||
error: 'bg-red-100 text-red-800',
|
||||
};
|
||||
return colors[status] ?? 'bg-gray-100 text-gray-800';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -41,99 +31,97 @@ const statusColor = (status) => {
|
||||
<template #header>
|
||||
<Link
|
||||
:href="route('supervisor.machines.index')"
|
||||
class="text-sm text-indigo-600 hover:text-indigo-800"
|
||||
class="text-sm font-medium text-indigo-600 transition hover:text-indigo-800"
|
||||
>
|
||||
← Retour aux machines
|
||||
</Link>
|
||||
</template>
|
||||
|
||||
<div class="mb-4">
|
||||
<h1 class="text-2xl font-bold text-gray-900">{{ machine.name }}</h1>
|
||||
<p class="text-sm text-gray-500">{{ machine.establishment?.name }}</p>
|
||||
<div class="mb-6">
|
||||
<div class="flex flex-wrap items-start gap-4">
|
||||
<div class="flex-1">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900">{{ machine.name }}</h1>
|
||||
<p class="mt-1 text-sm text-slate-500">{{ machine.establishment?.name }}</p>
|
||||
</div>
|
||||
<StatusBadge
|
||||
:label="machine.status_label"
|
||||
:color-class="getStatusColor(machine.status, machineStatusColors)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<!-- Details -->
|
||||
<div class="rounded-lg bg-white p-6 shadow">
|
||||
<h2 class="mb-4 text-lg font-semibold text-gray-800">Informations</h2>
|
||||
<dl class="space-y-3 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Type</dt>
|
||||
<dd class="font-medium text-gray-800">{{ machine.type_label }}</dd>
|
||||
<div :class="[cardClass, 'p-6']">
|
||||
<h2 class="mb-5 text-base font-semibold text-slate-900">Informations</h2>
|
||||
<dl class="space-y-4 text-sm">
|
||||
<div class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
|
||||
<dt class="text-slate-500">Type</dt>
|
||||
<dd class="font-medium text-slate-800">{{ machine.type_label }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Statut</dt>
|
||||
<dd>
|
||||
<span
|
||||
class="rounded-full px-2.5 py-0.5 text-xs font-medium"
|
||||
:class="statusColor(machine.status)"
|
||||
>
|
||||
{{ machine.status_label }}
|
||||
</span>
|
||||
</dd>
|
||||
<div class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
|
||||
<dt class="text-slate-500">QR code</dt>
|
||||
<dd class="font-mono text-slate-800">{{ machine.qr_code }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">QR code</dt>
|
||||
<dd class="font-mono text-gray-800">{{ machine.qr_code }}</dd>
|
||||
<div class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
|
||||
<dt class="text-slate-500">Dernier signal</dt>
|
||||
<dd class="text-slate-800">{{ formatDate(machine.last_heartbeat_at) }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Dernier signal</dt>
|
||||
<dd class="text-gray-800">{{ formatDate(machine.last_heartbeat_at) }}</dd>
|
||||
<div v-if="machine.cycle_started_at" class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
|
||||
<dt class="text-slate-500">Cycle démarré</dt>
|
||||
<dd class="text-slate-800">{{ formatDate(machine.cycle_started_at) }}</dd>
|
||||
</div>
|
||||
<div v-if="machine.cycle_started_at" class="flex justify-between">
|
||||
<dt class="text-gray-500">Cycle démarré</dt>
|
||||
<dd class="text-gray-800">{{ formatDate(machine.cycle_started_at) }}</dd>
|
||||
<div v-if="machine.cycle_ends_at" class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
|
||||
<dt class="text-slate-500">Fin de cycle prévue</dt>
|
||||
<dd class="text-slate-800">{{ formatDate(machine.cycle_ends_at) }}</dd>
|
||||
</div>
|
||||
<div v-if="machine.cycle_ends_at" class="flex justify-between">
|
||||
<dt class="text-gray-500">Fin de cycle prévue</dt>
|
||||
<dd class="text-gray-800">{{ formatDate(machine.cycle_ends_at) }}</dd>
|
||||
</div>
|
||||
<div v-if="machine.current_user" class="flex justify-between">
|
||||
<dt class="text-gray-500">Utilisateur actuel</dt>
|
||||
<dd class="text-gray-800">
|
||||
<div v-if="machine.current_user" class="flex items-center justify-between gap-4">
|
||||
<dt class="text-slate-500">Utilisateur actuel</dt>
|
||||
<dd class="text-right text-slate-800">
|
||||
{{ machine.current_user.name }}
|
||||
<span class="text-gray-500">({{ machine.current_user.email }})</span>
|
||||
<span class="block text-xs text-slate-400">{{ machine.current_user.email }}</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div v-if="machine.establishment" class="mt-6 border-t pt-4">
|
||||
<h3 class="mb-2 text-sm font-semibold text-gray-700">Établissement</h3>
|
||||
<p class="text-sm text-gray-600">{{ machine.establishment.address }}</p>
|
||||
<p v-if="machine.establishment.city" class="text-sm text-gray-600">
|
||||
<div v-if="machine.establishment" class="mt-6 rounded-xl bg-slate-50 p-4">
|
||||
<h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Établissement</h3>
|
||||
<p class="text-sm text-slate-700">{{ machine.establishment.address }}</p>
|
||||
<p v-if="machine.establishment.city" class="text-sm text-slate-700">
|
||||
{{ machine.establishment.city }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="machine.integration" class="mt-6 border-t pt-4">
|
||||
<h3 class="mb-2 text-sm font-semibold text-gray-700">Intégration</h3>
|
||||
<div v-if="machine.integration" class="mt-4 rounded-xl bg-indigo-50/50 p-4 ring-1 ring-indigo-100">
|
||||
<h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-indigo-600">Intégration</h3>
|
||||
<dl class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Fournisseur</dt>
|
||||
<dd>{{ machine.integration.provider }}</dd>
|
||||
<dt class="text-slate-500">Fournisseur</dt>
|
||||
<dd class="font-medium text-slate-800">{{ machine.integration.provider }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Mode</dt>
|
||||
<dd>{{ machine.integration.mode }}</dd>
|
||||
<dt class="text-slate-500">Mode</dt>
|
||||
<dd class="font-medium text-slate-800">{{ machine.integration.mode }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Active</dt>
|
||||
<dd>{{ machine.integration.is_active ? 'Oui' : 'Non' }}</dd>
|
||||
<dt class="text-slate-500">Active</dt>
|
||||
<dd class="font-medium text-slate-800">{{ machine.integration.is_active ? 'Oui' : 'Non' }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Events -->
|
||||
<div class="rounded-lg bg-white p-6 shadow">
|
||||
<h2 class="mb-4 text-lg font-semibold text-gray-800">Événements récents</h2>
|
||||
<div v-if="recentEvents.length === 0" class="text-sm text-gray-500">
|
||||
<div :class="[cardClass, 'p-6']">
|
||||
<h2 class="mb-5 text-base font-semibold text-slate-900">Événements récents</h2>
|
||||
<div v-if="recentEvents.length === 0" class="py-8 text-center text-sm text-slate-400">
|
||||
Aucun événement enregistré.
|
||||
</div>
|
||||
<ul v-else class="divide-y divide-gray-100">
|
||||
<li v-for="(event, index) in recentEvents" :key="index" class="py-3">
|
||||
<p class="text-sm font-medium text-gray-800">{{ event.event_type_label }}</p>
|
||||
<p class="text-xs text-gray-500">{{ formatDate(event.occurred_at) }}</p>
|
||||
<ul v-else class="divide-y divide-slate-100">
|
||||
<li v-for="(event, index) in recentEvents" :key="index" class="flex items-start gap-3 py-3 first:pt-0">
|
||||
<span class="mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-indigo-400" />
|
||||
<div>
|
||||
<p class="text-sm font-medium text-slate-800">{{ event.event_type_label }}</p>
|
||||
<p class="mt-0.5 text-xs text-slate-400">{{ formatDate(event.occurred_at) }}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user