Skip to content

Commit

Permalink
feat: add offline alert
Browse files Browse the repository at this point in the history
  • Loading branch information
@dewanakl
dewanakl committed Oct 19, 2024
1 parent 2d36069 commit 66dcb4e
Show file tree
Hide file tree
Showing 10 changed files with 223 additions and 100 deletions.
12 changes: 9 additions & 3 deletions dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -344,9 +344,6 @@ <h6 class="fw-bold m-0 p-0" id="count-like">

<div class="p-3 bg-theme-light mb-4 rounded-4 shadow">
<p class="mx-0 mt-0 mb-1 p-0 fw-bold"><i class="fa-solid fa-heart me-1"></i>Project</p>
<p class="mx-0 mt-0 mb-1 p-0">
This project is built with <i class="fa-solid fa-heart text-danger"></i> by <a target="_blank" href="https://github.com/dewanakl/undangan">dewanakl</a>
</p>
<p class="m-0 p-0">
If you want to support me, consider <a target="_blank" href="https://saweria.co/dewanakl">buying me a coffee</a><i class="fa-solid fa-mug-hot ms-1"></i>
</p>
Expand All @@ -357,6 +354,15 @@ <h6 class="fw-bold m-0 p-0" id="count-like">
</div>
</main>

<!-- Offline -->
<div class="fixed-top" id="offline-mode" style="opacity: 0; z-index: 1057;">
<div class="d-flex justify-content-center mx-auto">
<div class="d-flex justify-content-center align-items-center rounded-pill my-2 bg-danger shadow">
<small class="text-center py-1 px-2 mx-1 text-white" style="font-size: 0.8rem;"></small>
</div>
</div>
</div>

<!-- Modal login -->
<div class="modal fade" id="loginModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
Expand Down
9 changes: 9 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -591,6 +591,15 @@ <h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
</div>
</div>

<!-- Offline -->
<div class="fixed-top" id="offline-mode" style="opacity: 0; z-index: 1057;">
<div class="d-flex justify-content-center mx-auto">
<div class="d-flex justify-content-center align-items-center rounded-pill my-2 bg-danger shadow">
<small class="text-center py-1 px-2 mx-1 text-white" style="font-size: 0.8rem;"></small>
</div>
</div>
</div>

<!-- Modal Image -->
<div class="modal fade" id="modal-image" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
Expand Down
2 changes: 2 additions & 0 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { like } from './like.js';
import { guest } from './guest.js';
import { theme } from './theme.js';
import { audio } from './audio.js';
import { offline } from './offline.js';
import { comment } from './comment.js';
import { progress } from './progress.js';
import { pagination } from './pagination.js';
Expand All @@ -13,6 +14,7 @@ document.addEventListener('DOMContentLoaded', () => {
pagination.init();

guest.init();
offline.init();
progress.init();
window.AOS.init();

Expand Down
13 changes: 6 additions & 7 deletions js/comment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export const comment = (() => {
const presence = document.getElementById(`form-inner-presence-${id}`);
if (presence) {
presence.disabled = true;
isPresent = presence.value === "1";
isPresent = presence.value === '1';
}

const form = document.getElementById(`form-${id ? `inner-${id}` : 'comment'}`);
Expand Down Expand Up @@ -125,9 +125,8 @@ export const comment = (() => {
document.getElementById(`inner-${id}`).remove();
document.getElementById(`content-${id}`).innerHTML = card.convertMarkdownToHTML(util.escapeHtml(form.value));

const formPresence = document.getElementById('form-presence');
if (presence) {
formPresence.value = isPresent ? "1" : "2";
document.getElementById('form-presence').value = isPresent ? '1' : '2';
storage('information').set('presence', isPresent);
}

Expand Down Expand Up @@ -162,7 +161,7 @@ export const comment = (() => {
}

const presence = document.getElementById('form-presence');
if (!id && presence && presence.value == "0") {
if (!id && presence && presence.value == '0') {
alert('Silakan pilih status kehadiran Anda.');
return;
}
Expand All @@ -171,7 +170,7 @@ export const comment = (() => {
name.disabled = true;
}

if (presence && presence.value != "0") {
if (presence && presence.value != '0') {
presence.disabled = true;
}

Expand All @@ -184,7 +183,7 @@ export const comment = (() => {
}

const btn = util.disableButton(button);
const isPresence = presence ? presence.value === "1" : true;
const isPresence = presence ? presence.value === '1' : true;

if (!session.isAdmin()) {
storage('information').set('name', nameValue);
Expand Down Expand Up @@ -274,7 +273,7 @@ export const comment = (() => {
let isPresent = false;
const presence = document.getElementById(`form-inner-presence-${id}`);
if (presence) {
isPresent = presence.value === "1";
isPresent = presence.value === '1';
}

let isChecklist = false;
Expand Down
2 changes: 2 additions & 0 deletions js/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@ import { util } from './util.js';
import { admin } from './admin.js';
import { theme } from './theme.js';
import { navbar } from './navbar.js';
import { offline } from './offline.js';
import { session } from './session.js';
import { comment } from './comment.js';
import { pagination } from './pagination.js';

document.addEventListener('DOMContentLoaded', () => {
admin.init();
theme.init();
offline.init();
pagination.init();

window.like = like;
Expand Down
7 changes: 3 additions & 4 deletions js/guest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const guest = (() => {
const animation = () => {
const duration = 15 * 1000;
const animationEnd = Date.now() + duration;
const colors = ["#FFC0CB", "#FF1493", "#C71585"];
const colors = ['#FFC0CB', '#FF1493', '#C71585'];

const randomInRange = (min, max) => {
return Math.random() * (max - min) + min;
Expand Down Expand Up @@ -120,9 +120,8 @@ export const guest = (() => {
storage('tracker').clear();
}

const presence = document.getElementById('form-presence');
if (presence && information.get('presence') !== undefined) {
presence.value = information.get('presence') ? "1" : "2";
if (information.get('presence')) {
document.getElementById('form-presence').value = information.get('presence') ? '1' : '2';
}

const info = document.getElementById('information');
Expand Down
70 changes: 70 additions & 0 deletions js/offline.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
export const offline = (() => {

const alert = document.getElementById('offline-mode');

const show = (isUp) => {
return new Promise((res) => {
let op = parseFloat(alert.style.opacity);
let clear = null;

const callback = () => {
if (!isUp && op > 0) {
op -= 0.05;
alert.style.opacity = op.toFixed(2);
} else if (isUp && op < 1) {
op += 0.05;
alert.style.opacity = op.toFixed(2);
} else {
if (op <= 0) {
alert.style.opacity = '0';
} else if (op >= 1) {
alert.style.opacity = '1';
}
res();
clearInterval(clear);
clear = null;
}
};

clear = setInterval(callback, 10);
});
};

const setOffline = () => {
alert.firstElementChild.firstElementChild.classList.remove('bg-success');
alert.firstElementChild.firstElementChild.classList.add('bg-danger');
alert.firstElementChild.firstElementChild.firstElementChild.innerText = 'Koneksi tidak tersedia';
};

const setOnline = () => {
alert.firstElementChild.firstElementChild.classList.remove('bg-danger');
alert.firstElementChild.firstElementChild.classList.add('bg-success');
alert.firstElementChild.firstElementChild.firstElementChild.innerText = 'Koneksi tersedia kembali';
};

const onOffline = () => {
setOffline();
show(true);
};

const onOnline = () => {
setOnline();

let timeout = null;
timeout = setTimeout(async () => {
clearTimeout(timeout);
timeout = null;
await show(false);
setOffline();
}, 3000);
};

const init = () => {
window.addEventListener('online', onOnline);
window.addEventListener('offline', onOffline);
};

return {
init
};
})();
2 changes: 1 addition & 1 deletion js/progress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const progress = (() => {
}

loaded += 1;
bar.style.width = Math.min((loaded / total) * 100, 100).toString() + "%";
bar.style.width = Math.min((loaded / total) * 100, 100).toString() + '%';
info.innerText = `Loading ${type} complete (${loaded}/${total}) [${parseInt((loaded / total) * 100).toFixed(0)}%]`;

if (loaded === total) {
Expand Down
6 changes: 3 additions & 3 deletions js/request.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ export const request = (method, path) => {
return fetch(url + path, req)
.then((res) => {
return res.json().then((json) => {
if (res.status >= 500 && (json.message || json[0])) {
throw json.message || json[0];
if (res.status >= 500 && (json.message ?? json[0])) {
throw json.message ?? json[0];
}

if (json.error) {
Expand Down Expand Up @@ -67,7 +67,7 @@ export const request = (method, path) => {
document.body.removeChild(existingLink);
}

const filename = res.headers.get('content-disposition')?.match(/filename="(.+)"/)?.[1] || 'download.csv';
const filename = res.headers.get('content-disposition')?.match(/filename="(.+)"/)?.[1] ?? 'download.csv';
return res.blob().then((blob) => ({ blob, filename }));
})
.then((res) => {
Expand Down
Loading

0 comments on commit 66dcb4e

Please sign in to comment.