88 lines
3.3 KiB
Vue
88 lines
3.3 KiB
Vue
<template>
|
|
<ion-card
|
|
:class="item.status === 'used' ? 'bg-blue-50 border-blue-100' : item.status === 'ready' ? 'bg-lime-50 border-lime-100' : 'bg-red-50 border-red-100'"
|
|
class="rounded-2xl border m-0">
|
|
<div class="h-full w-full p-4 space-y-2">
|
|
<div class="flex justify-between gap-2">
|
|
<div class="flex flex-col items-center w-full">
|
|
<div>No Seri</div>
|
|
<div
|
|
class="h-fit font-medium p-1 rounded-full bg-white w-full max-w-52 flex items-center justify-center border text-black">
|
|
{{ item.serial }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center w-full">
|
|
<div>Lokasi</div>
|
|
<div
|
|
class="h-fit font-medium p-1 rounded-full bg-white w-full max-w-52 flex items-center justify-center border text-black">
|
|
{{ item.location }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between gap-2">
|
|
<div class="flex flex-col items-center w-full">
|
|
<div>Waktu Produksi</div>
|
|
<div
|
|
class="h-fit font-medium p-1 rounded-full bg-white w-full max-w-52 flex items-center justify-center border text-black">
|
|
{{ item.production }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center w-full">
|
|
<div>Status</div>
|
|
<div class="h-fit font-medium p-0 rounded-full bg-white w-full max-w-52 flex items-center border relative">
|
|
<div class="w-5 max-h-full aspect-square rounded-full absolute left-[6px]"
|
|
:class="item.status === 'ready' ? 'bg-green-500' : item.status === 'used' ? 'bg-blue-500' : 'bg-red-500'">
|
|
</div>
|
|
<div class="flex-1 py-1 px-5 text-black text-center">
|
|
{{ item.status === 'ready' ? 'Ready to use' : item.status === 'used' ? 'Digunakan' : 'Maintenance' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div :class="item.status === 'ready' && 'invisible'" class="grid grid-cols-2 gap-2 w-full">
|
|
<div :class="item.status === 'maintenance' && 'invisible'" class="flex flex-col items-center">
|
|
<div class="grid grid-cols-7 items-center w-full max-w-52 px-2">
|
|
<img src="@/assets/images/tools.png" alt="Icon tools" class="w-max aspect-square">
|
|
<div class="col-span-6 h-max font-medium flex flex-col items-center">
|
|
<div>History</div>
|
|
<div class="text-black">
|
|
{{ item.history }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-center">
|
|
<div class="grid grid-cols-7 items-center w-full max-w-52 px-2">
|
|
<img src="@/assets/images/calendar.png" alt="Icon calendar" class="w-max aspect-square">
|
|
<div class="col-span-6 h-max font-medium flex flex-col items-center">
|
|
<div>Installation</div>
|
|
<div class="text-black">
|
|
{{ item.installation }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ion-card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { IonCard } from '@ionic/vue'
|
|
defineProps({
|
|
item: {
|
|
type: {
|
|
serial: String,
|
|
production: String,
|
|
status: String,
|
|
location: String,
|
|
installation: String,
|
|
history: String
|
|
}
|
|
}
|
|
})
|
|
</script> |