Share Mark Complete modal as partial view; hide install button after PWA install
- Extract _CompleteJobModal.cshtml partial; Details.cshtml uses PartialAsync - Job board COMPLETED drop fetches partial via AJAX and shows modal in-place - Add GET Jobs/CompleteJobModal action to load job data for the board modal - install-app.js: persist installed state in localStorage; clears automatically when browser re-fires beforeinstallprompt after uninstall Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2643,6 +2643,22 @@ public class JobsController : Controller
|
|||||||
|
|
||||||
#region Job Completion
|
#region Job Completion
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Returns the Mark Complete modal partial view populated with full job data.
|
||||||
|
/// Called via AJAX from the Job Board when a card is dragged to the Completed column.
|
||||||
|
/// </summary>
|
||||||
|
[HttpGet]
|
||||||
|
public async Task<IActionResult> CompleteJobModal(int id)
|
||||||
|
{
|
||||||
|
var job = await _unitOfWork.Jobs.LoadForDetailsAsync(id);
|
||||||
|
if (job == null) return NotFound();
|
||||||
|
var currentUser = await _userManager.GetUserAsync(User);
|
||||||
|
if (currentUser != null)
|
||||||
|
await PopulateEmailNotificationDefaultsAsync(currentUser.CompanyId);
|
||||||
|
var dto = _mapper.Map<JobDto>(job);
|
||||||
|
return PartialView("_CompleteJobModal", dto);
|
||||||
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Marks a job as completed, recording actual time spent and final price adjustments.
|
/// Marks a job as completed, recording actual time spent and final price adjustments.
|
||||||
/// Updates the CompletedDate, ActualTimeSpentHours, and FinalPrice fields, transitions to
|
/// Updates the CompletedDate, ActualTimeSpentHours, and FinalPrice fields, transitions to
|
||||||
|
|||||||
@@ -404,6 +404,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Container for the dynamically loaded Mark Complete modal -->
|
||||||
|
<div id="completeJobModalContainer"></div>
|
||||||
|
|
||||||
@section Scripts {
|
@section Scripts {
|
||||||
<script src="~/lib/sortablejs/Sortable.min.js"></script>
|
<script src="~/lib/sortablejs/Sortable.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
@@ -582,14 +585,13 @@
|
|||||||
if (newColEl === oldColEl && evt.newIndex === evt.oldIndex) return;
|
if (newColEl === oldColEl && evt.newIndex === evt.oldIndex) return;
|
||||||
|
|
||||||
// Completing a job requires the full completion flow (time, powder, email/SMS).
|
// Completing a job requires the full completion flow (time, powder, email/SMS).
|
||||||
// Revert the visual move and send the user to the Details page where the
|
// Fetch the Mark Complete modal partial and show it inline so the user
|
||||||
// Mark Complete modal captures all of that.
|
// never leaves the board.
|
||||||
if (newStatusCode === 'COMPLETED') {
|
if (newStatusCode === 'COMPLETED') {
|
||||||
oldColEl.insertBefore(card, oldColEl.children[evt.oldIndex] ?? null);
|
oldColEl.insertBefore(card, oldColEl.children[evt.oldIndex] ?? null);
|
||||||
updateCount(oldColEl);
|
updateCount(oldColEl);
|
||||||
updateCount(newColEl);
|
updateCount(newColEl);
|
||||||
showToast('Opening job to complete with full details…', true);
|
openCompleteModal(jobId);
|
||||||
setTimeout(() => { window.location.href = card.href + '#completeModal'; }, 600);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -668,6 +670,26 @@
|
|||||||
const badge = col.querySelector('.col-count');
|
const badge = col.querySelector('.col-count');
|
||||||
if (badge) badge.textContent = colEl.querySelectorAll('.board-card').length;
|
if (badge) badge.textContent = colEl.querySelectorAll('.board-card').length;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openCompleteModal(jobId) {
|
||||||
|
const container = document.getElementById('completeJobModalContainer');
|
||||||
|
fetch('@Url.Action("CompleteJobModal", "Jobs")' + '?id=' + jobId, {
|
||||||
|
headers: { 'RequestVerificationToken': token }
|
||||||
|
})
|
||||||
|
.then(r => {
|
||||||
|
if (!r.ok) throw new Error('Failed to load modal');
|
||||||
|
return r.text();
|
||||||
|
})
|
||||||
|
.then(html => {
|
||||||
|
container.innerHTML = html;
|
||||||
|
const modalEl = container.querySelector('.modal');
|
||||||
|
if (!modalEl) return;
|
||||||
|
const modal = new bootstrap.Modal(modalEl);
|
||||||
|
modalEl.addEventListener('hidden.bs.modal', () => { container.innerHTML = ''; }, { once: true });
|
||||||
|
modal.show();
|
||||||
|
})
|
||||||
|
.catch(() => showToast('Could not load completion form. Open the job to complete it.', false));
|
||||||
|
}
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1726,154 +1726,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Complete Job Modal -->
|
<!-- Complete Job Modal -->
|
||||||
<div class="modal fade" id="completeJobModal" tabindex="-1">
|
@await Html.PartialAsync("_CompleteJobModal", Model)
|
||||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
||||||
<div class="modal-content">
|
|
||||||
<form asp-action="CompleteJob" method="post">
|
|
||||||
<input type="hidden" name="JobId" value="@Model.Id" />
|
|
||||||
<div class="modal-header bg-success bg-opacity-10">
|
|
||||||
<h5 class="modal-title">
|
|
||||||
<i class="bi bi-check-circle me-2 text-success"></i>Complete Job: @Model.JobNumber
|
|
||||||
</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<!-- Actual Time Spent -->
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="actualTimeSpent" class="form-label fw-semibold">
|
|
||||||
<i class="bi bi-clock me-1 text-primary"></i>Actual Time Spent (hours)
|
|
||||||
</label>
|
|
||||||
<input type="number" class="form-control" id="actualTimeSpent" name="ActualTimeSpentHours"
|
|
||||||
step="0.25" min="0" placeholder="Enter total hours spent on this job">
|
|
||||||
<div class="form-text">Enter the total time in hours (e.g., 2.5 for 2 hours 30 minutes)</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Actual Powder Usage -->
|
|
||||||
@if (Model.Items != null && Model.Items.Any())
|
|
||||||
{
|
|
||||||
<div class="mb-3">
|
|
||||||
<h6 class="fw-semibold mb-3">
|
|
||||||
<i class="bi bi-palette me-1 text-primary"></i>Actual Powder Usage
|
|
||||||
</h6>
|
|
||||||
<div class="table-responsive">
|
|
||||||
<table class="table table-sm table-hover">
|
|
||||||
<thead class="table-light">
|
|
||||||
<tr>
|
|
||||||
<th>Item</th>
|
|
||||||
<th>Coat</th>
|
|
||||||
<th>Color</th>
|
|
||||||
<th class="text-end">Estimated (lbs)</th>
|
|
||||||
<th>Actual (lbs)</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
@{
|
|
||||||
var coatIndex = 0;
|
|
||||||
}
|
|
||||||
@foreach (var item in Model.Items)
|
|
||||||
{
|
|
||||||
@if (item.Coats != null && item.Coats.Any())
|
|
||||||
{
|
|
||||||
@foreach (var coat in item.Coats.OrderBy(c => c.Sequence))
|
|
||||||
{
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<small>@item.Description</small>
|
|
||||||
@if (item.Quantity > 1)
|
|
||||||
{
|
|
||||||
<span class="badge bg-secondary ms-1">×@item.Quantity</span>
|
|
||||||
}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<span class="badge bg-secondary">@coat.CoatName</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
@if (!string.IsNullOrEmpty(coat.ColorName))
|
|
||||||
{
|
|
||||||
<small>
|
|
||||||
@coat.ColorName
|
|
||||||
@if (!string.IsNullOrEmpty(coat.ColorCode))
|
|
||||||
{
|
|
||||||
<span class="text-muted">(@coat.ColorCode)</span>
|
|
||||||
}
|
|
||||||
</small>
|
|
||||||
}
|
|
||||||
</td>
|
|
||||||
<td class="text-end">
|
|
||||||
<small class="text-muted">@((coat.PowderToOrder ?? 0).ToString("0.##"))</small>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input type="hidden" name="CoatUsages[@coatIndex].JobItemCoatId" value="@coat.Id" />
|
|
||||||
<input type="number"
|
|
||||||
class="form-control form-control-sm"
|
|
||||||
name="CoatUsages[@coatIndex].ActualPowderUsedLbs"
|
|
||||||
step="0.01"
|
|
||||||
min="0"
|
|
||||||
placeholder="0.00"
|
|
||||||
style="max-width: 120px;">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
coatIndex++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<!-- Legacy job item without coats - just show item info -->
|
|
||||||
<tr class="table-secondary">
|
|
||||||
<td colspan="5">
|
|
||||||
<small class="text-muted fst-italic">
|
|
||||||
<i class="bi bi-info-circle me-1"></i>
|
|
||||||
@item.Description - No coat information available (legacy job item)
|
|
||||||
</small>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="alert alert-info mb-0">
|
|
||||||
<i class="bi bi-info-circle me-2"></i>
|
|
||||||
<small>Enter the actual amount of powder used for each coat. Leave blank if not tracked.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer justify-content-between">
|
|
||||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
|
||||||
@if (!string.IsNullOrWhiteSpace(Model.CustomerEmail))
|
|
||||||
{
|
|
||||||
<div class="form-check form-switch mb-0">
|
|
||||||
<input class="form-check-input" type="checkbox" role="switch"
|
|
||||||
id="completeJobSendEmail" name="SendEmailToCustomer" value="true"
|
|
||||||
@(ViewBag.EmailDefaultOnComplete == true ? "checked" : "") />
|
|
||||||
<label class="form-check-label small" for="completeJobSendEmail">
|
|
||||||
<i class="bi bi-envelope me-1"></i>Notify customer via email
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
@if (Model.CustomerNotifyBySms && !string.IsNullOrWhiteSpace(Model.CustomerMobilePhone))
|
|
||||||
{
|
|
||||||
<span class="badge bg-info text-white">
|
|
||||||
<i class="bi bi-phone me-1"></i>SMS notification will be sent
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
else if (!string.IsNullOrWhiteSpace(Model.CustomerMobilePhone) && !Model.CustomerNotifyBySms)
|
|
||||||
{
|
|
||||||
<span class="text-muted small"><i class="bi bi-phone-slash me-1"></i>SMS consent required</span>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</button>
|
|
||||||
<button type="submit" class="btn btn-success">
|
|
||||||
<i class="bi bi-check-circle me-1"></i>Mark as Completed
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- SMS Compose Modal (Admin/Manager only) -->
|
<!-- SMS Compose Modal (Admin/Manager only) -->
|
||||||
@if ((bool)(ViewBag.IsAdminOrManager ?? false) && (bool)(ViewBag.SmsEnabled ?? false))
|
@if ((bool)(ViewBag.IsAdminOrManager ?? false) && (bool)(ViewBag.SmsEnabled ?? false))
|
||||||
@@ -2440,12 +2293,6 @@
|
|||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
jobPhotoModule.init(@Model.Id, @Html.Raw(ViewBag.PhotoTagSuggestions ?? "[]"));
|
jobPhotoModule.init(@Model.Id, @Html.Raw(ViewBag.PhotoTagSuggestions ?? "[]"));
|
||||||
|
|
||||||
// Auto-open the Mark Complete modal when arriving from the job board
|
|
||||||
if (window.location.hash === '#completeModal') {
|
|
||||||
const modal = document.getElementById('completeJobModal');
|
|
||||||
if (modal) new bootstrap.Modal(modal).show();
|
|
||||||
history.replaceState(null, '', window.location.pathname + window.location.search);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Auto-submit after wizard saves an item ────────────────────────
|
// ── Auto-submit after wizard saves an item ────────────────────────
|
||||||
let itemsModified = false;
|
let itemsModified = false;
|
||||||
|
|||||||
@@ -0,0 +1,146 @@
|
|||||||
|
@model PowderCoating.Application.DTOs.Job.JobDto
|
||||||
|
@{
|
||||||
|
var emailDefault = ViewBag.EmailDefaultOnComplete == true;
|
||||||
|
}
|
||||||
|
<div class="modal fade" id="completeJobModal" tabindex="-1">
|
||||||
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
<form asp-action="CompleteJob" method="post">
|
||||||
|
@Html.AntiForgeryToken()
|
||||||
|
<input type="hidden" name="JobId" value="@Model.Id" />
|
||||||
|
<div class="modal-header bg-success bg-opacity-10">
|
||||||
|
<h5 class="modal-title">
|
||||||
|
<i class="bi bi-check-circle me-2 text-success"></i>Complete Job: @Model.JobNumber
|
||||||
|
</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="actualTimeSpent" class="form-label fw-semibold">
|
||||||
|
<i class="bi bi-clock me-1 text-primary"></i>Actual Time Spent (hours)
|
||||||
|
</label>
|
||||||
|
<input type="number" class="form-control" id="actualTimeSpent" name="ActualTimeSpentHours"
|
||||||
|
step="0.25" min="0" placeholder="Enter total hours spent on this job">
|
||||||
|
<div class="form-text">Enter the total time in hours (e.g., 2.5 for 2 hours 30 minutes)</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (Model.Items != null && Model.Items.Any())
|
||||||
|
{
|
||||||
|
<div class="mb-3">
|
||||||
|
<h6 class="fw-semibold mb-3">
|
||||||
|
<i class="bi bi-palette me-1 text-primary"></i>Actual Powder Usage
|
||||||
|
</h6>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-sm table-hover">
|
||||||
|
<thead class="table-light">
|
||||||
|
<tr>
|
||||||
|
<th>Item</th>
|
||||||
|
<th>Coat</th>
|
||||||
|
<th>Color</th>
|
||||||
|
<th class="text-end">Estimated (lbs)</th>
|
||||||
|
<th>Actual (lbs)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@{
|
||||||
|
var coatIndex = 0;
|
||||||
|
}
|
||||||
|
@foreach (var item in Model.Items)
|
||||||
|
{
|
||||||
|
if (item.Coats != null && item.Coats.Any())
|
||||||
|
{
|
||||||
|
foreach (var coat in item.Coats.OrderBy(c => c.Sequence))
|
||||||
|
{
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<small>@item.Description</small>
|
||||||
|
@if (item.Quantity > 1)
|
||||||
|
{
|
||||||
|
<span class="badge bg-secondary ms-1">×@item.Quantity</span>
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
<td><span class="badge bg-secondary">@coat.CoatName</span></td>
|
||||||
|
<td>
|
||||||
|
@if (!string.IsNullOrEmpty(coat.ColorName))
|
||||||
|
{
|
||||||
|
<small>
|
||||||
|
@coat.ColorName
|
||||||
|
@if (!string.IsNullOrEmpty(coat.ColorCode))
|
||||||
|
{
|
||||||
|
<span class="text-muted">(@coat.ColorCode)</span>
|
||||||
|
}
|
||||||
|
</small>
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
<td class="text-end">
|
||||||
|
<small class="text-muted">@((coat.PowderToOrder ?? 0).ToString("0.##"))</small>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input type="hidden" name="CoatUsages[@coatIndex].JobItemCoatId" value="@coat.Id" />
|
||||||
|
<input type="number"
|
||||||
|
class="form-control form-control-sm"
|
||||||
|
name="CoatUsages[@coatIndex].ActualPowderUsedLbs"
|
||||||
|
step="0.01" min="0" placeholder="0.00"
|
||||||
|
style="max-width: 120px;">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
coatIndex++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<tr class="table-secondary">
|
||||||
|
<td colspan="5">
|
||||||
|
<small class="text-muted fst-italic">
|
||||||
|
<i class="bi bi-info-circle me-1"></i>
|
||||||
|
@item.Description — No coat information available (legacy job item)
|
||||||
|
</small>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info mb-0">
|
||||||
|
<i class="bi bi-info-circle me-2"></i>
|
||||||
|
<small>Enter the actual amount of powder used for each coat. Leave blank if not tracked.</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer justify-content-between">
|
||||||
|
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||||
|
@if (!string.IsNullOrWhiteSpace(Model.CustomerEmail))
|
||||||
|
{
|
||||||
|
<div class="form-check form-switch mb-0">
|
||||||
|
<input class="form-check-input" type="checkbox" role="switch"
|
||||||
|
id="completeJobSendEmail" name="SendEmailToCustomer" value="true"
|
||||||
|
@(emailDefault ? "checked" : "") />
|
||||||
|
<label class="form-check-label small" for="completeJobSendEmail">
|
||||||
|
<i class="bi bi-envelope me-1"></i>Notify customer via email
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
@if (Model.CustomerNotifyBySms && !string.IsNullOrWhiteSpace(Model.CustomerMobilePhone))
|
||||||
|
{
|
||||||
|
<span class="badge bg-info text-white">
|
||||||
|
<i class="bi bi-phone me-1"></i>SMS notification will be sent
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
else if (!string.IsNullOrWhiteSpace(Model.CustomerMobilePhone) && !Model.CustomerNotifyBySms)
|
||||||
|
{
|
||||||
|
<span class="text-muted small"><i class="bi bi-phone-slash me-1"></i>SMS consent required</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</button>
|
||||||
|
<button type="submit" class="btn btn-success">
|
||||||
|
<i class="bi bi-check-circle me-1"></i>Mark as Completed
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -1,12 +1,15 @@
|
|||||||
// Browser-aware install UX for supported PWAs.
|
// Browser-aware install UX for supported PWAs.
|
||||||
// Shows a real install button only when the browser exposes the install prompt,
|
// Shows a real install button only when the browser exposes the install prompt,
|
||||||
// and falls back to platform-specific instructions for iOS Safari.
|
// and falls back to platform-specific instructions for iOS Safari.
|
||||||
|
// After install the button is hidden; if the user later uninstalls, the browser
|
||||||
|
// re-fires beforeinstallprompt which clears the flag and shows the button again.
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const installBtn = document.getElementById('installAppBtn');
|
const installBtn = document.getElementById('installAppBtn');
|
||||||
if (!installBtn) return;
|
if (!installBtn) return;
|
||||||
|
|
||||||
|
const INSTALLED_KEY = 'pclAppInstalled';
|
||||||
const ua = navigator.userAgent || '';
|
const ua = navigator.userAgent || '';
|
||||||
const isIos = /iphone|ipad|ipod/i.test(ua);
|
const isIos = /iphone|ipad|ipod/i.test(ua);
|
||||||
const isIosSafari = isIos && /safari/i.test(ua) && !/crios|fxios|edgios/i.test(ua);
|
const isIosSafari = isIos && /safari/i.test(ua) && !/crios|fxios|edgios/i.test(ua);
|
||||||
@@ -51,6 +54,13 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Hide if already installed and browser hasn't re-offered the prompt
|
||||||
|
// (flag is cleared automatically when beforeinstallprompt fires again after uninstall)
|
||||||
|
if (localStorage.getItem(INSTALLED_KEY) === '1') {
|
||||||
|
hideInstallButton();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (deferredPrompt) {
|
if (deferredPrompt) {
|
||||||
showInstallButton('prompt', 'Install App', 'bi-download');
|
showInstallButton('prompt', 'Install App', 'bi-download');
|
||||||
return;
|
return;
|
||||||
@@ -64,14 +74,18 @@
|
|||||||
hideInstallButton();
|
hideInstallButton();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Browser fires this when the app becomes installable (including after an uninstall).
|
||||||
|
// Clearing the flag here ensures the button reappears if the user previously uninstalled.
|
||||||
window.addEventListener('beforeinstallprompt', function (event) {
|
window.addEventListener('beforeinstallprompt', function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
deferredPrompt = event;
|
deferredPrompt = event;
|
||||||
|
localStorage.removeItem(INSTALLED_KEY);
|
||||||
refreshInstallUi();
|
refreshInstallUi();
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('appinstalled', function () {
|
window.addEventListener('appinstalled', function () {
|
||||||
deferredPrompt = null;
|
deferredPrompt = null;
|
||||||
|
localStorage.setItem(INSTALLED_KEY, '1');
|
||||||
hideInstallButton();
|
hideInstallButton();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -84,7 +98,10 @@
|
|||||||
deferredPrompt.prompt();
|
deferredPrompt.prompt();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await deferredPrompt.userChoice;
|
const choice = await deferredPrompt.userChoice;
|
||||||
|
if (choice.outcome === 'accepted') {
|
||||||
|
localStorage.setItem(INSTALLED_KEY, '1');
|
||||||
|
}
|
||||||
} catch {
|
} catch {
|
||||||
// Ignore prompt result errors; the browser owns the final install flow.
|
// Ignore prompt result errors; the browser owns the final install flow.
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user