Pastebin

New Paste Add Image

<!DOCTYPE html>

<head>

<title>Rescues Wallboard</title>

if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('service-worker.js');

}

document.addEventListener("DOMContentLoaded", () => {

loadRescues();

});

</script>

<style>

/* --- Base Modern Look --- */

body {

font-family: 'Inter', sans-serif;

background: #f4f6f8;

margin: 0;

padding: 0;

}

header {

text-align: center;

padding: 1rem;

background: #263238;

color: #fff;

box-shadow: 0 2px 6px rgba(0,0,0,0.15);

}

.logo {

max-height: 50px;

margin-bottom: 0.25rem;

}

h1 {

margin: 0;

font-size: 1.4rem;

font-weight: 600;

}

/* --- Top-Left Settings Icon --- */

#settings-icon {

position: absolute;

top: 12px;

left: 12px;

z-index: 2000;

display: flex;

align-items: center;

justify-content: center;

width: 34px;

height: 34px;

border-radius: 6px;

cursor: pointer;

transition: background 0.2s ease, transform 0.2s ease;

}

#settings-icon img {

width: 22px;

height: 22px;

opacity: 0.9;

transition: opacity 0.2s ease;

}

#settings-icon:hover {

background: rgba(255, 255, 255, 0.12);

transform: scale(1.05);

}

#settings-icon:hover img {

opacity: 1;

}

/* Ensure header doesn't overlap absolute icon */

header {

position: relative;

}

/* --- Activation Banner (Ultra-Thin + Centered) --- */

.activation-banner {

padding: 4px 10px;

font-size: 0.9rem;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

gap: 6px;

flex-wrap: wrap;

border-radius: 6px;

margin-bottom: 15px;

color: white;

font-weight: 500;

}

/* State variants */

.activation-open { background-color: #4CAF50; }

.activation-caution { background-color: #FFC107; color: #000000; }

.activation-restricted { background-color: #F44336; }

.activation-standdown { background-color: #607D8B; }

/* --- Layout Wrapper --- */

.layout {

display: flex;

gap: 1.5rem;

padding: 1.5rem;

align-items: flex-start;

max-width: 1800px;

margin: 0 auto;

}

.wallboard-disclaimer {

font-size: 0.75rem;

color: #666;

margin-top: 4px;

margin-bottom: 8px;

text-align: center;

opacity: 0.8;

}

/* --- Vet Sidebar --- */

.vet-sidebar {

flex: 0 0 240px;

max-width: 260px;

background: #ffffff;

border-radius: 10px;

border: 1px solid #dfe3e8;

padding: 0.75rem;

box-shadow: 0 1px 4px rgba(0,0,0,0.08);

}

.vet-sidebar h2 {

margin-top: 0;

font-size: 1rem;

color: #37474f;

font-weight: 600;

text-align: left;

padding-left: 0.25rem;

}

/* --- Vet Cards (Base) --- */

.vet-card {

margin-bottom: 0.5rem;

padding: 0.4rem 0.5rem;

border-radius: 6px;

background: #f9f9f9;

box-shadow: 0 1px 2px rgba(0,0,0,0.05);

font-size: 0.8rem;

display: flex;

flex-direction: column;

gap: 0.2rem;

}

.vet-clinic {

font-weight: 600;

font-size: 0.9rem;

color: #2e7d32;

}

.vet-entry {

margin: 1px 0;          /* reduce vertical spacing */

padding: 0;             /* remove any padding */

line-height: 1.1;       /* tighter text */

font-size: 0.8rem;      /* matches your card font size */

display: flex;

justify-content: space-between;

align-items: center;

}

.vet-entry .by-cob {

color: #d32f2f;

font-weight: 600;

margin-left: 6px;

white-space: nowrap;

}

.vet-status {

font-size: 0.75rem;

color: #555;

}

.vet-urgency {

font-size: 0.75rem;

color: #d32f2f;

font-weight: 600;

text-align: right;

}

/* --- Collapsible Behaviour --- */

.vet-card.collapsible {

cursor: pointer;

transition: background 0.2s ease;

}

.vet-card-header {

display: flex;

justify-content: space-between;

align-items: center;

background: #f9f9f9;

border-radius: 6px;

padding: 6px 8px;

}

.vet-card-body {

max-height: 0;

overflow: hidden;

transition: max-height 0.25s ease;

}

.vet-card.expanded .vet-card-body {

max-height: 300px;

}

.vet-card.expanded {

background: #f0f0f0;

}

/* --- Rescue Wallboard Grid --- */

.wallboard-container {

flex: 1 1 auto;

min-width: 0;

}

.vet-chevron-button {

display: flex;

align-items: center;

justify-content: center;

border-radius: 6px;

width: 28px;

height: 28px;

cursor: pointer;

transition: background 0.2s ease;

}

.vet-chevron-button svg {

transition: transform 0.2s ease;

}

.vet-card.expanded .vet-chevron-button svg {

transform: rotate(90deg);

}

#wallboard {

display: flex;

flex-wrap: wrap;

gap: 1.25rem;

min-width: 0;

width: 100%;

}

.loading-message {

font-size: 1rem;

color: #555;

text-align: center;

padding: 1rem 0;

opacity: 0.8;

font-style: italic;

display: flex;

justify-content: center;

align-items: center;

width: 100%;

}

.rescue-card {

background: #fff;

border-radius: 10px;

padding: 1rem 1.25rem;

width: 100%;

box-shadow: 0 2px 6px rgba(0,0,0,0.1);

border-left: 5px solid transparent;

font-size: 0.9rem;

line-height: 1.35;

}

.rescue-card.rescue-expired {

opacity: 0.55;

filter: grayscale(100%);

}

.rescue-card.completed {

opacity: 0.55;          /* fade the whole card */

filter: grayscale(100%); /* grey it out */

}

/* Responsive Rescue Grid */

@media (min-width: 600px) { .rescue-card { width: calc(50% - 1.25rem); } }

@media (min-width: 900px) { .rescue-card { width: calc(33.33% - 1.25rem); } }

@media (min-width: 1300px) { .rescue-card { width: calc(25% - 1.25rem); } }

@media (min-width: 1700px) { .rescue-card { width: calc(20% - 1.25rem); } }

/* --- Mobile Fixes --- */

@media (max-width: 900px) {

.layout {

flex-direction: column;

}

.vet-sidebar {

order: -1;

width: 100%;

max-width: 100%;

box-sizing: border-box;

overflow-x: hidden;

margin-bottom: 1rem;

}

.vet-card {

width: 100%;

box-sizing: border-box;

word-wrap: break-word;

overflow-wrap: break-word;

}

/* --- Rescue Card Content --- */

.status-row {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

font-size: 0.85rem;

color: #1565c0;

gap: 0.35rem;

margin-bottom: 0.5rem;

}

.info-item {

margin: 0.35rem 0;

font-size: 0.9rem;

color: #333;

}

.info-label { font-weight: 600; }

.info-value.unassigned {

color: #999;

font-style: italic;

}

.info-value.multiline {

white-space: normal;

line-height: 1.4;

margin-bottom: 0.5rem;

}

.details-toggle {

color: #1976D2;

cursor: pointer;

text-decoration: underline;

font-size: 0.85rem;

margin-left: 4px;

}

.details-toggle:hover {

text-decoration: none;

}

.meta-row {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

font-size: 0.8rem;

color: #555;

margin-top: 0.75rem;

}

a {

color: #0d47a1;

text-decoration: underline;

}

footer {

text-align: center;

padding: 1rem;

color: #555;

font-size: 0.75rem;

}

#nextUpdate {

font-weight: 600;

color: #1565c0;

transition: color 0.3s ease;

}

#nextUpdate.warning { color: #f57c00; }

#nextUpdate.urgent { color: #d32f2f; }

/* Status pills */

.status-pill {

display: inline-block;

padding: 0.15rem 0.5rem;

border-radius: 999px;

font-size: 0.7rem;

font-weight: 600;

background-color: #e0e0e0;

color: #333;

}

.status-pill.waiting-rescuer { background-color: #ef5350; color: #fff; }

.status-pill.rescuer-enroute,

.status-pill.rescuer-en-route { background-color: #fb8c00; color: #fff; }

.status-pill.assigned { background-color: #42a5f5; color: #fff; }

.status-pill.completed { background-color: #9e9e9e; color: #fff; }

.status-pill.cancelled { background-color: #616161; color: #fff; }

.status-pill.unknown { background-color: #795548; color: #fff; }

.rescue-actions {

margin-top: 14px;

display: flex;

gap: 10px;

width: 100%;

}

/* Shared button styling */

.rescue-actions button {

flex: 1;

padding: 12px 14px;

border: none;

border-radius: 8px;

font-size: 1rem;

font-weight: 600;

cursor: pointer;

transition: all 0.18s ease;

color: #fff;

box-shadow: 0 2px 4px rgba(0,0,0,0.15);

}

/* I'm On My Way */

.onway-btn {

background: #0277BD; /* WRAPT blue */

}

.onway-btn:hover {

background: #015a8f;

transform: translateY(-1px);

}

/* Complete */

.complete-btn {

background: #2E7D32; /* WRAPT green */

}

.complete-btn:hover {

background: #225f26;

transform: translateY(-1px);

}

/* Tap feedback for mobile */

.rescue-actions button:active {

transform: scale(0.97);

opacity: 0.9;

}

/* Full-screen Stand Down overlay */

#standdown-overlay {

position: fixed;

inset: 0;

background: rgba(150, 0, 0, 0.55);

backdrop-filter: blur(6px);

-webkit-backdrop-filter: blur(6px);

display: none;

justify-content: center;

align-items: center;

z-index: 9999;

padding: 2rem;

font-weight: 600;

color: #b00000;

}

#standdown-policy-link:hover {

opacity: 0.8;

}

#standdown-message {

background: rgba(255, 255, 255, 0.92);

color: #b00000;

padding: 2rem 2.5rem;

border-radius: 12px;

max-width: 520px;

text-align: center;

font-size: 1.1rem;

font-weight: 500;

box-shadow: 0 4px 20px rgba(0,0,0,0.25);

}

#activation-policy-link {

margin-left: 10px;

font-weight: 600;

text-decoration: underline;

color: inherit;

}

#activation-policy-link:hover {

opacity: 0.8;

}

/* Fullscreen Penny Install Prompt */

#installPrompt {

position: fixed;

inset: 0;

background: rgba(255, 255, 255, 0.95);

z-index: 9999;

display: flex;

justify-content: center;

align-items: center;

animation: fadeIn 0.3s ease-out;

padding: 1.5rem;

box-sizing: border-box;

overflow-y: auto;

}

/* Main Install Box */

.install-box {

width: 100%;

max-width: 440px;

background: white;

border-radius: 14px;

padding: 1.75rem 1.5rem;

box-shadow: 0 6px 30px rgba(0,0,0,0.2);

text-align: center;

box-sizing: border-box;

margin: auto;

position: relative;

}

/* Logo */

.install-logo {

width: 70px;

margin: 0 auto 0.75rem auto;

display: block;

opacity: 0.9;

}

/* Title */

.install-title {

font-size: 1.45rem;

font-weight: 700;

margin: 0.25rem 0 0.5rem 0;

color: #263238;

}

/* Subtitle */

.install-subtitle {

font-size: 0.95rem;

line-height: 1.35;

color: #444;

margin-bottom: 1rem;

}

/* Recommended Tag */

.recommended-tag {

display: inline-block;

background: #e3f2fd;

color: #1565c0;

font-size: 0.8rem;

font-weight: 600;

padding: 4px 10px;

border-radius: 999px;

margin-bottom: 1rem;

border: 1px solid #bbdefb;

}

/* Penny Image */

.install-box img.install-penny {

width: 200px;

max-width: 100%;

height: auto;

margin: 0.5rem auto 1rem auto;

display: block;

}

/* Install Button */

.install-btn {

background: #4CAF50;

color: white;

padding: 12px 16px;

border: none;

border-radius: 10px;

margin-top: 0.75rem;

width: 100%;

font-size: 1rem;

cursor: pointer;

font-weight: 600;

}

/* Not Now Button */

.dismiss-btn {

background: transparent;

color: #666;

border: none;

margin-top: 0.6rem;

cursor: pointer;

width: 100%;

font-size: 0.9rem;

}

/* Don't Show Again Button */

.never-btn {

margin-top: 1.5rem;

font-size: 0.8rem;

opacity: 0.7;

cursor: pointer;

background: transparent;

border: none;

width: 100%;

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(10px); }

to   { opacity: 1; transform: translateY(0); }

}

</style>

</head>

<body>

if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('/rescues/service-worker.js');

}

</script>

<h2>Stand‑Down</h2>

<h3>Rescue coordination is suspended</h3>

<p>Conditions make rescue unsafe or impossible. Please await further instruction before resuming activity.</p>

<p>Please consult your species coordinator for further information or advice</p>

<p>

View Rescue Activation Policy

</a>

</p>

</div>

</a>

<h1>Rescues Wallboard</h1>

</header>

<span id="activation-text">Loading activation level…</span>

View Policy

</a>

</div>

<h2>Vet Requests</h2>

</aside>

</div>

This wallboard is for WRAPT members only. Sensitive details such as phone numbers etc are intentionally hidden as this is a public display. To access this data, click the View In Nutrix link and log in.

</div>

<p id="lastUpdated">Last updated: --</p>

<p id="nextUpdate">Next update in: 60s</p>

<h3 class="install-title">Install Rescues App</h3>

Install this wallboard as an app to receive real‑time rescue alerts.<br><br>

You choose which alerts you want to receive.

</p>

<div class="recommended-tag">Recommended for WRAPT Members</div>

<button id="installBtn" class="install-btn">Install App</button>

<button id="neverBtn" class="never-btn">Don’t show again</button>

</div>

</footer>

/* -------------------------------------------------------

Details: 100-char truncation + toggle

------------------------------------------------------- */

function truncateDetails(text, limit = 100) {

if (!text || text.length <= limit) {

return `<div class="details-full">${text || "Not Provided"}</div>`;

}

const short = text.substring(0, limit) + "...";

return `

<span class="details-short">${short}</span>

</div>

}

function toggleDetails(toggleEl) {

const container = toggleEl.parentElement;

const shortEl = container.querySelector(".details-short");

const fullEl = container.querySelector(".details-full");

const expanded = fullEl.style.display === "inline";

if (expanded) {

fullEl.style.display = "none";

shortEl.style.display = "inline";

toggleEl.textContent = "Read more";

} else {

fullEl.style.display = "inline";

shortEl.style.display = "none";

toggleEl.textContent = "Show less";

}

/*-------------------------------------------------------

Countdown Timer

------------------------------------------------------- */

let countdown = 60;

setInterval(() => {

countdown--;

if (countdown < 0) countdown = 0;

const nextUpdateEl = document.getElementById("nextUpdate");

nextUpdateEl.textContent = "Next update in: " + countdown + "s";

nextUpdateEl.classList.remove("warning", "urgent");

if (countdown <= 10) nextUpdateEl.classList.add("urgent");

else if (countdown <= 20) nextUpdateEl.classList.add("warning");

}, 1000);

/* -------------------------------------------------------

Helper: Resolve Nutrix URL

------------------------------------------------------- */

function resolveUrl(call) {

if (call.url && call.url !== "[url]") return call.url;

if (call.incident_id) {

return `https://app.wrapt.org.au/nutrix/index.php?module=items/info&path=88-${call.incident_id}&redirect_to=subentity&gotopage[1701]=1`;

}

return "#";

}

/* -------------------------------------------------------

Load Activation Level

------------------------------------------------------- */

async function loadActivationLevel() {

try {

const response = await fetch("api/activation_level.php");

const data = await response.json();

const banner = document.getElementById("wrapt-activation");

const text = document.getElementById("activation-text");

const overlay = document.getElementById("standdown-overlay");

if (!data.visible) {

banner.style.display = "none";

overlay.style.display = "none";

return;

}

banner.style.display = "flex";

banner.style.backgroundColor = data.color;

/*banner.style.color = data.text_color; - commented out to control text colour of banner*/

const condition = data.condition || "Unknown";

const message = data.message || "";

text.textContent = message

? `${condition} — ${message}`

: condition;

if (condition.toUpperCase() === "STAND-DOWN") {

overlay.style.display = "flex";

} else {

overlay.style.display = "none";

}

} catch (err) {

console.error("Error loading activation level:", err);

}

/* -------------------------------------------------------

Load Rescues

------------------------------------------------------- */

async function loadRescues() {

try {

const container = document.getElementById("wallboard");

container.innerHTML = `

<div class="loading-message">Loading Rescues...</div>

const response = await fetch("api/rescue_calls.php?app_entity_id=88");

const data = await response.json();

container.innerHTML = "";

const rawCalls = Array.isArray(data) ? data : data?.data || [];

let calls = rawCalls.filter(c => c.visible === true);

const now = Date.now();

const FIFTEEN_MIN = 15 * 60 * 1000;

/* FILTERING */

calls = calls.filter(call => {

const status = (call.rescue_status_id || "").toLowerCase().trim();

const dc = call.date_Completion;

const parsed = new Date(dc);

const hasValidCompletion = !isNaN(parsed.getTime());

const isCompleted =

status.includes("complete") && !status.includes("incomplete");

const isCancelled = status.includes("cancel");

const isExpired = status.includes("expired");

if (isCompleted || isCancelled) {

if (!hasValidCompletion) return false;

const completedTime = parsed.getTime();

return (now - completedTime) <= FIFTEEN_MIN;

}

if (isExpired) return true;

return true;

});

/* SORTING */

function sortOrder(call) {

const urgency = (call.urgency || "").toLowerCase();

const status = (call.rescue_status_id || "").toLowerCase();

if (urgency === "emergency") return 0;

if (urgency === "high") return 1;

if (urgency === "medium") return 2;

if (urgency === "low" || urgency === "routine") return 3;

if (status.includes("expired")) return 4;

if (status.includes("cancel")) return 5;

if (status.includes("complete")) return 6;

return 7;

}

calls.sort((a, b) => sortOrder(a) - sortOrder(b));

/* NO ACTIVE RESCUES */

if (!calls.length) {

container.innerHTML = `

<div style="

width: 100%;

text-align: center;

padding: 2rem;

font-size: 1.1rem;

color: #666;

font-weight: 500;

No Active Rescues

</div>

return;

}

/* -------------------------------------------------------

RENDER EACH RESCUE CARD  (THIS MUST BE INSIDE loadRescues)

------------------------------------------------------- */

calls.forEach(call => {

const card = document.createElement("div");

card.className = "rescue-card";

const urgency = (call.urgency || "").toLowerCase();

if (urgency === "emergency") card.style.borderLeftColor = "#d32f2f";

else if (urgency === "high") card.style.borderLeftColor = "#f57c00";

else if (urgency === "medium") card.style.borderLeftColor = "#fb8c00";

else if (urgency === "low" || urgency === "routine") card.style.borderLeftColor = "#2e7d32";

const statusClass = (call.rescue_status_id || "unknown")

.toLowerCase()

.replace(/\s+/g, "-");

if (statusClass === "cancelled") {

card.classList.add("cancelled");

card.style.borderLeftColor = "#8B0000";

}

if (statusClass === "completed") {

card.classList.add("completed");

card.style.borderLeftColor = "#1976D2";

}

if (statusClass.includes("expired")) {

card.classList.add("rescue-expired");

card.style.borderLeftColor = "#9E9E9E";

}

let displayLocation = call.location || "";

let directionsAvailable = true;

if (call.category === "Vet PickUp") {

if (call.clinic_address && call.clinic_address.trim() !== "") {

displayLocation = call.clinic_address;

} else {

displayLocation = "Clinic address not provided";

directionsAvailable = false;

}

card.innerHTML = `

${call.rescue_status_id || "Unknown"}

</span>

<span class="category">Category: ${call.category || "Unknown"}</span>

<span class="urgency">Urgency: ${call.urgency || "Unknown"}</span>

</div>

<div class="info-item"><span class="info-label">Caller:</span> <span class="info-value">${call.caller || "Unknown"}</span></div>

<div class="info-item"><span class="info-label">Short Reason:</span> <span class="info-value">${call.short_reason || "Unknown"}</span></div>

<span class="info-label">Details:</span>

${truncateDetails(call.details || "Not Provided", 100)}

</div>

<div class="info-label">${call.category === "Vet PickUp" ? "PickUp Address:" : "Location:"}</div>

displayLocation === "Clinic address not provided"

? `<em style="color:#999;">${displayLocation}</em>`

: displayLocation

}

</div>

directionsAvailable

? `

<a href="maps:?q=${encodeURIComponent(displayLocation)}"

target="_blank"

style="color:#1976d2; text-decoration:none; font-weight:500;">

📍 Get Directions

</a>

</div>

: ""

}

<div class="info-item"><span class="info-label">Species:</span> <span class="info-value">${call.species || "Unknown"}</span></div>

<div class="info-item"><span class="info-label">Rescuer:</span> <span class="info-value ${!call.responder ? 'unassigned' : ''}">${call.responder || "Unassigned"}</span></div>

</div>

<span><strong>Source:</strong> ${call.call_source || "Unknown"}</span>

<span><a href="${resolveUrl(call)}" target="_blank">View in Nutrix</a></span>

</div>

call.rescue_status_id === "Waiting Rescuer"

? `

<button class="complete-btn" onclick="updateRescueStatus(${call.id}, 'complete')">Complete</button>

: ""

}

call.rescue_status_id === "Rescuer Enroute"

? `

<button class="complete-btn" onclick="updateRescueStatus(${call.id}, 'complete')">Complete</button>

: ""

}

</div>

container.appendChild(card);

});

} catch (err) {

console.error("Error loading rescues:", err);

}

