Skip to content

S
simpmw
Commit c7db133d by Alfiro Pratama
Options

maintenance modal info

parent 819f3ceb
Showing with 162 additions and 0 deletions
resources/views/auth/login.blade.php
......@@ -142,6 +142,7 @@
<script src="{{ asset('theme/libs/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('theme/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('theme/js/app.js') }}"></script>
@include('layouts.maintenance_modal')
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
// Toastr Configuration
......
resources/views/layouts/maintenance_modal.blade.php 0 → 100644
{{-- Modal pemberitahuan maintenance website SIMPMW --}}
<div class="modal fade" id="maintenanceModal" tabindex="-1" role="dialog" aria-labelledby="maintenanceModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content border-0 shadow-lg">
<div class="modal-header text-white" style="background: linear-gradient(135deg, #986c35 0%, #8ac2f2 100%);">
<h5 class="modal-title font-weight-bolder text-white" id="maintenanceModalLabel">
<i class="fa fa-wrench mr-2 text-white"></i> Pemberitahuan Maintenance
</h5>
{{-- <button type="button" class="close" id="maintenanceModalCloseBtn" aria-label="Tutup">
<span aria-hidden="true">&times;</span>
</button> --}}
</div>
<div class="modal-body py-4 px-4">
<div class="text-center mb-3">
<p class="font-size-h6 text-dark mb-2">
Website <strong>SIMPMW</strong> (Sistem Informasi Manajemen Program Mahasiswa Wirausaha) akan dilakukan <strong>perbaikan sistem</strong>.
</p>
<div class="bg-light rounded p-3 mb-3">
<p class="mb-1"><strong>Jadwal Perbaikan Sistem:</strong></p>
<p class="mb-0 font-size-h5 text-primary">
Mulai: <strong>Pukul 11.00 WIB</strong><br>
Perkiraan selesai: <strong>Pukul 17.00 WIB</strong>
</p>
</div>
<p class="text-success font-weight-bold mb-1">Sebelum pukul 11.00 WIB website tetap dapat diakses.</p>
<p class="text-muted mb-4">
Mohon maaf atas ketidaknyamanan ini. Silakan kembali lagi pada waktu yang telah ditentukan.
</p>
</div>
<div class="text-center">
<p class="font-weight-bold text-dark mb-2" id="maintenanceCountdownLabel">Countdown:</p>
<div id="maintenanceCountdown" class="d-flex justify-content-center flex-wrap gap-2 mb-0">
<div class="bg-primary text-white rounded px-3 py-2 min-w-70px">
<div id="countdown-hours" class="font-size-h3 font-weight-bolder">00</div>
<small>Jam</small>
</div>
<div class="bg-primary text-white rounded px-3 py-2 min-w-70px">
<div id="countdown-minutes" class="font-size-h3 font-weight-bolder">00</div>
<small>Menit</small>
</div>
<div class="bg-primary text-white rounded px-3 py-2 min-w-70px">
<div id="countdown-seconds" class="font-size-h3 font-weight-bolder">00</div>
<small>Detik</small>
</div>
</div>
<p class="text-muted font-size-sm mt-2 mb-0" id="countdown-description"></p>
</div>
</div>
<div class="modal-footer border-0 bg-light">
<button type="button" class="btn btn-primary font-weight-bold" id="maintenanceModalMengertiBtn">Mengerti</button>
</div>
</div>
</div>
</div>
<style>
#maintenanceCountdown .min-w-70px { min-width: 70px; }
#maintenanceCountdown .gap-2 { gap: 0.5rem; }
</style>
<script>
(function() {
// WIB = UTC+7
function getWIBDate() {
var now = new Date();
return new Date(now.getTime() + (7 * 60 * 60 * 1000));
}
// 11:00 WIB = 04:00 UTC, 17:00 WIB = 10:00 UTC (WIB = UTC+7)
function getTargetAndLabel() {
var now = new Date();
var wibNow = getWIBDate();
var y = wibNow.getUTCFullYear(), m = wibNow.getUTCMonth(), d = wibNow.getUTCDate();
var targetStart = new Date(Date.UTC(y, m, d, 4, 0, 0, 0)); // 11:00 WIB
var targetEnd = new Date(Date.UTC(y, m, d, 10, 0, 0, 0)); // 17:00 WIB
if (now < targetStart) {
return { target: targetStart, label: 'Maintenance dimulai dalam:', desc: 'Sistem akan tidak tersedia mulai 11.00 WIB. Sebelum itu website tetap dapat diakses.' };
}
if (now < targetEnd) {
return { target: targetEnd, label: 'Estimasi maintenance selesai dalam:', desc: 'Perkiraan selesai pukul 17.00 WIB' };
}
// Setelah 17:00 WIB: countdown ke 11:00 WIB besok
var tomorrow = new Date(Date.UTC(y, m, d + 1, 6, 0, 0, 0));
return { target: tomorrow, label: 'Maintenance berikutnya dimulai dalam:', desc: 'Jadwal berikutnya: 11.00 - 17.00 WIB' };
}
function pad(n) { return n < 10 ? '0' + n : n; }
function updateCountdown() {
var conf = getTargetAndLabel();
var target = conf.target;
var now = new Date();
var diff = target - now;
document.getElementById('maintenanceCountdownLabel').textContent = conf.label;
var descEl = document.getElementById('countdown-description');
if (descEl) descEl.textContent = conf.desc;
if (diff <= 0) {
document.getElementById('countdown-hours').textContent = '00';
document.getElementById('countdown-minutes').textContent = '00';
document.getElementById('countdown-seconds').textContent = '00';
return;
}
var totalSec = Math.floor(diff / 1000);
var hours = Math.floor(totalSec / 3600);
var minutes = Math.floor((totalSec % 3600) / 60);
var seconds = totalSec % 60;
document.getElementById('countdown-hours').textContent = pad(hours);
document.getElementById('countdown-minutes').textContent = pad(minutes);
document.getElementById('countdown-seconds').textContent = pad(seconds);
}
function closeMaintenanceModal() {
var modal = document.getElementById('maintenanceModal');
if (!modal) return;
if (typeof jQuery !== 'undefined' && jQuery(modal).modal) {
jQuery(modal).modal('hide');
}
modal.classList.remove('show');
modal.style.display = 'none';
modal.setAttribute('aria-hidden', 'true');
document.body.classList.remove('modal-open');
document.body.style.overflow = '';
document.body.style.paddingRight = '';
var backdrops = document.querySelectorAll('.modal-backdrop');
for (var i = 0; i < backdrops.length; i++) backdrops[i].remove();
}
function showMaintenanceModal() {
var modal = document.getElementById('maintenanceModal');
if (modal && typeof jQuery !== 'undefined' && jQuery(modal).modal) {
jQuery(modal).on('hidden.bs.modal', closeMaintenanceModal);
jQuery(modal).modal('show');
} else if (modal && modal.classList) {
modal.classList.add('show');
modal.style.display = 'block';
}
// Pastikan tombol tutup selalu berfungsi (khusus halaman login / saat Bootstrap modal tidak menutup dengan benar)
setTimeout(function() {
var btnMengerti = document.getElementById('maintenanceModalMengertiBtn');
var btnClose = document.getElementById('maintenanceModalCloseBtn');
if (btnMengerti) btnMengerti.onclick = function(e) { e.preventDefault(); closeMaintenanceModal(); };
if (btnClose) btnClose.onclick = function(e) { e.preventDefault(); closeMaintenanceModal(); };
}, 100);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
updateCountdown();
showMaintenanceModal();
setInterval(updateCountdown, 1000);
});
} else {
updateCountdown();
showMaintenanceModal();
setInterval(updateCountdown, 1000);
}
})();
</script>
resources/views/layouts/master.blade.php
......@@ -96,6 +96,7 @@
<!-- END layout-wrapper -->
@include('layouts.inijs')
@include('layouts.maintenance_modal')
<script>
document.getElementById('vertical-menu-btn').addEventListener('click', function() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment