119 lines
4.1 KiB
JavaScript
119 lines
4.1 KiB
JavaScript
const APP_ASSET_VERSION = window.__APP_ASSET_VERSION__
|
|
|| new URL(import.meta.url).searchParams.get('v')
|
|
|| 'dev';
|
|
|
|
let getRecipeListHTML;
|
|
let setupRecipeList;
|
|
let getFilterHTML;
|
|
let setupFilter;
|
|
let getRecipeDetailHTML;
|
|
let setupRecipeDetail;
|
|
let getMealPlannerHTML;
|
|
let setupMealPlanner;
|
|
let getPantryHTML;
|
|
let refreshPantry;
|
|
let setupPantry;
|
|
let getMealPlanEditorHTML;
|
|
let setupMealPlanEditor;
|
|
let getBottomNavHTML;
|
|
let setupBottomNav;
|
|
|
|
const moduleLoadPromise = Promise.all([
|
|
import(`./views/RecipeList.js?v=${APP_ASSET_VERSION}`),
|
|
import(`./views/Filter.js?v=${APP_ASSET_VERSION}`),
|
|
import(`./views/RecipeDetailV2.js?v=${APP_ASSET_VERSION}`),
|
|
import(`./views/MealPlanner.js?v=${APP_ASSET_VERSION}`),
|
|
import(`./views/Pantry.js?v=${APP_ASSET_VERSION}`),
|
|
import(`./ui/mealPlanEditor.js?v=${APP_ASSET_VERSION}`),
|
|
import(`./ui/bottomNav.js?v=${APP_ASSET_VERSION}`),
|
|
]).then(([
|
|
recipeListModule,
|
|
filterModule,
|
|
recipeDetailModule,
|
|
mealPlannerModule,
|
|
pantryModule,
|
|
mealPlanEditorModule,
|
|
bottomNavModule,
|
|
]) => {
|
|
({ getRecipeListHTML, setupRecipeList } = recipeListModule);
|
|
({ getFilterHTML, setupFilter } = filterModule);
|
|
({ getRecipeDetailHTML, setupRecipeDetail } = recipeDetailModule);
|
|
({ getMealPlannerHTML, setupMealPlanner } = mealPlannerModule);
|
|
({ getPantryHTML, refreshPantry, setupPantry } = pantryModule);
|
|
({ getMealPlanEditorHTML, setupMealPlanEditor } = mealPlanEditorModule);
|
|
({ getBottomNavHTML, setupBottomNav } = bottomNavModule);
|
|
});
|
|
|
|
function getAppToastHTML() {
|
|
return `
|
|
<div id="app-toast" class="pointer-events-none absolute left-4 right-4 bottom-28 z-[60] opacity-0 translate-y-2 transition-all duration-300" role="status">
|
|
<div class="rounded-xl bg-gray-900 text-white text-sm font-medium px-4 py-3 shadow-lg text-center" id="app-toast-text"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
let initAppPromise = null;
|
|
|
|
function renderAppBootError(message) {
|
|
const appContainer = document.getElementById('app-container');
|
|
if (!appContainer) return;
|
|
|
|
appContainer.innerHTML = `
|
|
<div class="flex h-full items-center justify-center px-6 text-center" style="background:#2d2e2b !important;">
|
|
<div class="max-w-[18rem] rounded-[1.5rem] border px-5 py-6" style="background:#2f2f2d !important; border-color:#444442 !important;">
|
|
<p class="text-sm font-semibold" style="color:#f2efe8 !important;">Nie udało się uruchomić aplikacji</p>
|
|
<p class="mt-2 text-xs leading-relaxed" style="color:#b7ada1 !important;">${message}</p>
|
|
<button type="button" onclick="window.location.reload()" class="mt-4 h-10 px-4 rounded-full border text-[12px] font-semibold" style="background:#23221e !important; border-color:#787876 !important; color:#f2efe8 !important;">Odśwież aplikację</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async function initApp() {
|
|
if (initAppPromise) return initAppPromise;
|
|
|
|
initAppPromise = (async () => {
|
|
await moduleLoadPromise;
|
|
|
|
const appContainer = document.getElementById('app-container');
|
|
if (!appContainer) return;
|
|
|
|
appContainer.innerHTML = `
|
|
${getRecipeListHTML()}
|
|
${getMealPlannerHTML()}
|
|
${getPantryHTML()}
|
|
${getBottomNavHTML()}
|
|
${getRecipeDetailHTML()}
|
|
${getFilterHTML()}
|
|
${getMealPlanEditorHTML()}
|
|
${getAppToastHTML()}
|
|
`;
|
|
|
|
setupBottomNav({ refreshPantry });
|
|
setupRecipeList();
|
|
setupMealPlanner();
|
|
setupPantry();
|
|
setupFilter();
|
|
setupMealPlanEditor();
|
|
setupRecipeDetail();
|
|
})().catch((error) => {
|
|
initAppPromise = null;
|
|
throw error;
|
|
});
|
|
|
|
return initAppPromise;
|
|
}
|
|
|
|
function bootApp() {
|
|
initApp().catch((error) => {
|
|
console.error('Failed to initialize app', error);
|
|
renderAppBootError('Spróbuj odświeżyć aplikację. Jeśli problem wróci, zamknij ją całkowicie i otwórz ponownie.');
|
|
});
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', bootApp, { once: true });
|
|
} else {
|
|
bootApp();
|
|
}
|