document.getElementById("lastUpdated").textContent =

"Last updated: " + new Date().toLocaleTimeString();

countdown = 60;

}

/* -------------------------------------------------------

Update Rescue Status (GLOBAL)

------------------------------------------------------- */

async function updateRescueStatus(id, action) {

let fields = {};

if (action === 'onway') fields[1373] = 637;

if (action === 'complete') fields[1373] = 638;

const formData = new FormData();

formData.append('id', id);

for (const key in fields) {

formData.append(`fields[${key}]`, fields[key]);

}

const response = await fetch('api/update_rescue.php', {

method: 'POST',

body: formData

});

const result = await response.json();

if (result.success) {

location.reload();

} else {

alert("Error: " + result.error);

}

/* -------------------------------------------------------

Load Vet Requests

------------------------------------------------------- */

async function loadVetRequests() {

try {

const response = await fetch("api/vet_requests.php?app_entity_id=126");

const data = await response.json();

const container = document.getElementById("vetRequests");

container.innerHTML = "";

const rawRequests = Array.isArray(data) ? data : data?.data || [];

const requests = rawRequests.filter(r => r.visible === true);

if (!requests.length) {

container.innerHTML = `

<div style="

width: 100%;

text-align: center;

padding: 1rem;

font-size: 0.95rem;

color: #666;

font-weight: 500;

No Active Vet Requests

</div>

return;

}

// --- Group by clinic ---

const grouped = {};

requests.forEach(req => {

const clinic = req.clinic_name || "Unknown Clinic";

if (!grouped[clinic]) grouped[clinic] = [];

grouped[clinic].push(req);

});

// --- Render grouped cards ---

Object.entries(grouped).forEach(([clinic, entries]) => {

const count = entries.length;

const card = document.createElement("div");

card.className = "vet-card collapsible";

card.innerHTML = `

<span class="vet-clinic">${clinic} (${count})</span>

</svg>

</span>

</div>

${entries.map(entry => `

${entry.title ? `<strong>${entry.title}</strong>` : ""}

${entry.notes ? ` — ${entry.notes}` : ""}

</div>

${entry.urgency || ""}

</div>

`).join("")}

</div>

container.appendChild(card);

});

} catch (err) {

console.error("Error loading vet requests:", err);

}

/* -------------------------------------------------------

Collapsible Vet Cards

------------------------------------------------------- */

document.addEventListener("click", function(e) {

const card = e.target.closest(".vet-card.collapsible");

if (!card) return;

card.classList.toggle("expanded");

});

/* -------------------------------------------------------

PWA Registration + Push Subscription

------------------------------------------------------- */

const vapidPublicKey = "BE9GwhHSgEQ2xgh8AgqkQaK-VTpyH3Oq8bq7YROkfwOPByde9_5ZFCMnfqOwowjjKq9MOVlIMA7cNnwRa7AO3IM";

async function initPWAAndNotifications() {

if (!("serviceWorker" in navigator)) return;

try {

const reg = await navigator.serviceWorker.register("service-worker.js");

const permission = await Notification.requestPermission();

if (permission !== "granted") return;

const subscription = await reg.pushManager.subscribe({

userVisibleOnly: true,

applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)

});

await fetch("/rescues/api/save_subscription.php", {

method: "POST",

headers: { "Content-Type": "application/json" },

body: JSON.stringify(subscription)

});

} catch (err) {

console.error("PWA/Push setup error:", err);

}

/* -------------------------------------------------------

Listen for Service Worker Broadcast (Instant Refresh)

------------------------------------------------------- */

if (navigator.serviceWorker) {

navigator.serviceWorker.addEventListener("message", event => {

if (event.data?.type === "RESCUE_UPDATE") {

location.reload();

}

});

}

/* -------------------------------------------------------

Penny Install Prompt Logic (with Don't Show Again)

------------------------------------------------------- */

const INSTALL_POPUP_DELAY = 2500; // 2.5 seconds

let deferredPrompt = null;

// Detect if the Rescues App is installed

function isRescuesAppInstalled() {

return window.matchMedia('(display-mode: standalone)').matches ||

window.navigator.standalone === true;

}

// Show Penny popup

function showInstallPopup() {

// Respect "Don't show again"

if (localStorage.getItem("wrapt_hide_install_prompt") === "1") return;

// Reset the deferred flag so index page can show popup again

localStorage.removeItem("rescues_deferred_prompt");

const el = document.getElementById("installPrompt");

if (el) el.style.display = "block";

}

// Hide Penny popup

function hideInstallPopup() {

const el = document.getElementById("installPrompt");

if (el) el.style.display = "none";

}

/* -------------------------------------------------------

Capture install prompt event (Android / Desktop)

------------------------------------------------------- */

window.addEventListener('beforeinstallprompt', (e) => {

e.preventDefault();

// Save the event globally

deferredPrompt = e;

window.deferredPrompt = e;

// Mark that the install prompt is available (for Settings page)

localStorage.setItem("rescues_deferred_prompt", "1");

// Show Penny popup after delay if not installed

if (!isRescuesAppInstalled()) {

setTimeout(() => {

showInstallPopup();

}, INSTALL_POPUP_DELAY);

}

});

/* -------------------------------------------------------

Install button

------------------------------------------------------- */

document.getElementById("installBtn")?.addEventListener("click", async () => {

const isIOS = /iphone|ipad|ipod/i.test(window.navigator.userAgent);

const isInStandalone = window.navigator.standalone === true;

// iOS: show instructions instead of trying to prompt

if (isIOS && !isInStandalone) {

alert("On iPhone/iPad:\n\n1. Tap the Share button\n2. Choose 'Add to Home Screen'\n\nThis is how apps are installed on iOS.");

return;

}

// Android / Desktop

if (!deferredPrompt) return;

deferredPrompt.prompt();

await deferredPrompt.userChoice;

hideInstallPopup();

deferredPrompt = null;

window.deferredPrompt = null;

localStorage.removeItem("rescues_deferred_prompt");

});

/* -------------------------------------------------------

"Not now" button

------------------------------------------------------- */

document.getElementById("dismissBtn")?.addEventListener("click", () => {

hideInstallPopup();

});

/* -------------------------------------------------------

"Don't show again" button

------------------------------------------------------- */

document.getElementById("neverBtn")?.addEventListener("click", () => {

localStorage.setItem("wrapt_hide_install_prompt", "1");

hideInstallPopup();

});

/* -------------------------------------------------------

iOS fallback (Safari does NOT fire beforeinstallprompt)

------------------------------------------------------- */

const isIOS = /iphone|ipad|ipod/i.test(window.navigator.userAgent);

const isInStandalone = window.navigator.standalone === true;

if (isIOS && !isInStandalone) {

if (localStorage.getItem("wrapt_hide_install_prompt") !== "1") {

// Update subtitle text for iOS instructions

const subtitle = document.querySelector("#installPrompt p.install-subtitle");

if (subtitle) {

subtitle.innerText =

"Tap the Share button, then select 'Add to Home Screen' to install the Rescues App.";

}

setTimeout(() => {

showInstallPopup();

}, INSTALL_POPUP_DELAY);

}

/* -------------------------------------------------------

Helper: Convert VAPID Key

------------------------------------------------------- */

function urlBase64ToUint8Array(base64String) {

const padding = '='.repeat((4 - base64String.length % 4) % 4);

const base64 = (base64String + padding)

.replace(/-/g, '+')

.replace(/_/g, '/');

const rawData = window.atob(base64);

const outputArray = new Uint8Array(rawData.length);

for (let i = 0; i < rawData.length; ++i) {

outputArray[i] = rawData.charCodeAt(i);

}

return outputArray;

}

window.WRAPTVisitorLogger = function(sourceId) {

fetch('/rescues/api/log_visitor.php', {

method: 'POST',

body: new URLSearchParams({

source: sourceId,

ua: navigator.userAgent,

ip: "<?php echo $_SERVER['REMOTE_ADDR']; ?>"

})

});

};

/* -------------------------------------------------------

Initial Load + Auto Refresh

------------------------------------------------------- */

loadActivationLevel();

loadRescues();

loadVetRequests();

WRAPTVisitorLogger(833); // or 834, etc.

setInterval(() => {

loadActivationLevel();

loadRescues();

loadVetRequests();

}, 60000);

initPWAAndNotifications();

</script>

</body>

</html>

Settings

Title : [Optional]

Paste Folder : [Optional]

Syntax : [Optional]

Expiration : [Optional]

Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Settings

Site Languages