|
|
@ -196,21 +196,31 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Maintenance -->
|
|
|
|
<!-- Maintenance -->
|
|
|
|
<template v-if="maintenance.length !== 0">
|
|
|
|
<template v-if="maintenance.length">
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
v-for="maintenanceItem in maintenance" :key="maintenanceItem.id" class="shadow-box alert mb-4 p-4 maintenance" role="alert"
|
|
|
|
v-for="maintenanceItem in maintenance" :key="maintenanceItem.id"
|
|
|
|
:class="maintenanceClass"
|
|
|
|
class="shadow-box alert mb-4 p-4 maintenance mt-4 position-relative" role="alert"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<h4 class="alert-heading" v-text="maintenanceItem.title" />
|
|
|
|
<div class="item">
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
<div class="content" v-text="maintenanceItem.description" />
|
|
|
|
<div class="col-1 col-md-1 d-flex justify-content-center align-items-center">
|
|
|
|
|
|
|
|
<font-awesome-icon
|
|
|
|
|
|
|
|
icon="wrench"
|
|
|
|
|
|
|
|
class="maintenance-icon maintenance-bg-info"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-11 col-md-11">
|
|
|
|
|
|
|
|
<h4 class="alert-heading">{{ maintenanceItem.title }}</h4>
|
|
|
|
|
|
|
|
<div class="content">{{ maintenanceItem.description }}</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Incident Date -->
|
|
|
|
|
|
|
|
<div class="date mt-3">
|
|
|
|
<div class="date mt-3">
|
|
|
|
{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }}
|
|
|
|
{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }}
|
|
|
|
({{ dateFromNow(maintenanceItem.start_date) }})<br />
|
|
|
|
({{ dateFromNow(maintenanceItem.start_date) }})<br />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Overall Status -->
|
|
|
|
<!-- Overall Status -->
|
|
|
@ -933,20 +943,22 @@ footer {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.maintenance {
|
|
|
|
.maintenance-bg-info {
|
|
|
|
color: white;
|
|
|
|
color: $maintenance;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.date {
|
|
|
|
.maintenance-icon {
|
|
|
|
font-size: 12px;
|
|
|
|
font-size: 30px;
|
|
|
|
}
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bg-maintenance {
|
|
|
|
.dark .shadow-box {
|
|
|
|
background-color: $maintenance;
|
|
|
|
background-color: #0d1117;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.statusMaintenance {
|
|
|
|
.statusMaintenance {
|
|
|
|
color: $maintenance;
|
|
|
|
color: $maintenance;
|
|
|
|
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mobile {
|
|
|
|
.mobile {
|
|
|
|