App first launch fix

// ✅ Corrected main view with `url` set:
window.mainView = window.f7App.views.create('.view-main', {
url: '/'
});

// Start the app after permissions
function startApp() {
navigator.splashscreen.hide();
initializeApp();
}

// Handle camera permissions on Android
if (cordova.platformId === 'android' && cordova.plugins?.permissions) {
const permissions = cordova.plugins.permissions;
permissions.checkPermission(permissions.CAMERA, function (status) {
if (status.hasPermission) {
startApp();
} else {
permissions.requestPermission(
permissions.CAMERA,
function (status) {
status.hasPermission ? startApp() : navigator.app.exitApp();
},
function () {
navigator.app.exitApp();
}
);
}
});
} else {
startApp(); // iOS or browser
}
}, false);

// Main App Initialization
function initializeApp() {
window.TOKEN = 'fossettscircustoken';
window.eventId = -1;
window.eventDateId = -1;
window.ApiUrl = 'https://staging.fossettscircus.com/boxoffice/index.php/api/';

let scanInProgress = false;
let alertVisible = false;

const scanConfig = {
preferFrontCamera: false,
showFlipCameraButton: true,
showTorchButton: true,
torchOn: false,
saveHistory: false,
prompt: "Place a code inside the scan area",
resultDisplayDuration: 500,
formats: "QR_CODE",
disableAnimations: true,
disableSuccessBeep: false
};

function showAlert(message, title = 'Alert') {
if (alertVisible) return;
alertVisible = true;
f7App.dialog.alert(message, title, () => {
alertVisible = false;
});
}

// Home Page
f7App.on('pageAfterIn', function (page) {
if (page.name === 'home') {
loadEvents();
$(document).off('click', '.reload-events').on('click', '.reload-events', loadEvents);
}
});

// Event Details Page
f7App.on('pageInit', function (page) {
if (page.name === 'event-details') {
const query = page.route.query;
const title = query.title || 'No Title';
const location = query.location || '';
const time = query.time || '';
const code = query.code || '';
eventDateId = query.eventDateId || -1;
eventId = query.eventId || -1;

page.$el.find('.event-title').text(title);
page.$el.find('.event-location').text(location);
page.$el.find('.event-time').text(time);
page.$el.find('input[name="code"]').val(code);

function sendCode(code, type) {
f7App.dialog.preloader(type === 'qr' ? 'Scanning code…' : 'Sending code…');
$('.scan, .manually').prop('disabled', true);

$('#scan-result').removeClass('bg-success').addClass('bg-dark')
.html(`Code ${code} sent to boxoffice, please wait…`);

$.ajax({
url: `${ApiUrl}scan`,
method: 'POST',
data: {
token: TOKEN,
event_date_id: eventDateId,
order_code: code
},
success: function (result) {
const apiResult = JSON.parse(result);
if (apiResult.result) {
$('#scan-result').removeClass('bg-dark').addClass('bg-success')
.html(`${apiResult.message}${apiResult.seating}${apiResult.tickets}`);
showAlert(apiResult.message, 'Scan Success');
$('[name="code"]').val(`${eventId}.${eventDateId}.`);
} else {
$('#scan-result').removeClass('bg-success').addClass('bg-dark').html(apiResult.message);
showAlert(apiResult.message, 'Scan Failed');
}
},
error: function () {
$('#scan-result').removeClass('bg-success').addClass('bg-dark')
.html(`Code ${code} could not be sent to boxoffice, please try again`);
showAlert('Scan failed. Please try again.', 'Scan Failed');
},
complete: function () {
$('.scan, .manually').prop('disabled', false);
f7App.dialog.close();
scanInProgress = false;
}
});
}

function scanSuccess(result) {
scanInProgress = false;
if (!result.cancelled) {
if (eventDateId > -1) {
sendCode(result.text, 'qr');
} else {
$('#scan-result').removeClass('bg-success').addClass('bg-dark')
.html('You must select an event date to scan tickets');
}
} else {
$('#scan-result').removeClass('bg-success').addClass('bg-dark')
.html('Scan was cancelled');
}
}

function scanError(error) {
scanInProgress = false;
$('#scan-result').removeClass('bg-success').addClass('bg-dark')
.html(`Scanning failed: ${error}`);
showAlert(`Scanning failed: ${error}`, 'Scan Error');
}

$(document).off('click', '.scan').on('click', '.scan', function () {
if (scanInProgress) {
showAlert('Scan is already in progress. Please wait.', 'Please Wait');
return;
}
scanInProgress = true;
cordova.plugins.barcodeScanner.scan(scanSuccess, scanError, scanConfig);
});

$(document).off('click', '.manually').on('click', '.manually', function () {
sendCode($('[name="code"]').val(), 'manual');
});
}
});

// Reset scan state when navigating away from event-details
f7App.on('pageBeforeRemove', function (page) {
if (page.name === 'event-details') {
scanInProgress = false;
$(document).off('click', '.scan');
$(document).off('click', '.manually');
}
});
}

// Load Events Function
function loadEvents() {
f7App.dialog.preloader('Loading events…');
$.ajax({
url: `${ApiUrl}today`,
method: 'POST',
data: {
token: TOKEN
},
success: function (result) {
const events = JSON.parse(result);
const $container = $('div.events');
$container.html('');
const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

if (events.result) {
events.data.forEach(val => {
const eventDatetime = new Date(val.event_datetime);
const dateOptions = { year: '2-digit', month: '2-digit', day: '2-digit' };
const timeOptions = { hour12: true, hour: '2-digit', minute: '2-digit' };
const dayname = weekday[eventDatetime.getDay()];
const code = `${val.event_id}.${val.event_date_id}.`;

const html = `

${val.venue_title}-${val.venue_full}
${dayname} at ${eventDatetime.toLocaleDateString('en-GB', dateOptions)} – ${eventDatetime.toLocaleTimeString('en-US', timeOptions)}

0/500

`;
$container.append(html);
});
} else {
$container.html(`${events.message}`);
}
},
error: function () {
f7App.dialog.alert('Something went wrong. Please try again.', 'Error');
},
complete: function () {
f7App.dialog.close();
}
});
}

first when app installs then open at that case event not loading but when open after close the app event is loading

### ✅ Solution

Add a check to manually trigger `loadEvents()` when the app is first initialized and the page is already `home`:

Update the `initializeApp()` function like this:

function initializeApp() {
  window.TOKEN = 'fossettscircustoken';
  window.eventId = -1;
  window.eventDateId = -1;
  window.ApiUrl = 'https://staging.fossettscircus.com/boxoffice/index.php/api/';

  let scanInProgress = false;
  let alertVisible = false;

  const scanConfig = {
    // ... unchanged
  };

  function showAlert(message, title = 'Alert') {
    // ... unchanged
  }

  // ✅ Check current route on initial load
  const currentRoute = f7App.views.main.router.currentRoute;
  if (currentRoute?.url === '/' || currentRoute?.path === '/') {
    // This handles first launch (initial load of home page)
    loadEvents();
    $(document).off('click', '.reload-events').on('click', '.reload-events', loadEvents);
  }

  // Home Page
  f7App.on('pageAfterIn', function (page) {
    if (page.name === 'home') {
      loadEvents();
      $(document).off('click', '.reload-events').on('click', '.reload-events', loadEvents);
    }
  });

  // ... rest of your code (event-details handling etc.)
}

### 🔍 Why This Fix Works

– On first launch, Framework7 loads the `/` page **without triggering navigation**, so lifecycle events like `pageAfterIn` are **not fired**.
– By manually checking `currentRoute` and calling `loadEvents()` if it's home, we ensure that the event list is loaded properly on first app install.

Let me know if you'd like a loading spinner on initial home load as well!