Compare commits
4 Commits
c11f184d1c
...
e83fb49d6b
| Author | SHA1 | Date | |
|---|---|---|---|
| e83fb49d6b | |||
| b44b985e76 | |||
| bfe3074a26 | |||
| 20424b4ecb |
6
.idea/misc.xml
generated
Normal file
6
.idea/misc.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectRootManager" version="2" project-jdk-name="25" project-jdk-type="JavaSDK">
|
||||
<output url="file://$PROJECT_DIR$/out" />
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/recipe-mockup.iml" filepath="$PROJECT_DIR$/.idea/recipe-mockup.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
9
.idea/recipe-mockup.iml
generated
Normal file
9
.idea/recipe-mockup.iml
generated
Normal file
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="JAVA_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
163
.idea/workspace.xml
generated
Normal file
163
.idea/workspace.xml
generated
Normal file
@@ -0,0 +1,163 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="AutoImportSettings">
|
||||
<option name="autoReloadType" value="SELECTIVE" />
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="ae0e4ce8-372f-4cfd-a04f-600640f32223" name="Changes" comment="Redesign meal plan editor">
|
||||
<change beforePath="$PROJECT_DIR$/VIEWS_AND_SCENARIOS.md" beforeDir="false" afterPath="$PROJECT_DIR$/VIEWS_AND_SCENARIOS.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/js/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/app.js" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/js/ui/mealPlanEditor.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/ui/mealPlanEditor.js" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/js/views/RecipeDetail.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/js/views/RecipeDetailV2.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/views/RecipeDetailV2.js" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="ChangesViewManager">
|
||||
<option name="groupingKeys">
|
||||
<option value="directory" />
|
||||
<option value="repository" />
|
||||
</option>
|
||||
</component>
|
||||
<component name="EmbeddingIndexingInfo">
|
||||
<option name="cachedIndexableFilesCount" value="35" />
|
||||
<option name="fileBasedEmbeddingIndicesEnabled" value="true" />
|
||||
</component>
|
||||
<component name="Git.Settings">
|
||||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||
</component>
|
||||
<component name="KubernetesApiPersistence"><![CDATA[{}]]></component>
|
||||
<component name="KubernetesApiProvider"><![CDATA[{
|
||||
"isMigrated": true
|
||||
}]]></component>
|
||||
<component name="McpProjectServerCommands">
|
||||
<commands />
|
||||
<urls />
|
||||
</component>
|
||||
<component name="ProjectColorInfo"><![CDATA[{
|
||||
"associatedIndex": 8,
|
||||
"fromUser": false
|
||||
}]]></component>
|
||||
<component name="ProjectId" id="3BqiA2Jye2iyFuy4jKirNGx94l7" />
|
||||
<component name="ProjectViewState">
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent"><![CDATA[{
|
||||
"keyToString": {
|
||||
"ModuleVcsDetector.initialDetectionPerformed": "true",
|
||||
"RunOnceActivity.MCP Project settings loaded": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252": "true",
|
||||
"RunOnceActivity.cidr.known.project.marker": "true",
|
||||
"RunOnceActivity.git.unshallow": "true",
|
||||
"RunOnceActivity.readMode.enableVisualFormatting": "true",
|
||||
"RunOnceActivity.typescript.service.memoryLimit.init": "true",
|
||||
"cidr.known.project.marker": "true",
|
||||
"codeWithMe.voiceChat.enabledByDefault": "false",
|
||||
"com.intellij.ml.llm.matterhorn.ej.ui.settings.DefaultModelSelectionForGA.v1": "true",
|
||||
"git-widget-placeholder": "master",
|
||||
"junie.onboarding.icon.badge.shown": "true",
|
||||
"kotlin-language-version-configured": "true",
|
||||
"last_opened_file_path": "/Users/rwilk/dev/repo/recipe-mockup",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.detected.package.tslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"settings.editor.selected.configurable": "consents",
|
||||
"to.speed.mode.migration.done": "true",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
}
|
||||
}]]></component>
|
||||
<component name="RunManager">
|
||||
<configuration default="true" type="AppleRunConfiguration" factoryName="Application" REDIRECT_INPUT="false" ELEVATE="false" USE_EXTERNAL_CONSOLE="false" EMULATE_TERMINAL="false" PASS_PARENT_ENVS_2="true" IS_LOCATION_SIMULATION_SUPPORTED="false" IS_LOCATION_SIMULATION_ALLOWED="true" APPLICATION_LANGUAGE="IDELaunchSchemeLanguageUseSystemLanguage" APPLICATION_REGION="" DEVELOPMENT_TEAM="${TEAM_ID}" MAKE_ACTIVE="TRUE" SHOULD_DEBUG_EXTENSIONS="false">
|
||||
<embedded_app_extension_list />
|
||||
<method v="2">
|
||||
<option name="com.jetbrains.cidr.execution.CidrBuildBeforeRunTaskProvider$BuildBeforeRunTask" enabled="true" />
|
||||
</method>
|
||||
</configuration>
|
||||
</component>
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="Default task">
|
||||
<changelist id="ae0e4ce8-372f-4cfd-a04f-600640f32223" name="Changes" comment="" />
|
||||
<created>1775222853874</created>
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1775222853874</updated>
|
||||
<workItem from="1775222854878" duration="5449000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="Rework calendar">
|
||||
<option name="closed" value="true" />
|
||||
<created>1775314482369</created>
|
||||
<option name="number" value="00001" />
|
||||
<option name="presentableId" value="LOCAL-00001" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1775314482369</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00002" summary="Redesign meal plan editor">
|
||||
<option name="closed" value="true" />
|
||||
<created>1775332140771</created>
|
||||
<option name="number" value="00002" />
|
||||
<option name="presentableId" value="LOCAL-00002" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1775332140771</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="3" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="3" />
|
||||
</component>
|
||||
<component name="Vcs.Log.Tabs.Properties">
|
||||
<option name="RECENT_FILTERS">
|
||||
<map>
|
||||
<entry key="Branch">
|
||||
<value>
|
||||
<list>
|
||||
<RecentGroup>
|
||||
<option name="FILTER_VALUES">
|
||||
<option value="HEAD" />
|
||||
</option>
|
||||
</RecentGroup>
|
||||
</list>
|
||||
</value>
|
||||
</entry>
|
||||
</map>
|
||||
</option>
|
||||
<option name="TAB_STATES">
|
||||
<map>
|
||||
<entry key="MAIN">
|
||||
<value>
|
||||
<State>
|
||||
<option name="CUSTOM_BOOLEAN_PROPERTIES">
|
||||
<map>
|
||||
<entry key="Show.Git.Branches" value="false" />
|
||||
</map>
|
||||
</option>
|
||||
<option name="FILTERS">
|
||||
<map>
|
||||
<entry key="branch">
|
||||
<value>
|
||||
<list>
|
||||
<option value="HEAD" />
|
||||
</list>
|
||||
</value>
|
||||
</entry>
|
||||
</map>
|
||||
</option>
|
||||
</State>
|
||||
</value>
|
||||
</entry>
|
||||
</map>
|
||||
</option>
|
||||
</component>
|
||||
<component name="VcsManagerConfiguration">
|
||||
<MESSAGE value="Rework calendar" />
|
||||
<MESSAGE value="Redesign meal plan editor" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="Redesign meal plan editor" />
|
||||
</component>
|
||||
</project>
|
||||
@@ -47,7 +47,6 @@ js/
|
||||
RecipeList.js ← lista przepisów
|
||||
Filter.js ← overlay filtrów
|
||||
RecipeDetailV2.js ← detal przepisu (aktywna wersja)
|
||||
RecipeDetail.js ← detal przepisu (oryginał, nieużywany — 3-zakładkowy)
|
||||
MealPlanner.js ← planer posiłków + kalendarz
|
||||
Pantry.js ← spiżarnia
|
||||
Shopping.js ← listy zakupów
|
||||
@@ -88,8 +87,6 @@ Slide-in overlay z detalami przepisu. Dwie zakładki: **Składniki** i **Kroki**
|
||||
3. Wymienne składniki — **wstępnie ustawione z wyborów na liście składników**, z możliwością dalszej zmiany
|
||||
4. Przycisk "Dodaj" → zapis do `planStore` (z opcjonalnym obiektem `substitutions`)
|
||||
|
||||
> **Uwaga:** Istnieje starsza wersja (`RecipeDetail.js`) z 3 zakładkami (Składniki, Kroki, Wartości) i read-only alternatywami. Aktualnie nieużywana — import w `app.js` wskazuje na `RecipeDetailV2.js`.
|
||||
|
||||
**Model danych — wymienne składniki:**
|
||||
- W `RECIPES`, składnik może mieć pole `alternatives: ['id1', 'id2', ...]`
|
||||
- Wybrane zamienniki zapisywane jako `substitutions: { originalId: chosenAltId }` w `planStore`
|
||||
|
||||
425
index.html
425
index.html
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="theme-color" content="#0d0d0d">
|
||||
<meta name="theme-color" content="#2d2e2b">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="Recipe">
|
||||
@@ -11,173 +11,320 @@
|
||||
<link rel="manifest" href="./manifest.webmanifest">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
|
||||
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
* { touch-action: manipulation; }
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--app-font: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
|
||||
--app-bg-rgb: 243, 239, 233;
|
||||
--surface-rgb: 255, 255, 255;
|
||||
--surface-soft-rgb: 247, 242, 236;
|
||||
--surface-strong-rgb: 235, 229, 221;
|
||||
--line-rgb: 69, 58, 48;
|
||||
--text-primary-rgb: 28, 24, 21;
|
||||
--text-secondary-rgb: 102, 92, 83;
|
||||
--text-tertiary-rgb: 156, 146, 137;
|
||||
--accent-rgb: 111, 149, 255;
|
||||
--warm-rgb: 183, 142, 88;
|
||||
--success-rgb: 98, 171, 132;
|
||||
--danger-rgb: 210, 116, 116;
|
||||
--panel-shadow: 0 18px 40px rgba(24, 17, 11, 0.08);
|
||||
--panel-shadow-strong: 0 24px 60px rgba(24, 17, 11, 0.16);
|
||||
--dock-shadow: 0 24px 56px rgba(24, 17, 11, 0.18);
|
||||
--highlight-top: rgba(111, 149, 255, 0.14);
|
||||
--highlight-bottom: rgba(97, 184, 180, 0.12);
|
||||
}
|
||||
|
||||
.dark {
|
||||
color-scheme: dark;
|
||||
--app-bg-rgb: 45, 46, 43;
|
||||
--surface-rgb: 37, 35, 33;
|
||||
--surface-soft-rgb: 46, 43, 40;
|
||||
--surface-strong-rgb: 58, 55, 51;
|
||||
--line-rgb: 255, 249, 239;
|
||||
--text-primary-rgb: 246, 241, 232;
|
||||
--text-secondary-rgb: 183, 173, 161;
|
||||
--text-tertiary-rgb: 129, 121, 112;
|
||||
--accent-rgb: 134, 171, 255;
|
||||
--warm-rgb: 198, 156, 101;
|
||||
--success-rgb: 109, 194, 144;
|
||||
--danger-rgb: 220, 127, 127;
|
||||
--panel-shadow: 0 22px 56px rgba(0, 0, 0, 0.24);
|
||||
--panel-shadow-strong: 0 30px 82px rgba(0, 0, 0, 0.42);
|
||||
--dock-shadow: 0 30px 84px rgba(0, 0, 0, 0.42);
|
||||
--highlight-top: transparent;
|
||||
--highlight-bottom: transparent;
|
||||
}
|
||||
|
||||
* { touch-action: manipulation; }
|
||||
html, body { min-height: 100%; }
|
||||
body {
|
||||
font-family: var(--app-font);
|
||||
background: rgb(var(--app-bg-rgb));
|
||||
color: rgb(var(--text-primary-rgb));
|
||||
}
|
||||
button, input, select, textarea { font-family: inherit; }
|
||||
button { -webkit-tap-highlight-color: transparent; }
|
||||
#app-container {
|
||||
background: transparent !important;
|
||||
isolation: isolate;
|
||||
}
|
||||
#app-container::before,
|
||||
#app-container::after { display: none; }
|
||||
/* Slider styling */
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%;
|
||||
background: #111827; cursor: pointer; margin-top: -8px;
|
||||
-webkit-appearance: none;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgb(var(--accent-rgb));
|
||||
border: 2px solid rgba(var(--surface-rgb), 0.9);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
|
||||
cursor: pointer;
|
||||
margin-top: -8px;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%; height: 4px; cursor: pointer; background: #e5e7eb; border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
cursor: pointer;
|
||||
background: rgba(var(--line-rgb), 0.16);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.dark input[type=range]::-webkit-slider-thumb { background: #e8e8e8; }
|
||||
.dark input[type=range]::-webkit-slider-runnable-track { background: #333333; }
|
||||
|
||||
/* Ingredient Active States */
|
||||
.ingredient-active .check-box,
|
||||
.ingredient-active .rd-check-box { background-color: #111827; border-color: #111827; }
|
||||
.ingredient-active .rd-check-box { background-color: rgba(var(--surface-strong-rgb), 1); border-color: rgba(var(--surface-strong-rgb), 1); }
|
||||
.ingredient-active .check-icon,
|
||||
.ingredient-active .rd-check-icon { display: block; }
|
||||
.ingredient-active .ingredient-text,
|
||||
.ingredient-active .rd-ing-text { text-decoration: line-through; color: #9ca3af; }
|
||||
.dark .ingredient-active .check-box,
|
||||
.dark .ingredient-active .rd-check-box { background-color: #f0f0f0; border-color: #f0f0f0; }
|
||||
.ingredient-active .rd-ing-text { text-decoration: line-through; color: rgba(var(--text-tertiary-rgb), 0.94); }
|
||||
|
||||
/* Utilities */
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
|
||||
|
||||
/* ===== Dark Mode Overrides ===== */
|
||||
.dark { color-scheme: dark; }
|
||||
|
||||
/* --- Gray backgrounds --- */
|
||||
.dark .bg-white { background-color: #1a1a1a !important; }
|
||||
.dark .bg-gray-50 { background-color: #0d0d0d !important; }
|
||||
.dark .bg-gray-100 { background-color: #242424 !important; }
|
||||
.dark .bg-gray-200 { background-color: #2e2e2e !important; }
|
||||
.dark .bg-gray-900 { background-color: #f0f0f0 !important; }
|
||||
.dark .bg-gray-900.text-white,
|
||||
.dark .bg-gray-900 .text-white { color: #0d0d0d !important; }
|
||||
.dark .border-gray-900 { border-color: #f0f0f0 !important; }
|
||||
|
||||
/* Semi-transparent backgrounds */
|
||||
.dark .bg-white\/90 { background-color: rgba(26, 26, 26, 0.92) !important; }
|
||||
.dark .bg-white\/80 { background-color: rgba(26, 26, 26, 0.85) !important; }
|
||||
.dark .bg-gray-50\/80 { background-color: rgba(20, 20, 20, 0.85) !important; }
|
||||
.dark .bg-gray-50\/90 { background-color: rgba(20, 20, 20, 0.92) !important; }
|
||||
|
||||
/* --- Gray text --- */
|
||||
.dark .text-gray-900 { color: #f5f5f5 !important; }
|
||||
.dark .text-gray-800 { color: #e8e8e8 !important; }
|
||||
.dark .text-gray-700 { color: #d4d4d4 !important; }
|
||||
.dark .text-gray-600 { color: #a0a0a0 !important; }
|
||||
.dark .text-gray-500 { color: #888888 !important; }
|
||||
.dark .text-gray-400 { color: #666666 !important; }
|
||||
.dark .text-gray-300 { color: #444444 !important; }
|
||||
.dark .text-black { color: #ffffff !important; }
|
||||
|
||||
/* --- Gray borders --- */
|
||||
.dark .border-gray-200 { border-color: #2a2a2a !important; }
|
||||
.dark .border-gray-100 { border-color: #1f1f1f !important; }
|
||||
.dark .border-gray-300 { border-color: #333333 !important; }
|
||||
|
||||
/* --- Dividers --- */
|
||||
.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: #1a1a1a !important; }
|
||||
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1f1f1f !important; }
|
||||
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2a2a2a !important; }
|
||||
.dark .divide-red-50 > :not([hidden]) ~ :not([hidden]) { border-color: #2a1a1a !important; }
|
||||
|
||||
/* --- Ring utilities --- */
|
||||
.dark .ring-gray-200 { --tw-ring-color: #2a2a2a !important; }
|
||||
.dark .ring-gray-900 { --tw-ring-color: #f0f0f0 !important; }
|
||||
|
||||
/* --- Hover states --- */
|
||||
.dark .hover\:bg-gray-50:hover { background-color: #1f1f1f !important; }
|
||||
.dark .hover\:bg-gray-100:hover { background-color: #2e2e2e !important; }
|
||||
.dark .hover\:bg-white:hover { background-color: #242424 !important; }
|
||||
.dark .hover\:text-gray-700:hover { color: #e8e8e8 !important; }
|
||||
.dark .hover\:text-gray-900:hover { color: #f5f5f5 !important; }
|
||||
.dark .hover\:text-black:hover { color: #ffffff !important; }
|
||||
.dark .hover\:bg-black:hover { background-color: #e0e0e0 !important; color: #0d0d0d !important; }
|
||||
.dark .hover\:bg-red-50:hover { background-color: #2a1a1a !important; }
|
||||
.dark .hover\:border-gray-300:hover { border-color: #444444 !important; }
|
||||
.dark .hover\:border-gray-400:hover { border-color: #555555 !important; }
|
||||
.dark .hover\:border-gray-900:hover { border-color: #f0f0f0 !important; }
|
||||
.dark .hover\:border-red-200:hover { border-color: #5c2020 !important; }
|
||||
|
||||
/* --- Focus --- */
|
||||
.dark .focus\:border-gray-400:focus { border-color: #555555 !important; }
|
||||
.dark .focus\:border-gray-300:focus { border-color: #444444 !important; }
|
||||
|
||||
/* --- Shadows --- */
|
||||
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4) !important; }
|
||||
.dark .shadow-sm { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4) !important; }
|
||||
.dark .border-dashed { border-color: #333333 !important; }
|
||||
|
||||
/* --- Inputs --- */
|
||||
.dark input, .dark select, .dark textarea {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #e8e8e8 !important;
|
||||
border-color: #2a2a2a !important;
|
||||
/* Shared palette overrides */
|
||||
.bg-white { background-color: rgba(var(--surface-rgb), 0.9) !important; }
|
||||
.bg-gray-50 { background-color: rgb(var(--app-bg-rgb)) !important; }
|
||||
.bg-gray-100 { background-color: rgba(var(--surface-soft-rgb), 0.92) !important; }
|
||||
.bg-gray-200 { background-color: rgba(var(--surface-strong-rgb), 0.94) !important; }
|
||||
.bg-gray-900 {
|
||||
background: linear-gradient(180deg, rgba(var(--surface-strong-rgb), 1) 0%, rgba(var(--surface-soft-rgb), 1) 100%) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.18) !important;
|
||||
}
|
||||
.dark input::placeholder, .dark textarea::placeholder {
|
||||
color: #666666 !important;
|
||||
.border-gray-900 { border-color: rgba(var(--accent-rgb), 0.42) !important; }
|
||||
.bg-white\/90 { background-color: rgba(var(--surface-rgb), 0.9) !important; }
|
||||
.bg-white\/80 { background-color: rgba(var(--surface-rgb), 0.78) !important; }
|
||||
.bg-gray-50\/80 { background-color: rgba(var(--surface-soft-rgb), 0.72) !important; }
|
||||
.bg-gray-50\/90 { background-color: rgba(var(--surface-soft-rgb), 0.84) !important; }
|
||||
|
||||
.text-gray-900 { color: rgb(var(--text-primary-rgb)) !important; }
|
||||
.text-gray-800 { color: rgba(var(--text-primary-rgb), 0.94) !important; }
|
||||
.text-gray-700 { color: rgba(var(--text-primary-rgb), 0.82) !important; }
|
||||
.text-gray-600 { color: rgba(var(--text-secondary-rgb), 0.96) !important; }
|
||||
.text-gray-500 { color: rgba(var(--text-secondary-rgb), 0.78) !important; }
|
||||
.text-gray-400 { color: rgba(var(--text-tertiary-rgb), 0.94) !important; }
|
||||
.text-gray-300 { color: rgba(var(--text-tertiary-rgb), 0.62) !important; }
|
||||
.text-black { color: rgb(var(--text-primary-rgb)) !important; }
|
||||
|
||||
.border-gray-200 { border-color: rgba(var(--line-rgb), 0.14) !important; }
|
||||
.border-gray-100 { border-color: rgba(var(--line-rgb), 0.08) !important; }
|
||||
.border-gray-300 { border-color: rgba(var(--line-rgb), 0.22) !important; }
|
||||
.border-dashed { border-color: rgba(var(--line-rgb), 0.2) !important; }
|
||||
|
||||
.divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--line-rgb), 0.06) !important; }
|
||||
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--line-rgb), 0.08) !important; }
|
||||
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--line-rgb), 0.14) !important; }
|
||||
.divide-red-50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--danger-rgb), 0.1) !important; }
|
||||
|
||||
.ring-gray-200 { --tw-ring-color: rgba(var(--line-rgb), 0.16) !important; }
|
||||
.ring-gray-900 { --tw-ring-color: rgba(var(--accent-rgb), 0.52) !important; }
|
||||
|
||||
.hover\:bg-gray-50:hover { background-color: rgba(var(--surface-soft-rgb), 0.94) !important; }
|
||||
.hover\:bg-gray-100:hover { background-color: rgba(var(--surface-strong-rgb), 0.94) !important; }
|
||||
.hover\:bg-white:hover { background-color: rgba(var(--surface-rgb), 0.98) !important; }
|
||||
.hover\:bg-black:hover { background-color: rgba(var(--surface-strong-rgb), 1) !important; }
|
||||
.hover\:bg-red-50:hover { background-color: rgba(var(--danger-rgb), 0.12) !important; }
|
||||
.hover\:text-gray-700:hover,
|
||||
.hover\:text-gray-900:hover,
|
||||
.hover\:text-black:hover { color: rgb(var(--text-primary-rgb)) !important; }
|
||||
.hover\:text-red-600:hover { color: rgba(var(--danger-rgb), 1) !important; }
|
||||
.hover\:border-gray-300:hover { border-color: rgba(var(--line-rgb), 0.28) !important; }
|
||||
.hover\:border-gray-400:hover { border-color: rgba(var(--line-rgb), 0.34) !important; }
|
||||
.hover\:border-gray-900:hover { border-color: rgba(var(--accent-rgb), 0.54) !important; }
|
||||
.hover\:border-red-200:hover { border-color: rgba(var(--danger-rgb), 0.34) !important; }
|
||||
|
||||
.focus\:border-gray-400:focus { border-color: rgba(var(--accent-rgb), 0.54) !important; }
|
||||
.focus\:border-gray-300:focus { border-color: rgba(var(--accent-rgb), 0.44) !important; }
|
||||
|
||||
.shadow-lg { box-shadow: var(--panel-shadow-strong) !important; }
|
||||
.shadow-sm { box-shadow: var(--panel-shadow) !important; }
|
||||
|
||||
input, select, textarea {
|
||||
background-color: rgba(var(--surface-soft-rgb), 0.88) !important;
|
||||
color: rgb(var(--text-primary-rgb)) !important;
|
||||
border-color: rgba(var(--line-rgb), 0.16) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
input::placeholder, textarea::placeholder { color: rgba(var(--text-tertiary-rgb), 0.9) !important; }
|
||||
|
||||
#app-toast .rounded-xl,
|
||||
#planner-toast .rounded-xl {
|
||||
background: linear-gradient(180deg, rgba(var(--surface-strong-rgb), 1), rgba(var(--surface-soft-rgb), 1)) !important;
|
||||
color: rgb(var(--text-primary-rgb)) !important;
|
||||
border: 1px solid rgba(var(--line-rgb), 0.14);
|
||||
box-shadow: var(--panel-shadow);
|
||||
}
|
||||
|
||||
/* --- Toast --- */
|
||||
.dark #app-toast .rounded-xl,
|
||||
.dark #planner-toast .rounded-xl {
|
||||
background-color: #f0f0f0 !important;
|
||||
color: #0d0d0d !important;
|
||||
.bg-amber-50 { background-color: rgba(var(--warm-rgb), 0.12) !important; }
|
||||
.bg-amber-50\/30 { background-color: rgba(var(--warm-rgb), 0.09) !important; }
|
||||
.bg-amber-50\/50 { background-color: rgba(var(--warm-rgb), 0.14) !important; }
|
||||
.bg-amber-100\/50 { background-color: rgba(var(--warm-rgb), 0.18) !important; }
|
||||
.hover\:bg-amber-100\/50:hover { background-color: rgba(var(--warm-rgb), 0.22) !important; }
|
||||
.border-amber-200 { border-color: rgba(var(--warm-rgb), 0.28) !important; }
|
||||
.border-amber-200\/80 { border-color: rgba(var(--warm-rgb), 0.26) !important; }
|
||||
.border-amber-200\/60 { border-color: rgba(var(--warm-rgb), 0.2) !important; }
|
||||
.border-amber-100 { border-color: rgba(var(--warm-rgb), 0.14) !important; }
|
||||
.text-amber-900\/70 { color: rgba(var(--warm-rgb), 0.78) !important; }
|
||||
.text-amber-900\/80 { color: rgba(var(--warm-rgb), 0.84) !important; }
|
||||
.text-amber-900 { color: rgb(var(--warm-rgb)) !important; }
|
||||
.text-amber-600 { color: rgba(var(--warm-rgb), 0.96) !important; }
|
||||
.text-amber-500 { color: rgba(var(--warm-rgb), 0.9) !important; }
|
||||
.bg-amber-500 { background-color: rgba(var(--warm-rgb), 0.92) !important; }
|
||||
.divide-amber-100\/80 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--warm-rgb), 0.14) !important; }
|
||||
|
||||
.bg-emerald-50 { background-color: rgba(var(--success-rgb), 0.12) !important; }
|
||||
.bg-emerald-100 { background-color: rgba(var(--success-rgb), 0.2) !important; }
|
||||
.bg-emerald-500 { background-color: rgba(var(--success-rgb), 0.92) !important; }
|
||||
.bg-emerald-600 { background-color: rgba(var(--success-rgb), 0.96) !important; }
|
||||
.hover\:bg-emerald-700:hover { background-color: rgba(var(--success-rgb), 1) !important; }
|
||||
.hover\:bg-emerald-100\/80:hover { background-color: rgba(var(--success-rgb), 0.2) !important; }
|
||||
.border-emerald-200\/80 { border-color: rgba(var(--success-rgb), 0.26) !important; }
|
||||
.text-emerald-800 { color: rgba(var(--success-rgb), 1) !important; }
|
||||
.text-emerald-600 { color: rgba(var(--success-rgb), 0.94) !important; }
|
||||
.text-emerald-600\/80 { color: rgba(var(--success-rgb), 0.82) !important; }
|
||||
.text-emerald-500 { color: rgba(var(--success-rgb), 0.9) !important; }
|
||||
|
||||
.bg-red-50 { background-color: rgba(var(--danger-rgb), 0.12) !important; }
|
||||
.bg-red-100 { background-color: rgba(var(--danger-rgb), 0.2) !important; }
|
||||
.bg-red-500 { background-color: rgba(var(--danger-rgb), 0.94) !important; }
|
||||
.border-red-200\/80 { border-color: rgba(var(--danger-rgb), 0.26) !important; }
|
||||
.border-red-100\/80 { border-color: rgba(var(--danger-rgb), 0.16) !important; }
|
||||
.text-red-800 { color: rgba(var(--danger-rgb), 1) !important; }
|
||||
.text-red-600 { color: rgba(var(--danger-rgb), 0.96) !important; }
|
||||
.text-red-600\/80 { color: rgba(var(--danger-rgb), 0.82) !important; }
|
||||
.text-red-500 { color: rgba(var(--danger-rgb), 0.9) !important; }
|
||||
.text-red-400 { color: rgba(var(--danger-rgb), 0.78) !important; }
|
||||
|
||||
/* App shell */
|
||||
#main-view,
|
||||
#planner-view,
|
||||
#pantry-view {
|
||||
background: rgb(var(--app-bg-rgb)) !important;
|
||||
}
|
||||
#planner-view,
|
||||
#planner-view > div:first-child,
|
||||
#planner-scroll,
|
||||
#calendar-swipe-zone,
|
||||
#calendar-week-wrap,
|
||||
#calendar-month-wrap,
|
||||
#planner-meal-slots {
|
||||
background: #2d2e2b !important;
|
||||
}
|
||||
#main-view > div:first-child,
|
||||
#planner-view > div:first-child,
|
||||
#pantry-view > div:first-child,
|
||||
#filter-view > div:first-child,
|
||||
#filter-view > div:last-child {
|
||||
background: rgb(var(--app-bg-rgb)) !important;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
/* --- Amber / Summary card --- */
|
||||
.dark #planner-summary-card {
|
||||
background: #1e1a10 !important;
|
||||
border-color: #4a3800 !important;
|
||||
/* Cards and sheets */
|
||||
#recipe-grid > div {
|
||||
background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.94), rgba(var(--surface-soft-rgb), 0.97)) !important;
|
||||
border-color: rgba(var(--line-rgb), 0.14) !important;
|
||||
border-radius: 1.75rem !important;
|
||||
box-shadow: var(--panel-shadow) !important;
|
||||
transition: transform 180ms ease, box-shadow 180ms ease !important;
|
||||
}
|
||||
#recipe-grid > div:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--panel-shadow-strong) !important;
|
||||
}
|
||||
#recipe-grid > div img {
|
||||
transition: transform 240ms ease;
|
||||
}
|
||||
#recipe-grid > div:hover img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
#recipe-grid > div > div:first-child::after,
|
||||
#rd-hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%);
|
||||
pointer-events: none;
|
||||
}
|
||||
#planner-picker-sheet,
|
||||
#planner-ing-sheet,
|
||||
#pv2-edit-sheet,
|
||||
#mpe-sheet,
|
||||
#recipe-detail-view > div:last-child {
|
||||
background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.98) 0%, rgba(var(--surface-soft-rgb), 1) 100%) !important;
|
||||
border: 1px solid rgba(var(--line-rgb), 0.14);
|
||||
border-bottom: 0;
|
||||
backdrop-filter: blur(34px);
|
||||
box-shadow: var(--panel-shadow-strong) !important;
|
||||
}
|
||||
#recipe-detail-view {
|
||||
background: rgba(var(--app-bg-rgb), 0.92) !important;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
#filter-view {
|
||||
background: rgb(var(--app-bg-rgb)) !important;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
#planner-picker-backdrop,
|
||||
#planner-ing-backdrop,
|
||||
#pv2-edit-bg,
|
||||
#mpe-overlay {
|
||||
background: rgba(7, 6, 5, 0.42) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.dark .bg-amber-50 { background-color: #1e1a10 !important; }
|
||||
.dark .bg-amber-50\/30 { background-color: rgba(60, 45, 0, 0.25) !important; }
|
||||
.dark .bg-amber-50\/50 { background-color: rgba(80, 60, 0, 0.2) !important; }
|
||||
.dark .bg-amber-100\/50 { background-color: rgba(80, 60, 0, 0.2) !important; }
|
||||
.dark .hover\:bg-amber-100\/50:hover { background-color: rgba(80, 60, 0, 0.35) !important; }
|
||||
.dark .border-amber-200 { border-color: #4a3800 !important; }
|
||||
.dark .border-amber-200\/80 { border-color: #4a3800 !important; }
|
||||
.dark .border-amber-200\/60 { border-color: #3d2e00 !important; }
|
||||
.dark .border-amber-100 { border-color: #332600 !important; }
|
||||
.dark .text-amber-900\/70 { color: #fbbf24 !important; }
|
||||
.dark .text-amber-900\/80 { color: #fbbf24 !important; }
|
||||
.dark .text-amber-900 { color: #fcd34d !important; }
|
||||
.dark .text-amber-600 { color: #f59e0b !important; }
|
||||
.dark .text-amber-500 { color: #f59e0b !important; }
|
||||
.dark .divide-amber-100\/80 > :not([hidden]) ~ :not([hidden]) { border-color: #332600 !important; }
|
||||
|
||||
/* --- Emerald accents --- */
|
||||
.dark .bg-emerald-50 { background-color: #0a1f15 !important; }
|
||||
.dark .bg-emerald-100 { background-color: #064e3b !important; }
|
||||
.dark .bg-emerald-500 { background-color: #10b981 !important; }
|
||||
.dark .bg-emerald-600 { background-color: #059669 !important; }
|
||||
.dark .hover\:bg-emerald-700:hover { background-color: #047857 !important; }
|
||||
.dark .hover\:bg-emerald-100\/80:hover { background-color: rgba(6, 78, 59, 0.5) !important; }
|
||||
.dark .border-emerald-200\/80 { border-color: #065f46 !important; }
|
||||
.dark .text-emerald-800 { color: #6ee7b7 !important; }
|
||||
.dark .text-emerald-600 { color: #34d399 !important; }
|
||||
.dark .text-emerald-600\/80 { color: rgba(52, 211, 153, 0.85) !important; }
|
||||
.dark .text-emerald-500 { color: #34d399 !important; }
|
||||
|
||||
/* --- Red accents --- */
|
||||
.dark .bg-red-50 { background-color: #1f0a0a !important; }
|
||||
.dark .bg-red-100 { background-color: #450a0a !important; }
|
||||
.dark .bg-red-500 { background-color: #ef4444 !important; }
|
||||
.dark .border-red-200\/80 { border-color: #5c2020 !important; }
|
||||
.dark .border-red-100\/80 { border-color: #3b1010 !important; }
|
||||
.dark .text-red-800 { color: #fca5a5 !important; }
|
||||
.dark .text-red-600 { color: #f87171 !important; }
|
||||
.dark .text-red-600\/80 { color: rgba(248, 113, 113, 0.85) !important; }
|
||||
.dark .text-red-500 { color: #f87171 !important; }
|
||||
.dark .text-red-400 { color: #fb7185 !important; }
|
||||
.dark .hover\:text-red-600:hover { color: #f87171 !important; }
|
||||
.dark .bg-amber-500 { background-color: #f59e0b !important; }
|
||||
/* Planner and common interactive surfaces */
|
||||
#planner-open-ingredients,
|
||||
.planner-pick-recipe,
|
||||
#mpe-nutrition-section > div,
|
||||
#mpe-add-area > div,
|
||||
#pv2-edit-nutrition ul {
|
||||
box-shadow: var(--panel-shadow) !important;
|
||||
}
|
||||
.planner-pick-recipe,
|
||||
.pv2-chip,
|
||||
.pv2-cat-chip,
|
||||
.mpe-slot-btn,
|
||||
#filter-slot-chips button,
|
||||
#filter-tag-chips button,
|
||||
#rd-tags span {
|
||||
transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
.planner-pick-recipe:hover { transform: translateY(-1px); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="m-0 min-h-dvh bg-white font-sans text-gray-800">
|
||||
<body class="m-0 min-h-dvh bg-white text-gray-800 antialiased">
|
||||
<script>
|
||||
if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark');
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const useDarkTheme = savedTheme ? savedTheme === 'dark' : true;
|
||||
if (useDarkTheme) document.documentElement.classList.add('dark');
|
||||
document.querySelector('meta[name="theme-color"]')?.setAttribute('content', useDarkTheme ? '#2d2e2b' : '#f3efe9');
|
||||
</script>
|
||||
|
||||
<div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">
|
||||
@@ -188,6 +335,6 @@
|
||||
navigator.serviceWorker.register('./sw.js', { scope: './' }).catch(() => {});
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="js/app.js?v=2"></script>
|
||||
<script type="module" src="js/app.js?v=18"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { getRecipeListHTML, setupRecipeList } from './views/RecipeList.js?v=2';
|
||||
import { getFilterHTML, setupFilter } from './views/Filter.js?v=2';
|
||||
import { getRecipeDetailHTML, setupRecipeDetail } from './views/RecipeDetailV2.js?v=2';
|
||||
import { getMealPlannerHTML, setupMealPlanner } from './views/MealPlanner.js?v=2';
|
||||
import { getMealPlannerHTML, setupMealPlanner } from './views/MealPlanner.js?v=20';
|
||||
import { getPantryHTML, refreshPantry, setupPantry } from './views/Pantry.js?v=2';
|
||||
import { getMealPlanEditorHTML, setupMealPlanEditor } from './ui/mealPlanEditor.js?v=3';
|
||||
import { getMealPlanEditorHTML, setupMealPlanEditor } from './ui/mealPlanEditor.js?v=7';
|
||||
|
||||
function getAppToastHTML() {
|
||||
return `
|
||||
@@ -52,7 +52,7 @@ function setupThemeToggle() {
|
||||
if (label) label.textContent = isDark ? 'Jasny' : 'Ciemny';
|
||||
|
||||
const meta = document.querySelector('meta[name="theme-color"]');
|
||||
if (meta) meta.setAttribute('content', isDark ? '#0d0d0d' : '#ffffff');
|
||||
if (meta) meta.setAttribute('content', isDark ? '#161513' : '#f3efe9');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -177,6 +177,13 @@ export const INGREDIENTS = {
|
||||
pantryUnit: 'g',
|
||||
nutritionPer100g: { kcal: 44, protein: 0.7, fat: 0.4, carbs: 10 },
|
||||
},
|
||||
rokitnik_zwyczajny: {
|
||||
id: 'rokitnik_zwyczajny',
|
||||
name: 'Rokitnik zwyczajny - rokitnik pospolity (Hippophae rhamnoides)',
|
||||
category: 'owoce',
|
||||
pantryUnit: 'g',
|
||||
nutritionPer100g: { kcal: 82, protein: 1.2, fat: 5.4, carbs: 5.5 },
|
||||
},
|
||||
/* ── Suche i kasze ────────────────────────────────── */
|
||||
makaron_suchy: {
|
||||
id: 'makaron_suchy',
|
||||
@@ -430,7 +437,7 @@ export const RECIPES = {
|
||||
{ ingredientId: 'miod', amount: 10, unit: 'g' },
|
||||
{ ingredientId: 'orzechy_wloskie', amount: 50, unit: 'g', alternatives: ['orzechy_laskowe', 'orzechy_nerkowca', 'migdaly', 'orzechy_pekan'] },
|
||||
{ ingredientId: 'truskawki', amount: 100, unit: 'g', alternatives: ['banany'] },
|
||||
{ ingredientId: 'borowki_amerykanskie', amount: 80, unit: 'g', alternatives: ['jagody'] },
|
||||
{ ingredientId: 'borowki_amerykanskie', amount: 80, unit: 'g', alternatives: ['jagody', 'rokitnik_zwyczajny'] },
|
||||
],
|
||||
steps: [
|
||||
'Przełóż serek wiejski do miseczki.',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { INGREDIENTS, CATEGORY_LABELS } from '../data/catalog.js';
|
||||
import { INGREDIENTS, CATEGORY_LABELS } from '../data/catalog.js?v=2';
|
||||
import { PANTRY_STORAGE_KEY, SHOPPING_STORAGE_KEY } from '../storageKeys.js';
|
||||
|
||||
export const KITCHEN_LIST_ID = 'kitchen';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { INGREDIENTS, RECIPES } from '../data/catalog.js';
|
||||
import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=2';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
import { addDays } from './dateUtils.js';
|
||||
import { getDayPlan } from './planStore.js';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { INGREDIENTS, RECIPES } from '../data/catalog.js';
|
||||
import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=2';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
import { PLANS_STORAGE_KEY } from '../storageKeys.js';
|
||||
import { startOfDay } from './dateUtils.js';
|
||||
|
||||
241
js/ui/mealCalendar.js
Normal file
241
js/ui/mealCalendar.js
Normal file
@@ -0,0 +1,241 @@
|
||||
import {
|
||||
addDays,
|
||||
sameDay,
|
||||
startOfDay,
|
||||
startOfMonth,
|
||||
startOfWeekMonday,
|
||||
weekContains,
|
||||
} from '../services/dateUtils.js';
|
||||
|
||||
export const CALENDAR_MONTHS_LONG = [
|
||||
'Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec',
|
||||
'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień',
|
||||
];
|
||||
|
||||
export const CALENDAR_MONTHS_SHORT = [
|
||||
'sty', 'lut', 'mar', 'kwi', 'maj', 'cze',
|
||||
'lip', 'sie', 'wrz', 'paź', 'lis', 'gru',
|
||||
];
|
||||
|
||||
export const CALENDAR_WEEKDAYS_SHORT = ['pn', 'wt', 'śr', 'cz', 'pt', 'so', 'nd'];
|
||||
export const CALENDAR_DAY_ATTR = 'data-calendar-day';
|
||||
export const CALENDAR_HANDLE_CLASS = 'block h-1 w-10 rounded-full bg-[#6d6c67]/75';
|
||||
|
||||
function getCalendarDayHTML(day, meta, dayState, dayAttr) {
|
||||
const { mode, selectedDate, inCurrentMonth } = meta;
|
||||
const isSelected = selectedDate && sameDay(day, selectedDate);
|
||||
const showIndicator = !!dayState.showIndicator;
|
||||
const isDisabled = !!dayState.disabled;
|
||||
const isDimmed = !!dayState.dimmed && !isSelected;
|
||||
const bg = isSelected ? '#23221e' : '#2f2f2d';
|
||||
const border = isSelected ? '#787876' : '#444442';
|
||||
const text = isSelected ? '#f2efe8' : (isDimmed ? '#7d7a74' : '#d7d2c8');
|
||||
const dot = isSelected ? '#f2efe8' : '#a59f92';
|
||||
const opacity = isDimmed ? '0.72' : '1';
|
||||
const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full border text-xs font-medium transition-colors leading-tight overflow-hidden`;
|
||||
const innerClass = mode === 'month'
|
||||
? 'relative flex h-full w-full flex-col items-center justify-center'
|
||||
: 'relative flex h-full w-full items-center justify-center';
|
||||
const dotBottom = mode === 'month' ? '0.24rem' : '0.2rem';
|
||||
const tagName = isDisabled ? 'div' : 'button';
|
||||
const buttonAttrs = isDisabled ? '' : ` type="button" ${dayAttr}="${day.getTime()}"`;
|
||||
|
||||
return `
|
||||
<${tagName}${buttonAttrs}
|
||||
class="${outerClass}"
|
||||
style="background:${bg};border-color:${border};color:${text};opacity:${opacity};">
|
||||
<span class="${innerClass}">
|
||||
<span class="text-[13px] font-semibold leading-none ${showIndicator ? '-translate-y-[0.18rem]' : ''}">${day.getDate()}</span>
|
||||
${showIndicator
|
||||
? `<span class="absolute left-1/2 w-1 h-1 -translate-x-1/2 rounded-full opacity-75" style="bottom:${dotBottom};background:${dot};" aria-hidden="true"></span>`
|
||||
: ''}
|
||||
</span>
|
||||
</${tagName}>
|
||||
`;
|
||||
}
|
||||
|
||||
function getMonthCells(monthAnchor) {
|
||||
const first = startOfMonth(monthAnchor);
|
||||
const startGrid = startOfWeekMonday(first);
|
||||
const cells = [];
|
||||
for (let i = 0; i < 42; i++) cells.push(addDays(startGrid, i));
|
||||
while (cells.length > 35 && cells.slice(-7).every((day) => day.getMonth() !== first.getMonth())) {
|
||||
cells.splice(-7);
|
||||
}
|
||||
return { cells, month: first.getMonth() };
|
||||
}
|
||||
|
||||
function getDayState(day, meta, resolveDayState) {
|
||||
if (typeof resolveDayState !== 'function') {
|
||||
return {
|
||||
disabled: false,
|
||||
dimmed: meta.mode === 'month' && !meta.inCurrentMonth,
|
||||
showIndicator: false,
|
||||
};
|
||||
}
|
||||
|
||||
const resolved = resolveDayState(day, meta) || {};
|
||||
return {
|
||||
disabled: !!resolved.disabled,
|
||||
dimmed: !!resolved.dimmed,
|
||||
showIndicator: !!resolved.showIndicator,
|
||||
};
|
||||
}
|
||||
|
||||
export function createCalendarWeekdayHeaderHTML(labels = CALENDAR_WEEKDAYS_SHORT) {
|
||||
return `
|
||||
<div class="grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium text-gray-400 uppercase tracking-wide mb-1 leading-none">
|
||||
${labels.map((label) => `<div>${label}</div>`).join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function createCalendarTopbarHTML({
|
||||
titleId,
|
||||
prevId,
|
||||
todayId,
|
||||
nextId,
|
||||
wrapperClass = 'px-4 pt-4 pb-3 flex items-center gap-3',
|
||||
titleClass = 'text-[18px] font-semibold text-gray-900 leading-none tracking-[-0.03em]',
|
||||
}) {
|
||||
return `
|
||||
<div class="${wrapperClass}">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p id="${titleId}" class="${titleClass}"></p>
|
||||
</div>
|
||||
<div class="shrink-0 flex h-[2.3rem] items-center gap-0.5 rounded-full border px-1" style="background:#2f2f2d;border-color:#444442;">
|
||||
<button type="button" id="${prevId}" class="shrink-0 w-8 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Poprzedni okres">
|
||||
<i class="fas fa-chevron-left text-[11px]" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button type="button" id="${todayId}" title="Dziś" aria-label="Przejdź do dzisiejszego dnia"
|
||||
class="h-full shrink-0 inline-flex items-center justify-center rounded-full px-2.5 text-[11px] font-semibold leading-none text-[#d7d2c8] transition-colors hover:bg-[#3a3a37]">
|
||||
Dziś
|
||||
</button>
|
||||
<button type="button" id="${nextId}" class="shrink-0 w-8 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Następny okres">
|
||||
<i class="fas fa-chevron-right text-[11px]" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function formatCalendarMonthYear(date) {
|
||||
return `${CALENDAR_MONTHS_LONG[date.getMonth()]} ${date.getFullYear()}`;
|
||||
}
|
||||
|
||||
export function formatCalendarSelectedDate(date) {
|
||||
return `${date.getDate()} ${CALENDAR_MONTHS_SHORT[date.getMonth()]} ${date.getFullYear()}`;
|
||||
}
|
||||
|
||||
export function isCalendarOnToday(mode, weekStart, monthAnchor, selectedDate) {
|
||||
const today = startOfDay(new Date());
|
||||
if (!sameDay(selectedDate, today)) return false;
|
||||
if (mode === 'week') return weekContains(weekStart, today);
|
||||
return startOfMonth(monthAnchor).getTime() === startOfMonth(today).getTime();
|
||||
}
|
||||
|
||||
export function syncCalendarTodayButton(buttonEl, isOnToday) {
|
||||
if (!buttonEl) return;
|
||||
const base = 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2.5 text-[11px] font-semibold leading-none transition-colors';
|
||||
const active = `${base} text-[#d7d2c8] hover:bg-[#3a3a37]`;
|
||||
const dim = `${base} text-[#7d7a74] cursor-default`;
|
||||
buttonEl.className = isOnToday ? dim : active;
|
||||
buttonEl.disabled = isOnToday;
|
||||
}
|
||||
|
||||
export function renderCalendarGrid({
|
||||
gridEl,
|
||||
mode,
|
||||
anchorDate,
|
||||
selectedDate,
|
||||
resolveDayState,
|
||||
dayAttr = CALENDAR_DAY_ATTR,
|
||||
}) {
|
||||
if (!gridEl) return;
|
||||
|
||||
if (mode === 'week') {
|
||||
const weekStart = startOfWeekMonday(anchorDate);
|
||||
const cells = [];
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const day = addDays(weekStart, i);
|
||||
const meta = {
|
||||
mode,
|
||||
selectedDate,
|
||||
inCurrentMonth: true,
|
||||
};
|
||||
cells.push(getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr));
|
||||
}
|
||||
gridEl.innerHTML = cells.join('');
|
||||
return;
|
||||
}
|
||||
|
||||
const { cells, month } = getMonthCells(anchorDate);
|
||||
gridEl.innerHTML = cells.map((day) => {
|
||||
const meta = {
|
||||
mode,
|
||||
selectedDate,
|
||||
inCurrentMonth: day.getMonth() === month,
|
||||
};
|
||||
return getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr);
|
||||
}).join('');
|
||||
}
|
||||
|
||||
export function renderCollapsibleCalendar({
|
||||
weekGridEl,
|
||||
monthGridEl,
|
||||
weekAnchorDate,
|
||||
monthAnchorDate,
|
||||
selectedDate,
|
||||
resolveDayState,
|
||||
dayAttr = CALENDAR_DAY_ATTR,
|
||||
}) {
|
||||
renderCalendarGrid({
|
||||
gridEl: weekGridEl,
|
||||
mode: 'week',
|
||||
anchorDate: weekAnchorDate,
|
||||
selectedDate,
|
||||
resolveDayState,
|
||||
dayAttr,
|
||||
});
|
||||
renderCalendarGrid({
|
||||
gridEl: monthGridEl,
|
||||
mode: 'month',
|
||||
anchorDate: monthAnchorDate,
|
||||
selectedDate,
|
||||
resolveDayState,
|
||||
dayAttr,
|
||||
});
|
||||
}
|
||||
|
||||
export function syncCollapsibleCalendarMode({
|
||||
mode,
|
||||
weekWrapEl,
|
||||
monthWrapEl,
|
||||
handleEl,
|
||||
activePaddingBottom = '0.75rem',
|
||||
weekMaxHeight = '10rem',
|
||||
monthMaxHeight = '17.25rem',
|
||||
}) {
|
||||
if (weekWrapEl) {
|
||||
weekWrapEl.style.maxHeight = mode === 'week' ? weekMaxHeight : '0';
|
||||
weekWrapEl.style.opacity = mode === 'week' ? '1' : '0';
|
||||
weekWrapEl.style.paddingBottom = mode === 'week' ? activePaddingBottom : '0';
|
||||
}
|
||||
if (monthWrapEl) {
|
||||
monthWrapEl.style.maxHeight = mode === 'month' ? monthMaxHeight : '0';
|
||||
monthWrapEl.style.opacity = mode === 'month' ? '1' : '0';
|
||||
monthWrapEl.style.paddingBottom = mode === 'month' ? activePaddingBottom : '0';
|
||||
}
|
||||
if (handleEl) handleEl.className = CALENDAR_HANDLE_CLASS;
|
||||
}
|
||||
|
||||
export function bindCalendarDayClicks(containerEl, onSelect, dayAttr = CALENDAR_DAY_ATTR) {
|
||||
if (!containerEl || typeof onSelect !== 'function') return;
|
||||
containerEl.addEventListener('click', (event) => {
|
||||
const button = event.target.closest(`[${dayAttr}]`);
|
||||
if (!button || !containerEl.contains(button)) return;
|
||||
const ts = Number(button.getAttribute(dayAttr));
|
||||
if (!Number.isFinite(ts)) return;
|
||||
onSelect(new Date(ts), button, event);
|
||||
});
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { INGREDIENTS, RECIPES } from '../data/catalog.js';
|
||||
import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=2';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
import {
|
||||
addDays,
|
||||
@@ -6,7 +6,6 @@ import {
|
||||
sameDay,
|
||||
sameMonth,
|
||||
startOfDay,
|
||||
startOfMonth,
|
||||
startOfWeekMonday,
|
||||
} from '../services/dateUtils.js';
|
||||
import {
|
||||
@@ -15,16 +14,23 @@ import {
|
||||
newPlanEntryId,
|
||||
savePlans,
|
||||
} from '../services/planStore.js';
|
||||
import { dayHasAnyMeal } from '../services/planIngredients.js';
|
||||
import { showAppToast } from './toast.js';
|
||||
import {
|
||||
bindCalendarDayClicks,
|
||||
createCalendarTopbarHTML,
|
||||
createCalendarWeekdayHeaderHTML,
|
||||
formatCalendarMonthYear,
|
||||
formatCalendarSelectedDate,
|
||||
isCalendarOnToday,
|
||||
renderCalendarGrid,
|
||||
syncCalendarTodayButton,
|
||||
} from './mealCalendar.js?v=1';
|
||||
|
||||
function esc(s) {
|
||||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
const MONTHS_LONG = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'];
|
||||
const MONTHS_SHORT = ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'];
|
||||
const WEEKDAYS_SHORT = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd'];
|
||||
const WEEKDAYS_LONG = ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'];
|
||||
const slotLabel = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
|
||||
|
||||
/* ── HTML template ──────────────────────────────────── */
|
||||
@@ -32,8 +38,8 @@ const slotLabel = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
|
||||
export function getMealPlanEditorHTML() {
|
||||
return `
|
||||
<div id="mpe-overlay" class="absolute inset-0 z-[55] bg-black/45 hidden flex items-end" style="pointer-events:none">
|
||||
<div id="mpe-sheet" class="w-full bg-white rounded-t-3xl shadow-lg flex flex-col" style="pointer-events:auto; max-height:95vh; transform:translateY(100%); transition:transform 300ms cubic-bezier(0.32,0.72,0,1)">
|
||||
<div class="shrink-0 px-5 pt-3 pb-2.5 border-b border-gray-100">
|
||||
<div id="mpe-sheet" class="w-full bg-[#2d2e2b] rounded-t-3xl shadow-lg flex flex-col overflow-hidden" style="pointer-events:auto; background:#2d2e2b !important; background-image:none !important; backdrop-filter:none !important; height:100dvh; max-height:100dvh; transform:translateY(100%); transition:transform 300ms cubic-bezier(0.32,0.72,0,1)">
|
||||
<div class="shrink-0 px-5 pt-3 pb-2.5 border-b border-gray-100 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
|
||||
<div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-3"></div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="min-w-0 flex-1">
|
||||
@@ -45,32 +51,39 @@ export function getMealPlanEditorHTML() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mpe-body" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 py-3">
|
||||
<div id="mpe-cal-section" class="hidden mb-4">
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
<button id="mpe-cal-prev" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-left text-xs"></i></button>
|
||||
<p id="mpe-cal-title" class="flex-1 min-w-0 text-xs font-medium text-gray-900 text-center tabular-nums leading-none px-1 truncate"></p>
|
||||
<button id="mpe-cal-next" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-right text-xs"></i></button>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mb-2">
|
||||
<button id="mpe-cal-today" type="button" class="h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-2.5 text-[10px] font-semibold text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 transition-colors hidden"><i class="fas fa-calendar-day text-[9px] opacity-70"></i> Dziś</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-0.5 text-center text-[9px] font-medium text-gray-400 uppercase tracking-wide mb-0.5 leading-none">${WEEKDAYS_SHORT.map((d) => `<div>${d}</div>`).join('')}</div>
|
||||
<div id="mpe-cal-grid" class="grid grid-cols-7 gap-0.5"></div>
|
||||
<div id="mpe-cal-wrap" class="hidden relative z-[1] shrink-0 px-5 pt-3 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
|
||||
<div id="mpe-cal-section" class="hidden">
|
||||
${createCalendarTopbarHTML({
|
||||
titleId: 'mpe-cal-title',
|
||||
prevId: 'mpe-cal-prev',
|
||||
todayId: 'mpe-cal-today',
|
||||
nextId: 'mpe-cal-next',
|
||||
wrapperClass: 'mb-2 flex items-center gap-3',
|
||||
})}
|
||||
${createCalendarWeekdayHeaderHTML()}
|
||||
<div id="mpe-cal-grid" class="grid grid-cols-7 gap-1.5"></div>
|
||||
<button id="mpe-cal-toggle" type="button" class="w-full flex items-center justify-center py-1 mt-1 text-gray-400 hover:text-gray-600 transition-colors"><i id="mpe-cal-toggle-icon" class="fas fa-chevron-down text-[10px]"></i></button>
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mt-3 mb-2">Pora posiłku</p>
|
||||
<div id="mpe-slot-chips" class="flex flex-wrap gap-1.5"></div>
|
||||
</div>
|
||||
<div id="mpe-nutrition-section" class="mb-4"></div>
|
||||
<div id="mpe-servings-row" class="flex items-center justify-between mb-4"></div>
|
||||
</div>
|
||||
<div id="mpe-summary-wrap" class="relative z-[1] shrink-0 px-5 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
|
||||
<div class="flex items-stretch gap-3">
|
||||
<div id="mpe-nutrition-section" class="flex-1 min-w-0"></div>
|
||||
<div id="mpe-servings-row" class="shrink-0 w-[5.25rem]"></div>
|
||||
</div>
|
||||
<div id="mpe-top-shadow" class="pointer-events-none absolute inset-x-0 -bottom-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.03), rgba(0,0,0,0));"></div>
|
||||
</div>
|
||||
<div id="mpe-ing-scroll" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
|
||||
<div id="mpe-ing-section" class="mb-4">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Składniki</p>
|
||||
<div id="mpe-ing-list" class="space-y-1.5"></div>
|
||||
<div id="mpe-add-area" class="mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shrink-0 px-5 pb-8 pt-3 border-t border-gray-100">
|
||||
<button id="mpe-confirm-btn" type="button" class="w-full bg-gray-900 hover:bg-black text-white py-3 rounded-xl font-semibold text-[13px] transition-colors flex items-center justify-center gap-2">
|
||||
<div id="mpe-footer-wrap" class="relative z-[1] shrink-0 px-5 pt-2 pb-3 flex justify-center bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important; padding-bottom:calc(1.1rem + env(safe-area-inset-bottom));">
|
||||
<div id="mpe-footer-shadow" class="pointer-events-none absolute inset-x-0 -top-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to top, rgba(0,0,0,0.12), rgba(0,0,0,0.03), rgba(0,0,0,0));"></div>
|
||||
<button id="mpe-confirm-btn" type="button" class="border text-white px-4 py-3 rounded-xl font-semibold text-[13px] transition-colors inline-flex items-center justify-center gap-2" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important; border-color:#444442 !important;">
|
||||
<i class="fas fa-check text-xs"></i> <span id="mpe-confirm-label">Dodaj do planu</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -90,6 +103,8 @@ export function setupMealPlanEditor() {
|
||||
recipeId: null,
|
||||
date: null,
|
||||
slotId: null,
|
||||
originalDate: null,
|
||||
originalSlotId: null,
|
||||
servings: 1,
|
||||
subs: {},
|
||||
excluded: new Set(),
|
||||
@@ -142,22 +157,19 @@ export function setupMealPlanEditor() {
|
||||
|
||||
/* ── Calendar ──────────────────────────────────── */
|
||||
|
||||
function calCell(d, today, month) {
|
||||
const sel = S.date && sameDay(d, S.date);
|
||||
const past = d.getTime() < today.getTime();
|
||||
const other = d.getMonth() !== month;
|
||||
let cls = 'flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight ';
|
||||
if (sel) cls += 'bg-gray-900 text-white ';
|
||||
else if (past || other) cls += 'text-gray-300 ';
|
||||
else cls += 'text-gray-800 hover:bg-gray-100 ';
|
||||
if (!sel && !past && !other && sameDay(d, today)) cls += 'ring-1 ring-inset ring-gray-900 ';
|
||||
const inner = `<span>${d.getDate()}</span><span class="w-1 h-1"></span>`;
|
||||
return (past && !sel) ? `<div class="${cls}">${inner}</div>` : `<button type="button" class="mpe-cal-day ${cls}" data-ts="${d.getTime()}">${inner}</button>`;
|
||||
}
|
||||
|
||||
function renderCal() {
|
||||
const wrap = document.getElementById('mpe-cal-wrap');
|
||||
const sec = document.getElementById('mpe-cal-section');
|
||||
if (!sec || !S.showCal) { sec?.classList.add('hidden'); return; }
|
||||
const summary = document.getElementById('mpe-summary-wrap');
|
||||
if (!sec || !wrap) return;
|
||||
if (summary) summary.style.paddingTop = S.showCal ? '0' : '0.75rem';
|
||||
if (!S.showCal) {
|
||||
wrap.classList.add('hidden');
|
||||
sec.classList.add('hidden');
|
||||
syncScrollShadows();
|
||||
return;
|
||||
}
|
||||
wrap.classList.remove('hidden');
|
||||
sec.classList.remove('hidden');
|
||||
const grid = document.getElementById('mpe-cal-grid');
|
||||
const title = document.getElementById('mpe-cal-title');
|
||||
@@ -165,35 +177,36 @@ export function setupMealPlanEditor() {
|
||||
const icon = document.getElementById('mpe-cal-toggle-icon');
|
||||
if (!grid || !title) return;
|
||||
const today = startOfDay(new Date());
|
||||
const plans = loadPlans();
|
||||
const mode = S.calExpanded ? 'month' : 'week';
|
||||
|
||||
if (S.calExpanded) {
|
||||
const ms = startOfMonth(S.calDate);
|
||||
title.textContent = `${MONTHS_LONG[ms.getMonth()]} ${ms.getFullYear()}`;
|
||||
icon.className = 'fas fa-chevron-up text-[10px]';
|
||||
const first = startOfWeekMonday(ms);
|
||||
const cells = [];
|
||||
let d = new Date(first);
|
||||
for (let i = 0; i < 42; i++) { cells.push(new Date(d)); d = addDays(d, 1); }
|
||||
while (cells.length > 7 && cells.slice(-7).every((c) => c.getMonth() !== ms.getMonth())) cells.splice(-7);
|
||||
grid.innerHTML = cells.map((c) => calCell(c, today, ms.getMonth())).join('');
|
||||
todayBtn?.classList.toggle('hidden', sameMonth(today, S.calDate));
|
||||
} else {
|
||||
const ws = startOfWeekMonday(S.calDate);
|
||||
title.textContent = `${MONTHS_LONG[S.calDate.getMonth()]} ${S.calDate.getFullYear()}`;
|
||||
icon.className = 'fas fa-chevron-down text-[10px]';
|
||||
const cells = [];
|
||||
for (let i = 0; i < 7; i++) cells.push(addDays(ws, i));
|
||||
grid.innerHTML = cells.map((c) => calCell(c, today, S.calDate.getMonth())).join('');
|
||||
todayBtn?.classList.toggle('hidden', sameDay(startOfWeekMonday(today), ws));
|
||||
title.textContent = S.calExpanded ? formatCalendarMonthYear(S.calDate) : formatCalendarSelectedDate(S.date);
|
||||
if (icon) {
|
||||
icon.className = S.calExpanded ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
|
||||
}
|
||||
syncCalendarTodayButton(
|
||||
todayBtn,
|
||||
isCalendarOnToday(mode, startOfWeekMonday(S.calDate), S.calDate, S.date),
|
||||
);
|
||||
|
||||
grid.querySelectorAll('.mpe-cal-day').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
S.date = new Date(Number(btn.dataset.ts));
|
||||
S.calDate = new Date(S.date);
|
||||
renderCal();
|
||||
});
|
||||
renderCalendarGrid({
|
||||
gridEl: grid,
|
||||
mode,
|
||||
anchorDate: S.calDate,
|
||||
selectedDate: S.date,
|
||||
resolveDayState: (day, meta) => {
|
||||
const isSelected = S.date && sameDay(day, S.date);
|
||||
const isPast = day.getTime() < today.getTime();
|
||||
return {
|
||||
disabled: isPast && !isSelected,
|
||||
dimmed: (isPast || (meta.mode === 'month' && !meta.inCurrentMonth)) && !isSelected,
|
||||
showIndicator: meta.mode === 'month'
|
||||
? meta.inCurrentMonth && dayHasAnyMeal(plans, day)
|
||||
: dayHasAnyMeal(plans, day),
|
||||
};
|
||||
},
|
||||
});
|
||||
syncScrollShadows();
|
||||
}
|
||||
|
||||
function renderSlots() {
|
||||
@@ -203,21 +216,48 @@ export function setupMealPlanEditor() {
|
||||
if (!r) return;
|
||||
el.innerHTML = MEAL_SLOTS.filter((s) => r.allowedSlots.includes(s.id)).map((s) => {
|
||||
const sel = s.id === S.slotId;
|
||||
return `<button type="button" class="mpe-slot-btn px-3 py-1.5 rounded-lg border text-[12px] font-semibold transition-all ${sel ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-gray-50 text-gray-700 hover:border-gray-400'}" data-slot-id="${s.id}">${esc(s.label)}</button>`;
|
||||
const bg = sel ? '#23221e' : '#2f2f2d';
|
||||
const border = sel ? '#787876' : '#444442';
|
||||
const text = sel ? '#f2efe8' : '#d7d2c8';
|
||||
return `<button type="button" class="mpe-slot-btn px-3 py-1.5 rounded-full border text-[12px] font-semibold transition-colors" data-slot-id="${s.id}" style="background:${bg} !important; background-image:none !important; box-shadow:none !important; border-color:${border} !important; color:${text} !important;">${esc(s.label)}</button>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function syncScrollShadows() {
|
||||
const body = document.getElementById('mpe-ing-scroll');
|
||||
const topShadow = document.getElementById('mpe-top-shadow');
|
||||
const bottomShadow = document.getElementById('mpe-footer-shadow');
|
||||
if (!body) {
|
||||
if (topShadow) topShadow.style.opacity = '0';
|
||||
if (bottomShadow) bottomShadow.style.opacity = '0';
|
||||
return;
|
||||
}
|
||||
if (topShadow) topShadow.style.opacity = body.scrollTop > 6 ? '1' : '0';
|
||||
if (bottomShadow) {
|
||||
const remaining = body.scrollHeight - body.clientHeight - body.scrollTop;
|
||||
bottomShadow.style.opacity = remaining > 6 ? '1' : '0';
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Servings ──────────────────────────────────── */
|
||||
|
||||
function renderServings() {
|
||||
const el = document.getElementById('mpe-servings-row');
|
||||
if (!el) return;
|
||||
el.innerHTML = `
|
||||
<span class="text-[13px] font-semibold text-gray-900">Porcje</span>
|
||||
<div class="flex items-center gap-0.5 bg-gray-100 p-0.5 rounded-lg">
|
||||
<button type="button" id="mpe-serv-minus" class="w-7 h-7 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[9px]"></i></button>
|
||||
<span id="mpe-serv-count" class="font-bold text-gray-900 text-[13px] w-5 text-center tabular-nums">${S.servings}</span>
|
||||
<button type="button" id="mpe-serv-plus" class="w-7 h-7 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[9px]"></i></button>
|
||||
<div class="h-full rounded-xl pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Porcje</p>
|
||||
<div class="flex items-center pt-2">
|
||||
<div class="flex h-[2rem] w-full items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;">
|
||||
<button type="button" id="mpe-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
|
||||
<i class="fas fa-minus text-[10px]"></i>
|
||||
</button>
|
||||
<span id="mpe-serv-count" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${S.servings}</span>
|
||||
<button type="button" id="mpe-serv-plus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zwiększ liczbę porcji">
|
||||
<i class="fas fa-plus text-[10px]"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
@@ -247,22 +287,24 @@ export function setupMealPlanEditor() {
|
||||
const disp = base * S.servings;
|
||||
const modified = id in S.overrides;
|
||||
|
||||
const rowBorder = swapped ? 'border-amber-200' : 'border-gray-200';
|
||||
const rowBg = swapped ? 'bg-amber-50/30' : 'bg-white';
|
||||
const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;';
|
||||
|
||||
const shuffleBtn = hasAlts
|
||||
? `<button type="button" class="mpe-shuffle shrink-0 w-5 h-5 rounded-full ${swapped ? 'bg-amber-50 text-amber-500' : 'bg-gray-100 text-gray-400 hover:bg-gray-200'} flex items-center justify-center transition-colors" data-orig-id="${esc(id)}"><i class="fas fa-shuffle text-[8px]"></i></button>`
|
||||
? `<button type="button" class="mpe-shuffle shrink-0 w-5 h-5 flex items-center justify-center transition-colors text-gray-400 hover:text-gray-300" style="background:transparent !important; box-shadow:none !important;" data-orig-id="${esc(id)}" aria-label="Wybierz zamiennik składnika"><i class="fas fa-shuffle text-[10px]"></i></button>`
|
||||
: '';
|
||||
const modDot = modified ? '<span class="w-1.5 h-1.5 rounded-full bg-amber-400 shrink-0"></span>' : '';
|
||||
|
||||
html += `<div class="mpe-ing-row rounded-xl border ${rowBorder} ${rowBg} p-2.5" data-orig-id="${esc(id)}" data-type="recipe">`;
|
||||
html += `<div class="mpe-ing-row rounded-xl p-2.5" style="${rowStyle}" data-orig-id="${esc(id)}" data-type="recipe">`;
|
||||
html += `<div class="flex items-center gap-2">`;
|
||||
html += `<div class="flex-1 min-w-0 flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(eName)}</span>${shuffleBtn}</div>`;
|
||||
html += `<div class="flex-1 min-w-0"><span class="text-[12px] font-semibold text-gray-900 truncate block">${esc(eName)}</span></div>`;
|
||||
html += `<div class="shrink-0 flex items-center gap-2">`;
|
||||
html += shuffleBtn;
|
||||
html += `<button type="button" class="mpe-edit-amt shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors" data-orig-id="${esc(id)}" data-type="recipe">`;
|
||||
html += `${modDot}<span class="text-[12px] font-semibold text-gray-900 tabular-nums">${fmtAmt(disp)}</span>`;
|
||||
html += `<span class="text-[11px] text-gray-500">${esc(ing.unit)}</span></button>`;
|
||||
html += removeBtn('mpe-remove-ing', `data-orig-id="${esc(id)}" data-type="recipe"`);
|
||||
html += `</div>`;
|
||||
html += `</div>`;
|
||||
|
||||
if (hasAlts && altOpen) {
|
||||
const opts = [id, ...ing.alternatives];
|
||||
@@ -271,13 +313,14 @@ export function setupMealPlanEditor() {
|
||||
const def = INGREDIENTS[altId];
|
||||
const name = def?.name || altId;
|
||||
const isSel = eid === altId;
|
||||
const isOrig = altId === id;
|
||||
const cls2 = isSel ? 'border-gray-900 bg-gray-50 ring-1 ring-gray-900' : 'border-gray-200 bg-white hover:border-gray-300';
|
||||
const radio = `<div class="w-3.5 h-3.5 rounded-full border-2 shrink-0 ${isSel ? 'border-gray-900' : 'border-gray-300'} flex items-center justify-center">${isSel ? '<div class="w-1.5 h-1.5 rounded-full bg-gray-900"></div>' : ''}</div>`;
|
||||
const tag = isOrig ? `<span class="text-[9px] px-1.5 py-0.5 rounded ${isSel ? 'bg-gray-200 text-gray-600' : 'bg-gray-100 text-gray-400'} font-medium ml-auto shrink-0">Domyślny</span>` : '';
|
||||
const checkbox = `
|
||||
<span class="ml-auto self-center w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center"
|
||||
style="border:1.5px solid #56534f; background:transparent;">
|
||||
${isSel ? '<i class="fas fa-check" style="color:#9b978f; font-size:8px; line-height:1; display:block; transform:translateY(0.5px);"></i>' : ''}
|
||||
</span>`;
|
||||
const n = nutFor(altId, disp, ing.unit);
|
||||
const nLine = n ? `<div class="text-[10px] text-gray-400 mt-0.5 tabular-nums">${n.kcal} kcal · ${n.protein}g B · ${n.fat}g T · ${n.carbs}g W</div>` : '';
|
||||
html += `<button type="button" class="mpe-alt-pick w-full text-left p-2 rounded-lg border transition-all ${cls2}" data-orig-id="${esc(id)}" data-alt-id="${esc(altId)}"><div class="flex items-center gap-2">${radio}<span class="text-[11px] font-semibold text-gray-900">${esc(name)}</span>${tag}</div>${nLine}</button>`;
|
||||
html += `<button type="button" class="mpe-alt-pick w-full text-left p-2.5 rounded-lg transition-all" style="background:#2f2f2d !important; background-image:none !important; border:none !important; box-shadow:none !important;" data-orig-id="${esc(id)}" data-alt-id="${esc(altId)}"><div class="flex items-center gap-3"><div class="min-w-0 flex-1"><div class="text-[11px] font-semibold text-gray-900">${esc(name)}</div>${nLine}</div>${checkbox}</div></button>`;
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
@@ -289,9 +332,9 @@ export function setupMealPlanEditor() {
|
||||
const def = INGREDIENTS[a.ingredientId];
|
||||
const name = def?.name || a.ingredientId;
|
||||
const disp = a.amount * S.servings;
|
||||
html += `<div class="mpe-ing-row rounded-xl border border-dashed border-gray-300 bg-white p-2.5" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
|
||||
html += `<div class="mpe-ing-row rounded-xl p-2.5" style="background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
|
||||
html += `<div class="flex items-center gap-2">`;
|
||||
html += `<div class="flex-1 min-w-0 flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(name)}</span><span class="text-[9px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-400 font-medium shrink-0">Dodany</span></div>`;
|
||||
html += `<div class="flex-1 min-w-0 flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(name)}</span><span class="shrink-0 inline-flex items-center justify-center text-[#8f8b84]" title="Dodany składnik" aria-label="Dodany składnik"><i class="fas fa-plus text-[8px]"></i></span></div>`;
|
||||
html += `<button type="button" class="mpe-edit-amt shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
|
||||
html += `<span class="text-[12px] font-semibold text-gray-900 tabular-nums">${fmtAmt(disp)}</span>`;
|
||||
html += `<span class="text-[11px] text-gray-500">${esc(a.unit)}</span></button>`;
|
||||
@@ -315,7 +358,7 @@ export function setupMealPlanEditor() {
|
||||
const el = document.getElementById('mpe-add-area');
|
||||
if (!el) return;
|
||||
if (!S.addOpen) {
|
||||
el.innerHTML = `<button type="button" id="mpe-add-btn" class="w-full py-2 rounded-xl border border-dashed border-gray-200 text-[12px] font-semibold text-gray-500 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 transition-colors"><i class="fas fa-plus text-[10px] mr-1.5 opacity-70"></i>Dodaj składnik</button>`;
|
||||
el.innerHTML = `<button type="button" id="mpe-add-btn" class="w-full py-2 rounded-xl border border-dashed text-[12px] font-semibold transition-colors" style="border-color:#444442; color:#9b978f; background:transparent !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent;"><i class="fas fa-plus text-[10px] mr-1.5 opacity-70"></i>Dodaj składnik</button>`;
|
||||
return;
|
||||
}
|
||||
const recipe = RECIPES[S.recipeId];
|
||||
@@ -326,15 +369,15 @@ export function setupMealPlanEditor() {
|
||||
const q = S.addQuery.toLowerCase().trim();
|
||||
const avail = Object.values(INGREDIENTS).filter((i) => !usedIds.has(i.id) && (!q || i.name.toLowerCase().includes(q)));
|
||||
el.innerHTML = `
|
||||
<div class="border border-gray-200 rounded-xl bg-gray-50 p-3">
|
||||
<div class="rounded-xl p-3" style="background:#393937 !important; border:1px solid #444442;">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<input type="text" id="mpe-add-search" class="flex-1 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-[12px] outline-none focus:border-gray-400 placeholder:text-gray-400" placeholder="Szukaj składnika…" value="${esc(S.addQuery)}">
|
||||
<button type="button" id="mpe-add-cancel" class="text-[11px] font-semibold text-gray-500 hover:text-gray-900 px-2 py-1">Anuluj</button>
|
||||
<input type="text" id="mpe-add-search" class="flex-1 rounded-lg px-3 py-1.5 text-[12px] outline-none placeholder:text-[#8f8b84]" style="background:#2f2f2d !important; border:1px solid #444442; color:#ddd6ca;" placeholder="Szukaj składnika…" value="${esc(S.addQuery)}">
|
||||
<button type="button" id="mpe-add-cancel" class="text-[11px] font-semibold px-2 py-1 transition-colors" style="color:#9b978f;">Anuluj</button>
|
||||
</div>
|
||||
<div class="max-h-40 overflow-y-auto space-y-0.5 no-scrollbar" id="mpe-add-results">
|
||||
${avail.length === 0
|
||||
? '<p class="text-[11px] text-gray-400 text-center py-3">Brak wyników</p>'
|
||||
: avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg hover:bg-white transition-colors text-[12px] font-medium text-gray-800" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-gray-400 text-[10px]">${esc(i.category)}</span></button>`).join('')}
|
||||
? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:#2f2f2d !important; color:#9b978f;">Brak wyników</p>'
|
||||
: avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-[10px]" style="color:#9b978f;">${esc(i.category)}</span></button>`).join('')}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
@@ -350,13 +393,14 @@ export function setupMealPlanEditor() {
|
||||
const q = S.addQuery.toLowerCase().trim();
|
||||
const avail = Object.values(INGREDIENTS).filter((i) => !usedIds.has(i.id) && (!q || i.name.toLowerCase().includes(q)));
|
||||
results.innerHTML = avail.length === 0
|
||||
? '<p class="text-[11px] text-gray-400 text-center py-3">Brak wyników</p>'
|
||||
: avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg hover:bg-white transition-colors text-[12px] font-medium text-gray-800" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-gray-400 text-[10px]">${esc(i.category)}</span></button>`).join('');
|
||||
? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:#2f2f2d !important; color:#9b978f;">Brak wyników</p>'
|
||||
: avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-[10px]" style="color:#9b978f;">${esc(i.category)}</span></button>`).join('');
|
||||
}
|
||||
|
||||
function renderIngredients() {
|
||||
renderIngList();
|
||||
renderAddArea();
|
||||
requestAnimationFrame(syncScrollShadows);
|
||||
}
|
||||
|
||||
/* ── Nutrition summary ─────────────────────────── */
|
||||
@@ -366,15 +410,20 @@ export function setupMealPlanEditor() {
|
||||
if (!el) return;
|
||||
const n = totalNutrition();
|
||||
el.innerHTML = `
|
||||
<div class="rounded-xl border border-gray-100 bg-gray-50/80 p-3">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze${S.servings > 1 ? ` · ${S.servings} porcje` : ''}</p>
|
||||
<div class="grid grid-cols-4 gap-3 text-center">
|
||||
<div><span class="block text-[14px] font-bold text-gray-900 tabular-nums">${n.kcal}</span><span class="text-[10px] text-gray-500">kcal</span></div>
|
||||
<div><span class="block text-[14px] font-bold text-gray-900 tabular-nums">${n.protein} g</span><span class="text-[10px] text-gray-500">Białko</span></div>
|
||||
<div><span class="block text-[14px] font-bold text-gray-900 tabular-nums">${n.carbs} g</span><span class="text-[10px] text-gray-500">Węgle</span></div>
|
||||
<div><span class="block text-[14px] font-bold text-gray-900 tabular-nums">${n.fat} g</span><span class="text-[10px] text-gray-500">Tłuszcze</span></div>
|
||||
<div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
|
||||
<div class="flex-1 flex items-center">
|
||||
<div class="rounded-xl border px-3 py-2" style="border-color:#444442 !important;">
|
||||
<div class="grid grid-flow-col auto-cols-max gap-3 text-left">
|
||||
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.kcal}</span><span class="text-[9px] text-gray-500">kcal</span></div>
|
||||
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.protein}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Białko</span></div>
|
||||
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.carbs}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Węgle</span></div>
|
||||
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.fat}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Tłuszcze</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
requestAnimationFrame(syncScrollShadows);
|
||||
}
|
||||
|
||||
/* ── Render all ────────────────────────────────── */
|
||||
@@ -389,6 +438,8 @@ export function setupMealPlanEditor() {
|
||||
|
||||
S.mode = opts.mode || 'add';
|
||||
S.recipeId = opts.recipeId;
|
||||
S.originalDate = opts.date ? startOfDay(new Date(opts.date)) : null;
|
||||
S.originalSlotId = opts.slotId || null;
|
||||
S.servings = opts.servings || opts.entry?.servings || 1;
|
||||
S.subs = { ...(opts.substitutions || opts.entry?.substitutions || {}) };
|
||||
S.excluded = new Set(opts.entry?.excludedIngredients || []);
|
||||
@@ -400,9 +451,11 @@ export function setupMealPlanEditor() {
|
||||
S.addQuery = '';
|
||||
|
||||
if (opts.date && opts.slotId) {
|
||||
S.date = opts.date;
|
||||
S.date = startOfDay(new Date(opts.date));
|
||||
S.calDate = new Date(S.date);
|
||||
S.calExpanded = false;
|
||||
S.slotId = opts.slotId;
|
||||
S.showCal = false;
|
||||
S.showCal = S.mode === 'edit';
|
||||
} else {
|
||||
const today = startOfDay(new Date());
|
||||
S.date = today;
|
||||
@@ -417,6 +470,9 @@ export function setupMealPlanEditor() {
|
||||
document.getElementById('mpe-confirm-label').textContent = S.mode === 'edit' ? 'Zapisz zmiany' : 'Dodaj do planu';
|
||||
|
||||
renderAll();
|
||||
const body = document.getElementById('mpe-ing-scroll');
|
||||
if (body) body.scrollTop = 0;
|
||||
syncScrollShadows();
|
||||
|
||||
overlay.classList.remove('hidden');
|
||||
overlay.style.pointerEvents = 'auto';
|
||||
@@ -450,18 +506,38 @@ export function setupMealPlanEditor() {
|
||||
function handleConfirm() {
|
||||
if (!S.recipeId || !S.date || !S.slotId) return;
|
||||
const plans = loadPlans();
|
||||
const key = dateKey(S.date);
|
||||
const targetKey = dateKey(S.date);
|
||||
const nextEntry = buildEntry();
|
||||
|
||||
if (S.mode === 'edit' && S.entryId) {
|
||||
const arr = plans[key]?.[S.slotId];
|
||||
if (Array.isArray(arr)) {
|
||||
const sourceDate = S.originalDate || S.date;
|
||||
const sourceSlotId = S.originalSlotId || S.slotId;
|
||||
const sourceKey = dateKey(sourceDate);
|
||||
const sameTarget = sourceKey === targetKey && sourceSlotId === S.slotId;
|
||||
|
||||
if (sameTarget) {
|
||||
if (!plans[targetKey]) plans[targetKey] = {};
|
||||
if (!plans[targetKey][S.slotId]) plans[targetKey][S.slotId] = [];
|
||||
const arr = plans[targetKey][S.slotId];
|
||||
const idx = arr.findIndex((e) => e.id === S.entryId);
|
||||
if (idx >= 0) arr[idx] = buildEntry();
|
||||
if (idx >= 0) arr[idx] = nextEntry;
|
||||
else arr.push(nextEntry);
|
||||
} else {
|
||||
const sourceArr = plans[sourceKey]?.[sourceSlotId];
|
||||
if (Array.isArray(sourceArr)) {
|
||||
const idx = sourceArr.findIndex((e) => e.id === S.entryId);
|
||||
if (idx >= 0) sourceArr.splice(idx, 1);
|
||||
if (sourceArr.length === 0 && plans[sourceKey]) delete plans[sourceKey][sourceSlotId];
|
||||
if (plans[sourceKey] && Object.keys(plans[sourceKey]).length === 0) delete plans[sourceKey];
|
||||
}
|
||||
if (!plans[targetKey]) plans[targetKey] = {};
|
||||
if (!plans[targetKey][S.slotId]) plans[targetKey][S.slotId] = [];
|
||||
plans[targetKey][S.slotId].push(nextEntry);
|
||||
}
|
||||
} else {
|
||||
if (!plans[key]) plans[key] = {};
|
||||
if (!plans[key][S.slotId]) plans[key][S.slotId] = [];
|
||||
plans[key][S.slotId].push(buildEntry());
|
||||
if (!plans[targetKey]) plans[targetKey] = {};
|
||||
if (!plans[targetKey][S.slotId]) plans[targetKey][S.slotId] = [];
|
||||
plans[targetKey][S.slotId].push(nextEntry);
|
||||
}
|
||||
|
||||
savePlans(plans);
|
||||
@@ -475,6 +551,11 @@ export function setupMealPlanEditor() {
|
||||
document.getElementById('mpe-close-btn')?.addEventListener('click', closeEditor);
|
||||
overlay?.addEventListener('click', (e) => { if (e.target === overlay) closeEditor(); });
|
||||
document.getElementById('mpe-confirm-btn')?.addEventListener('click', handleConfirm);
|
||||
bindCalendarDayClicks(document.getElementById('mpe-cal-grid'), (date) => {
|
||||
S.date = date;
|
||||
S.calDate = new Date(date);
|
||||
renderCal();
|
||||
});
|
||||
|
||||
document.getElementById('mpe-cal-prev')?.addEventListener('click', () => {
|
||||
if (!S.showCal) return;
|
||||
@@ -503,6 +584,8 @@ export function setupMealPlanEditor() {
|
||||
renderSlots();
|
||||
});
|
||||
|
||||
document.getElementById('mpe-ing-scroll')?.addEventListener('scroll', syncScrollShadows);
|
||||
|
||||
document.getElementById('mpe-servings-row')?.addEventListener('click', (e) => {
|
||||
if (e.target.closest('#mpe-serv-minus')) { if (S.servings <= 1) return; S.servings--; }
|
||||
else if (e.target.closest('#mpe-serv-plus')) { if (S.servings >= 12) return; S.servings++; }
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { RECIPES } from '../data/catalog.js';
|
||||
import { RECIPES } from '../data/catalog.js?v=2';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
import { applyFilters, getFilterState, getFilteredCount, refreshRecipeList } from './RecipeList.js';
|
||||
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { INGREDIENTS, RECIPES } from '../data/catalog.js';
|
||||
import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=2';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
import {
|
||||
addDays,
|
||||
addMonths,
|
||||
addWeeks,
|
||||
sameDay,
|
||||
sameMonth,
|
||||
startOfDay,
|
||||
startOfMonth,
|
||||
@@ -26,12 +24,20 @@ import {
|
||||
newPlanEntryId,
|
||||
savePlans,
|
||||
} from '../services/planStore.js';
|
||||
import {
|
||||
CALENDAR_HANDLE_CLASS,
|
||||
CALENDAR_MONTHS_SHORT,
|
||||
bindCalendarDayClicks,
|
||||
createCalendarTopbarHTML,
|
||||
createCalendarWeekdayHeaderHTML,
|
||||
formatCalendarMonthYear,
|
||||
formatCalendarSelectedDate,
|
||||
isCalendarOnToday,
|
||||
renderCollapsibleCalendar,
|
||||
syncCalendarTodayButton,
|
||||
syncCollapsibleCalendarMode,
|
||||
} from '../ui/mealCalendar.js?v=1';
|
||||
|
||||
const MONTHS_SHORT = [
|
||||
'sty', 'lut', 'mar', 'kwi', 'maj', 'cze',
|
||||
'lip', 'sie', 'wrz', 'paź', 'lis', 'gru',
|
||||
];
|
||||
const WEEKDAYS_SHORT = ['pn', 'wt', 'śr', 'cz', 'pt', 'so', 'nd'];
|
||||
const WEEKDAYS_LONG = [
|
||||
'Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota',
|
||||
];
|
||||
@@ -44,154 +50,107 @@ function recipesForSlot(slotId) {
|
||||
return Object.values(RECIPES).filter((r) => r.allowedSlots.includes(slotId));
|
||||
}
|
||||
|
||||
function isCalendarOnToday(mode, weekStart, monthAnchor, selected) {
|
||||
const today = startOfDay(new Date());
|
||||
if (!sameDay(selected, today)) return false;
|
||||
if (mode === 'week') return weekContains(weekStart, today);
|
||||
return sameMonth(monthAnchor, today);
|
||||
}
|
||||
|
||||
function syncTodayButton(mode, weekStart, monthAnchor, selected) {
|
||||
const btn = document.getElementById('cal-go-today');
|
||||
if (!btn) return;
|
||||
const onToday = isCalendarOnToday(mode, weekStart, monthAnchor, selected);
|
||||
const active = 'h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-2 text-[10px] font-semibold text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 transition-colors';
|
||||
const dim = 'h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-100 bg-gray-50 px-2 text-[10px] font-semibold text-gray-400 shadow-none cursor-default transition-colors';
|
||||
btn.className = onToday ? dim : active;
|
||||
btn.disabled = onToday;
|
||||
syncCalendarTodayButton(
|
||||
document.getElementById('cal-go-today'),
|
||||
isCalendarOnToday(mode, weekStart, monthAnchor, selected),
|
||||
);
|
||||
}
|
||||
|
||||
export function getMealPlannerHTML() {
|
||||
return `
|
||||
<div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-gray-50 z-10 pb-24">
|
||||
<div class="shrink-0 bg-white border-b border-gray-200 mt-3">
|
||||
<div class="px-3 pt-2 pb-1.5 flex items-center gap-1">
|
||||
<button type="button" id="cal-prev" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors" aria-label="Poprzedni okres">
|
||||
<i class="fas fa-chevron-left text-xs" aria-hidden="true"></i>
|
||||
</button>
|
||||
<p id="cal-period-label" class="flex-1 min-w-0 text-xs font-medium text-gray-900 text-center tabular-nums leading-none px-1 truncate"></p>
|
||||
<button type="button" id="cal-next" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors" aria-label="Następny okres">
|
||||
<i class="fas fa-chevron-right text-xs" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-3 pb-2 flex items-center justify-center">
|
||||
<button type="button" id="cal-go-today" title="Dziś" aria-label="Przejdź do dzisiejszego dnia"
|
||||
class="h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-2.5 text-[10px] font-semibold text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 transition-colors">
|
||||
<i class="fas fa-calendar-day text-[9px] opacity-70" aria-hidden="true"></i>
|
||||
Dziś
|
||||
</button>
|
||||
</div>
|
||||
<div id="calendar-swipe-zone" style="touch-action: pan-x">
|
||||
<div id="calendar-week-wrap" class="px-3 pb-1" style="overflow: hidden; max-height: 10rem; opacity: 1">
|
||||
<div class="grid grid-cols-7 gap-0.5 text-center text-[9px] font-medium text-gray-400 uppercase tracking-wide mb-0.5 leading-none">
|
||||
${WEEKDAYS_SHORT.map((d) => `<div>${d}</div>`).join('')}
|
||||
</div>
|
||||
<div id="calendar-week-grid" class="grid grid-cols-7 gap-0.5"></div>
|
||||
<div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-[#2d2e2b] z-10 pb-24">
|
||||
<div class="shrink-0 bg-[#2d2e2b] border-b border-[#444442] mt-3">
|
||||
${createCalendarTopbarHTML({
|
||||
titleId: 'cal-period-label',
|
||||
prevId: 'cal-prev',
|
||||
todayId: 'cal-go-today',
|
||||
nextId: 'cal-next',
|
||||
titleClass: 'text-[18px] font-semibold text-[#ddd6ca] leading-none tracking-[-0.03em]',
|
||||
})}
|
||||
<div id="calendar-swipe-zone" class="overflow-x-hidden bg-[#2d2e2b]" style="touch-action: none">
|
||||
<div id="calendar-week-wrap" class="px-3 overflow-x-hidden bg-[#2d2e2b]" style="overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.75rem">
|
||||
${createCalendarWeekdayHeaderHTML()}
|
||||
<div id="calendar-week-grid" class="grid grid-cols-7 gap-1.5 max-w-full overflow-x-hidden"></div>
|
||||
</div>
|
||||
<div id="calendar-month-wrap" class="px-3 pb-1" style="overflow: hidden; max-height: 0; opacity: 0">
|
||||
<div class="grid grid-cols-7 gap-0.5 text-center text-[9px] font-medium text-gray-400 uppercase tracking-wide mb-0.5 leading-none">
|
||||
${WEEKDAYS_SHORT.map((d) => `<div>${d}</div>`).join('')}
|
||||
</div>
|
||||
<div id="calendar-month-grid" class="grid grid-cols-7 gap-0.5"></div>
|
||||
<div id="calendar-month-wrap" class="px-3 bg-[#2d2e2b]" style="overflow: hidden; max-height: 0; opacity: 0; padding-bottom: 0">
|
||||
${createCalendarWeekdayHeaderHTML()}
|
||||
<div id="calendar-month-grid" class="grid grid-cols-7 gap-1.5"></div>
|
||||
</div>
|
||||
<div id="calendar-drag-handle" class="flex items-center justify-center pb-2 pt-0.5">
|
||||
<i id="calendar-handle-icon" class="fas fa-chevron-down text-[8px] text-gray-300" aria-hidden="true"></i>
|
||||
<span id="calendar-handle-icon" class="${CALENDAR_HANDLE_CLASS}" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<p id="planner-day-heading" class="text-[13px] font-semibold text-gray-900 tabular-nums"></p>
|
||||
<button type="button" id="planner-copy-day" class="shrink-0 text-[11px] font-semibold text-gray-500 hover:text-gray-900 px-2.5 py-1 rounded-lg hover:bg-gray-100 transition-colors flex items-center gap-1.5">
|
||||
<i class="fas fa-copy text-[9px]"></i>Kopiuj dzień
|
||||
</button>
|
||||
</div>
|
||||
<div id="planner-summary-card" class="rounded-xl border border-amber-200/80 bg-gradient-to-br from-amber-50 to-white p-2.5 shadow-sm mb-3">
|
||||
<div class="flex items-start justify-between gap-2 mb-2">
|
||||
<div>
|
||||
<p class="text-[10px] font-semibold uppercase tracking-wide text-amber-900/70">Dziś — podsumowanie</p>
|
||||
<p id="planner-summary-kcal" class="text-xl font-bold text-gray-900 tabular-nums leading-tight mt-0.5">0 <span class="text-[13px] font-semibold text-gray-500">kcal</span></p>
|
||||
<div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-4 bg-[#2d2e2b]">
|
||||
<div id="planner-summary-card" class="mb-3">
|
||||
<div class="h-full flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
|
||||
<div class="flex-1 flex items-center">
|
||||
<div class="w-full rounded-xl border px-3 py-2.5" style="border-color:#444442 !important;">
|
||||
<div class="grid grid-cols-4 gap-3 text-left">
|
||||
<div class="min-w-0">
|
||||
<span id="planner-nutrition-kcal" class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">—</span>
|
||||
<span class="text-[9px] text-gray-500">kcal</span>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<span id="planner-nutrition-p" class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">—</span>
|
||||
<span class="text-[9px] text-gray-500">Białko</span>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<span id="planner-nutrition-c" class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">—</span>
|
||||
<span class="text-[9px] text-gray-500">Węgle</span>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<span id="planner-nutrition-f" class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">—</span>
|
||||
<span class="text-[9px] text-gray-500">Tłuszcze</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" id="planner-toggle-nutrition" class="shrink-0 flex items-center gap-1 text-[11px] font-semibold text-amber-900/80 hover:text-gray-900 py-1 px-2 rounded-lg hover:bg-amber-100/50 transition-colors" aria-expanded="false">
|
||||
Szczegóły
|
||||
<i class="fas fa-chevron-down text-[9px] transition-transform" id="planner-nutrition-chevron" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="planner-macro-row" class="flex gap-2 mb-0">
|
||||
<div class="flex-1 min-w-0 rounded-lg bg-white/80 border border-amber-100 px-2 py-1.5 text-center">
|
||||
<p class="text-[9px] font-semibold text-gray-500 uppercase">B</p>
|
||||
<p id="planner-macro-p" class="text-xs font-bold text-gray-900 tabular-nums">0 g</p>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 rounded-lg bg-white/80 border border-amber-100 px-2 py-1.5 text-center">
|
||||
<p class="text-[9px] font-semibold text-gray-500 uppercase">T</p>
|
||||
<p id="planner-macro-f" class="text-xs font-bold text-gray-900 tabular-nums">0 g</p>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 rounded-lg bg-white/80 border border-amber-100 px-2 py-1.5 text-center">
|
||||
<p class="text-[9px] font-semibold text-gray-500 uppercase">W</p>
|
||||
<p id="planner-macro-c" class="text-xs font-bold text-gray-900 tabular-nums">0 g</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="planner-nutrition-details" class="hidden mt-3 pt-3 border-t border-amber-200/60">
|
||||
<ul class="space-y-0 divide-y divide-amber-100/80 text-sm">
|
||||
<li class="flex justify-between py-2 font-bold"><span class="text-gray-800">Kalorie</span><span id="planner-detail-kcal" class="text-gray-900 tabular-nums">0 kcal</span></li>
|
||||
<li class="flex justify-between py-2"><span class="text-gray-700 font-medium">Białko</span><span id="planner-detail-p" class="font-medium text-gray-900 tabular-nums">0 g</span></li>
|
||||
<li class="flex justify-between py-2"><span class="text-gray-700 font-medium">Tłuszcze</span><span id="planner-detail-f" class="font-medium text-gray-900 tabular-nums">0 g</span></li>
|
||||
<li class="flex justify-between py-2"><span class="text-gray-700 font-medium">Węglowodany</span><span id="planner-detail-c" class="font-medium text-gray-900 tabular-nums">0 g</span></li>
|
||||
</ul>
|
||||
<p id="planner-summary-hint" class="text-[11px] text-gray-500 mt-2">Suma z zaplanowanych posiłków (porcje × wartości z przepisu).</p>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" id="planner-open-ingredients" class="w-full mb-3 flex items-center justify-center gap-2 py-2.5 rounded-xl border border-dashed border-gray-300 bg-white text-[13px] font-semibold text-gray-800 hover:border-gray-400 hover:bg-gray-50 transition-colors">
|
||||
<i class="fas fa-shopping-basket text-gray-500 text-xs" aria-hidden="true"></i>
|
||||
<button type="button" id="planner-open-ingredients" class="w-full mb-3 flex items-center justify-center gap-2 py-2.5 rounded-xl border border-dashed border-[#444442] bg-[#2d2e2b] text-[13px] font-semibold text-[#d7d2c8] hover:border-[#6d6c67] hover:bg-[#3a3a37] transition-colors">
|
||||
<i class="fas fa-shopping-basket text-[#9b978f] text-xs" aria-hidden="true"></i>
|
||||
Składniki na ten dzień
|
||||
</button>
|
||||
<div id="planner-meal-slots" class="space-y-3 pb-2"></div>
|
||||
<div id="planner-meal-slots" class="space-y-3 pb-2 bg-[#2d2e2b]"></div>
|
||||
</div>
|
||||
|
||||
<div id="planner-picker-backdrop" class="absolute left-0 right-0 top-0 z-[45] bg-black/45 hidden opacity-0 transition-opacity duration-200" style="bottom: ${PLANNER_SHEET_BOTTOM_INSET}" aria-hidden="true"></div>
|
||||
<div id="planner-picker-sheet" class="absolute left-0 right-0 z-[50] bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.12)] flex flex-col will-change-transform" style="visibility: hidden; bottom: ${PLANNER_SHEET_BOTTOM_INSET}; height: auto; max-height: ${PLANNER_SHEET_MAX_HEIGHT}; transform: ${PLANNER_SHEET_OFF_TRANSFORM}; transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1)" role="dialog" aria-labelledby="planner-picker-title" aria-modal="true">
|
||||
<div class="shrink-0 px-4 pt-3 pb-2 border-b border-gray-100 touch-none cursor-grab active:cursor-grabbing select-none" data-planner-sheet-drag-zone aria-label="Przeciągnij w dół, by zamknąć">
|
||||
<div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-2.5" aria-hidden="true"></div>
|
||||
<h2 id="planner-picker-title" class="text-[15px] font-bold text-gray-900 leading-tight pr-2">Wybierz przepis</h2>
|
||||
<p id="planner-picker-sub" class="text-[11px] text-gray-500 mt-1"></p>
|
||||
<div id="planner-picker-sheet" class="absolute left-0 right-0 z-[50] rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.12)] flex flex-col will-change-transform" style="visibility: hidden; bottom: ${PLANNER_SHEET_BOTTOM_INSET}; height: auto; max-height: ${PLANNER_SHEET_MAX_HEIGHT}; transform: ${PLANNER_SHEET_OFF_TRANSFORM}; transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1); background:#2d2e2b !important; background-image:none !important;" role="dialog" aria-labelledby="planner-picker-title" aria-modal="true">
|
||||
<div class="shrink-0 px-4 pt-3 pb-2 border-b border-[#444442] touch-none cursor-grab active:cursor-grabbing select-none" data-planner-sheet-drag-zone aria-label="Przeciągnij w dół, by zamknąć">
|
||||
<div class="w-10 h-1 bg-[#6d6c67]/75 rounded-full mx-auto mb-2.5" aria-hidden="true"></div>
|
||||
<h2 id="planner-picker-title" class="text-[15px] font-bold text-[#ddd6ca] leading-tight pr-2">Wybierz przepis</h2>
|
||||
<p id="planner-picker-sub" class="text-[11px] text-[#9b978f] mt-1"></p>
|
||||
</div>
|
||||
<div class="shrink-0 px-4 pt-2 pb-2">
|
||||
<input type="text" id="planner-picker-search" class="w-full rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-sm outline-none focus:border-gray-400 placeholder:text-gray-400" placeholder="Szukaj przepisu…" />
|
||||
<input type="text" id="planner-picker-search" class="w-full rounded-xl border border-[#444442] bg-[#2f2f2d] px-3 py-2 text-sm text-[#ddd6ca] outline-none focus:border-[#6d6c67] placeholder:text-[#7d7a74]" placeholder="Szukaj przepisu…" />
|
||||
</div>
|
||||
<div id="planner-picker-list" class="min-h-0 flex-1 overflow-y-auto no-scrollbar px-4 py-2.5 pb-8 space-y-2"></div>
|
||||
</div>
|
||||
|
||||
<div id="planner-ing-backdrop" class="absolute left-0 right-0 top-0 z-[45] bg-black/45 hidden opacity-0 transition-opacity duration-200" style="bottom: ${PLANNER_SHEET_BOTTOM_INSET}" aria-hidden="true"></div>
|
||||
<div id="planner-ing-sheet" class="absolute left-0 right-0 z-[50] bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.12)] flex flex-col will-change-transform" style="visibility: hidden; bottom: ${PLANNER_SHEET_BOTTOM_INSET}; height: auto; max-height: ${PLANNER_SHEET_MAX_HEIGHT}; transform: ${PLANNER_SHEET_OFF_TRANSFORM}; transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1)" role="dialog" aria-labelledby="planner-ing-title" aria-modal="true">
|
||||
<div class="shrink-0 px-4 pt-3 pb-2 border-b border-gray-100 touch-none cursor-grab active:cursor-grabbing select-none" data-planner-sheet-drag-zone aria-label="Przeciągnij w dół, by zamknąć">
|
||||
<div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-2.5" aria-hidden="true"></div>
|
||||
<h2 id="planner-ing-title" class="text-[15px] font-bold text-gray-900 leading-tight pr-2">Składniki i spiżarnia</h2>
|
||||
<p id="planner-ing-sub" class="text-[11px] text-gray-500 mt-1">Porównanie potrzeb z zapasami.</p>
|
||||
<div id="planner-ing-sheet" class="absolute left-0 right-0 z-[50] rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.12)] flex flex-col will-change-transform" style="visibility: hidden; bottom: ${PLANNER_SHEET_BOTTOM_INSET}; height: auto; max-height: ${PLANNER_SHEET_MAX_HEIGHT}; transform: ${PLANNER_SHEET_OFF_TRANSFORM}; transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1); background:#2d2e2b !important; background-image:none !important;" role="dialog" aria-labelledby="planner-ing-title" aria-modal="true">
|
||||
<div class="shrink-0 px-4 pt-3 pb-2 border-b border-[#444442] touch-none cursor-grab active:cursor-grabbing select-none" data-planner-sheet-drag-zone aria-label="Przeciągnij w dół, by zamknąć">
|
||||
<div class="w-10 h-1 bg-[#6d6c67]/75 rounded-full mx-auto mb-2.5" aria-hidden="true"></div>
|
||||
<h2 id="planner-ing-title" class="text-[15px] font-bold text-[#ddd6ca] leading-tight pr-2">Składniki i spiżarnia</h2>
|
||||
<p id="planner-ing-sub" class="text-[11px] text-[#9b978f] mt-1">Porównanie potrzeb z zapasami.</p>
|
||||
</div>
|
||||
<div id="planner-ing-body" class="min-h-0 flex-1 overflow-y-auto no-scrollbar px-4 py-2 pb-2"></div>
|
||||
<div id="planner-ing-footer" class="shrink-0 p-4 pt-2 pb-5 border-t border-gray-100 bg-white space-y-2">
|
||||
<div id="planner-ing-footer" class="shrink-0 p-4 pt-2 pb-5 border-t border-[#444442] bg-[#2d2e2b] space-y-2">
|
||||
<button type="button" id="planner-ing-add-all" class="w-full bg-gray-900 hover:bg-black text-white py-3 rounded-xl font-semibold shadow-sm transition-colors text-[13px] flex items-center justify-center gap-2">
|
||||
<i class="fas fa-cart-plus text-xs" aria-hidden="true"></i>
|
||||
Dodaj braki na dziś do listy
|
||||
</button>
|
||||
<button type="button" id="planner-ing-add-btn" class="hidden w-full border border-gray-200 bg-white text-gray-800 hover:bg-gray-50 py-2.5 rounded-xl font-semibold text-[13px] flex items-center justify-center gap-2 transition-colors">
|
||||
<i class="fas fa-calendar-week text-gray-500 text-[11px]" aria-hidden="true"></i>
|
||||
<button type="button" id="planner-ing-add-btn" class="hidden w-full border border-[#444442] bg-[#2d2e2b] text-[#d7d2c8] hover:bg-[#3a3a37] py-2.5 rounded-xl font-semibold text-[13px] flex items-center justify-center gap-2 transition-colors">
|
||||
<i class="fas fa-calendar-week text-[#9b978f] text-[11px]" aria-hidden="true"></i>
|
||||
Dodaj braki na cały tydzień
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="planner-copy-backdrop" class="absolute left-0 right-0 top-0 z-[45] bg-black/45 hidden opacity-0 transition-opacity duration-200" style="bottom: ${PLANNER_SHEET_BOTTOM_INSET}" aria-hidden="true"></div>
|
||||
<div id="planner-copy-sheet" class="absolute left-0 right-0 z-[50] bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.12)] flex flex-col will-change-transform" style="visibility: hidden; bottom: ${PLANNER_SHEET_BOTTOM_INSET}; height: auto; max-height: ${PLANNER_SHEET_MAX_HEIGHT}; transform: ${PLANNER_SHEET_OFF_TRANSFORM}; transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1)" role="dialog" aria-modal="true">
|
||||
<div class="shrink-0 px-4 pt-3 pb-2 border-b border-gray-100 touch-none cursor-grab active:cursor-grabbing select-none" data-planner-sheet-drag-zone>
|
||||
<div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-2.5"></div>
|
||||
<h2 class="text-[15px] font-bold text-gray-900 leading-tight">Kopiuj plan dnia</h2>
|
||||
<p id="planner-copy-sub" class="text-[11px] text-gray-500 mt-1">Wybierz dzień docelowy.</p>
|
||||
</div>
|
||||
<div id="planner-copy-list" class="min-h-0 flex-1 overflow-y-auto no-scrollbar px-4 py-2.5 pb-8 space-y-2"></div>
|
||||
</div>
|
||||
|
||||
<div id="planner-toast" class="pointer-events-none absolute left-4 right-4 bottom-28 z-[55] 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="planner-toast-text"></div>
|
||||
</div>
|
||||
@@ -199,105 +158,23 @@ export function getMealPlannerHTML() {
|
||||
`;
|
||||
}
|
||||
|
||||
function renderWeekGrid(weekStart, selected, plans) {
|
||||
const grid = document.getElementById('calendar-week-grid');
|
||||
if (!grid) return;
|
||||
|
||||
const cells = [];
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const day = addDays(weekStart, i);
|
||||
const isSel = selected && sameDay(day, selected);
|
||||
const isToday = sameDay(day, new Date());
|
||||
const hasMeals = dayHasAnyMeal(plans, day);
|
||||
cells.push(`
|
||||
<button type="button" data-planner-day="${day.getTime()}"
|
||||
class="flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight
|
||||
${isSel ? 'bg-gray-900 text-white' : 'text-gray-800 hover:bg-gray-100'}
|
||||
${isToday && !isSel ? 'ring-1 ring-inset ring-gray-900' : ''}">
|
||||
<span>${day.getDate()}</span>
|
||||
${hasMeals ? `<span class="w-1 h-1 rounded-full ${isSel ? 'bg-white' : 'bg-gray-900'} opacity-80" aria-hidden="true"></span>` : '<span class="w-1 h-1" aria-hidden="true"></span>'}
|
||||
</button>
|
||||
`);
|
||||
}
|
||||
grid.innerHTML = cells.join('');
|
||||
}
|
||||
|
||||
function renderMonthGrid(monthAnchor, selected, plans) {
|
||||
const grid = document.getElementById('calendar-month-grid');
|
||||
if (!grid) return;
|
||||
|
||||
const first = startOfMonth(monthAnchor);
|
||||
const startGrid = startOfWeekMonday(first);
|
||||
const cells = [];
|
||||
for (let i = 0; i < 42; i++) {
|
||||
const day = addDays(startGrid, i);
|
||||
const inMonth = day.getMonth() === first.getMonth();
|
||||
const isSel = selected && sameDay(day, selected);
|
||||
const isToday = sameDay(day, new Date());
|
||||
const hasMeals = inMonth && dayHasAnyMeal(plans, day);
|
||||
cells.push(`
|
||||
<button type="button" data-planner-day="${day.getTime()}"
|
||||
class="flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight
|
||||
${!inMonth ? 'text-gray-300' : (isSel ? 'bg-gray-900 text-white' : 'text-gray-800 hover:bg-gray-100')}
|
||||
${inMonth && isToday && !isSel ? 'ring-1 ring-inset ring-gray-900' : ''}">
|
||||
<span>${day.getDate()}</span>
|
||||
${inMonth && hasMeals ? `<span class="w-1 h-1 rounded-full ${isSel ? 'bg-white' : 'bg-gray-900'} opacity-80" aria-hidden="true"></span>` : '<span class="w-1 h-1" aria-hidden="true"></span>'}
|
||||
</button>
|
||||
`);
|
||||
}
|
||||
grid.innerHTML = cells.join('');
|
||||
}
|
||||
|
||||
function updatePeriodLabel(mode, weekStart, monthAnchor) {
|
||||
function updatePeriodLabel(mode, weekStart, monthAnchor, selected) {
|
||||
const el = document.getElementById('cal-period-label');
|
||||
if (!el) return;
|
||||
|
||||
if (mode === 'week') {
|
||||
const end = addDays(weekStart, 6);
|
||||
const y = weekStart.getFullYear();
|
||||
if (weekStart.getMonth() === end.getMonth()) {
|
||||
el.textContent = `${weekStart.getDate()}–${end.getDate()} ${MONTHS_SHORT[weekStart.getMonth()]} ${y}`;
|
||||
} else {
|
||||
el.textContent = `${weekStart.getDate()} ${MONTHS_SHORT[weekStart.getMonth()]} – ${end.getDate()} ${MONTHS_SHORT[end.getMonth()]} ${y}`;
|
||||
}
|
||||
el.textContent = formatCalendarSelectedDate(selected);
|
||||
} else {
|
||||
const m = monthAnchor.getMonth();
|
||||
const y = monthAnchor.getFullYear();
|
||||
const monthLong = [
|
||||
'Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec',
|
||||
'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień',
|
||||
][m];
|
||||
el.textContent = `${monthLong} ${y}`;
|
||||
el.textContent = formatCalendarMonthYear(monthAnchor);
|
||||
}
|
||||
}
|
||||
|
||||
function syncModeToggle(mode) {
|
||||
const weekWrap = document.getElementById('calendar-week-wrap');
|
||||
const monthWrap = document.getElementById('calendar-month-wrap');
|
||||
const handleIcon = document.getElementById('calendar-handle-icon');
|
||||
|
||||
if (weekWrap) {
|
||||
weekWrap.style.maxHeight = mode === 'week' ? '10rem' : '0';
|
||||
weekWrap.style.opacity = mode === 'week' ? '1' : '0';
|
||||
}
|
||||
if (monthWrap) {
|
||||
monthWrap.style.maxHeight = mode === 'month' ? '25rem' : '0';
|
||||
monthWrap.style.opacity = mode === 'month' ? '1' : '0';
|
||||
}
|
||||
if (handleIcon) {
|
||||
handleIcon.className = mode === 'week'
|
||||
? 'fas fa-chevron-down text-[8px] text-gray-300'
|
||||
: 'fas fa-chevron-up text-[8px] text-gray-300';
|
||||
}
|
||||
}
|
||||
|
||||
function bindDayClicks(container, state, rerender) {
|
||||
container?.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('[data-planner-day]');
|
||||
if (!btn) return;
|
||||
const ts = Number(btn.getAttribute('data-planner-day'));
|
||||
state.selected = new Date(ts);
|
||||
rerender();
|
||||
syncCollapsibleCalendarMode({
|
||||
mode,
|
||||
weekWrapEl: document.getElementById('calendar-week-wrap'),
|
||||
monthWrapEl: document.getElementById('calendar-month-wrap'),
|
||||
handleEl: document.getElementById('calendar-handle-icon'),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -445,30 +322,26 @@ function bindPlannerSheetDragClose(sheet, closeFn) {
|
||||
|
||||
function renderDayContent(state) {
|
||||
const sel = state.selected;
|
||||
const heading = document.getElementById('planner-day-heading');
|
||||
if (heading) {
|
||||
const wd = WEEKDAYS_LONG[sel.getDay()];
|
||||
heading.textContent = `${wd}, ${sel.getDate()} ${MONTHS_SHORT[sel.getMonth()]}`;
|
||||
}
|
||||
|
||||
const dayPlan = getDayPlan(state.plans, sel);
|
||||
const totals = sumDayNutrition(dayPlan);
|
||||
|
||||
const kcalEl = document.getElementById('planner-summary-kcal');
|
||||
if (kcalEl) {
|
||||
kcalEl.innerHTML = totals.mealCount === 0
|
||||
? `— <span class="text-sm font-semibold text-gray-500">kcal</span>`
|
||||
: `${totals.kcal} <span class="text-sm font-semibold text-gray-500">kcal</span>`;
|
||||
}
|
||||
const fmt = (n) => `${n} g`;
|
||||
document.getElementById('planner-macro-p').textContent = totals.mealCount ? fmt(totals.protein) : '—';
|
||||
document.getElementById('planner-macro-f').textContent = totals.mealCount ? fmt(totals.fat) : '—';
|
||||
document.getElementById('planner-macro-c').textContent = totals.mealCount ? fmt(totals.carbs) : '—';
|
||||
const setText = (id, value) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = value;
|
||||
};
|
||||
const setGrams = (id, value) => {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
el.innerHTML = value === null
|
||||
? '—'
|
||||
: `${value}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span>`;
|
||||
};
|
||||
|
||||
document.getElementById('planner-detail-kcal').textContent = `${totals.kcal} kcal`;
|
||||
document.getElementById('planner-detail-p').textContent = fmt(totals.protein);
|
||||
document.getElementById('planner-detail-f').textContent = fmt(totals.fat);
|
||||
document.getElementById('planner-detail-c').textContent = fmt(totals.carbs);
|
||||
const hasMeals = totals.mealCount > 0;
|
||||
setText('planner-nutrition-kcal', hasMeals ? String(totals.kcal) : '—');
|
||||
setGrams('planner-nutrition-p', hasMeals ? totals.protein : null);
|
||||
setGrams('planner-nutrition-f', hasMeals ? totals.fat : null);
|
||||
setGrams('planner-nutrition-c', hasMeals ? totals.carbs : null);
|
||||
|
||||
const ingBtn = document.getElementById('planner-open-ingredients');
|
||||
if (ingBtn) {
|
||||
@@ -506,7 +379,7 @@ function renderDayContent(state) {
|
||||
if (entry?.recipeId && RECIPES[entry.recipeId]) slotKcal += computeEntryNutrition(entry).kcal;
|
||||
});
|
||||
const kcalBadge = slotKcal > 0
|
||||
? `<span class="text-[10px] font-semibold text-amber-600 tabular-nums shrink-0 ml-auto">${slotKcal} kcal</span>`
|
||||
? `<span class="text-[10px] font-semibold text-[#f2efe8] tabular-nums shrink-0 ml-auto">${slotKcal} kcal</span>`
|
||||
: '';
|
||||
const countLabel = entries.length > 1
|
||||
? `<span class="text-[10px] font-semibold text-gray-400 tabular-nums shrink-0">${entries.length} dania</span>`
|
||||
@@ -522,31 +395,31 @@ function renderDayContent(state) {
|
||||
(entry.amountOverrides && Object.keys(entry.amountOverrides).length > 0) ||
|
||||
(entry.addedIngredients?.length > 0) ||
|
||||
(entry.substitutions && Object.keys(entry.substitutions).length > 0);
|
||||
const customDot = hasCustom ? '<span class="w-1.5 h-1.5 rounded-full bg-amber-400 inline-block shrink-0 ml-1"></span>' : '';
|
||||
const servLabel = servings > 1 ? `<span class="mx-1.5 text-gray-300">·</span>×${servings}` : '';
|
||||
const customDot = hasCustom ? '<span class="w-1.5 h-1.5 rounded-full bg-amber-400 inline-block shrink-0 ml-1"></span>' : '';
|
||||
const servLabel = servings > 1 ? `<span class="mx-1.5 text-[#6d6c67]">·</span>×${servings}` : '';
|
||||
return `
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-2 shadow-sm" data-slot-id="${slot.id}" data-entry-id="${eid}">
|
||||
<div class="rounded-lg bg-[#2d2e2b] p-2" data-slot-id="${slot.id}" data-entry-id="${eid}">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex items-center gap-2 min-w-0 cursor-pointer planner-open-recipe" data-recipe-id="${escapeHtml(recipe.id)}">
|
||||
<div class="w-8 h-8 rounded-lg bg-[#d4d4d4] overflow-hidden shrink-0">
|
||||
<div class="w-8 h-8 rounded-lg bg-[#3a3a37] overflow-hidden shrink-0">
|
||||
${recipe.image
|
||||
? `<img src="${escapeHtml(recipe.image)}" alt="" class="w-full h-full object-cover">`
|
||||
: `<span class="w-full h-full flex items-center justify-center text-white text-[8px] font-medium">${escapeHtml(recipe.thumbLabel)}</span>`}
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center"><p class="text-[13px] font-bold text-gray-900 truncate underline decoration-1 underline-offset-2">${escapeHtml(recipe.title)}</p>${customDot}</div>
|
||||
<p class="text-[11px] text-gray-500 mt-0.5 tabular-nums">
|
||||
<i class="fas fa-clock text-gray-400 mr-0.5" aria-hidden="true"></i>${recipe.minutes} min
|
||||
<span class="mx-1.5 text-gray-300">·</span>
|
||||
<i class="fas fa-fire text-gray-400 mr-0.5" aria-hidden="true"></i>${entryN.kcal} kcal${servLabel}
|
||||
<div class="flex items-center"><p class="text-[13px] font-bold text-[#ddd6ca] truncate underline decoration-1 underline-offset-2">${escapeHtml(recipe.title)}</p>${customDot}</div>
|
||||
<p class="text-[11px] text-[#9b978f] mt-0.5 tabular-nums">
|
||||
<i class="fas fa-clock text-[#7d7a74] mr-0.5" aria-hidden="true"></i>${recipe.minutes} min
|
||||
<span class="mx-1.5 text-[#6d6c67]">·</span>
|
||||
<i class="fas fa-fire text-[#7d7a74] mr-0.5" aria-hidden="true"></i>${entryN.kcal} kcal${servLabel}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<button type="button" class="planner-edit-meal w-6 h-6 rounded-full border border-gray-200 text-gray-400 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 flex items-center justify-center transition-colors" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Edytuj ten przepis">
|
||||
<button type="button" class="planner-edit-meal w-6 h-6 rounded-full border border-[#444442] text-[#9b978f] hover:text-[#ddd6ca] hover:border-[#6d6c67] hover:bg-[#3a3a37] flex items-center justify-center transition-colors" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Edytuj ten przepis">
|
||||
<i class="fas fa-pencil text-[9px]" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button type="button" class="planner-clear-meal w-6 h-6 rounded-full border border-gray-200 text-gray-400 hover:text-red-600 hover:border-red-200 hover:bg-red-50 transition-colors flex items-center justify-center" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Usuń ten przepis">
|
||||
<button type="button" class="planner-clear-meal w-6 h-6 rounded-full border border-[#444442] text-[#9b978f] hover:text-red-400 hover:border-red-300/60 hover:bg-[#3a2326] transition-colors flex items-center justify-center" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Usuń ten przepis">
|
||||
<i class="fas fa-times text-[9px]" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -556,27 +429,25 @@ function renderDayContent(state) {
|
||||
|
||||
if (isSkipped) {
|
||||
return `
|
||||
<div class="rounded-xl border border-gray-200 bg-white shadow-sm overflow-hidden opacity-60" data-slot-id="${slot.id}">
|
||||
<div class="flex items-center gap-2 px-3 py-2 border-b border-gray-100 bg-gray-50/90">
|
||||
<span class="w-7 h-7 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 shrink-0">
|
||||
<i class="fas ${slot.icon} text-[13px]" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="text-[13px] font-semibold text-gray-400 truncate min-w-0 flex-1">${slot.label}</span>
|
||||
<div class="rounded-xl bg-[#393937] overflow-hidden opacity-60" style="background:#393937 !important;" data-slot-id="${slot.id}">
|
||||
<div class="flex items-center gap-2 px-3 py-2 border-b border-[#444442] bg-[#393937]" style="background:#393937 !important;">
|
||||
<i class="fas ${slot.icon} w-7 text-center text-[13px] text-[#7d7a74] shrink-0" aria-hidden="true"></i>
|
||||
<span class="text-[13px] font-semibold text-[#9b978f] truncate min-w-0 flex-1">${slot.label}</span>
|
||||
</div>
|
||||
<div class="p-2.5 flex items-center justify-between">
|
||||
<span class="text-xs text-gray-400 italic"><i class="fas fa-forward text-[9px] mr-1.5"></i>Pominięto</span>
|
||||
<button type="button" class="planner-unskip text-[11px] font-semibold text-gray-500 hover:text-gray-900 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors" data-slot-id="${slot.id}">Cofnij</button>
|
||||
<span class="text-xs text-[#9b978f] italic"><i class="fas fa-forward text-[9px] mr-1.5"></i>Pominięto</span>
|
||||
<button type="button" class="planner-unskip text-[11px] font-semibold text-[#9b978f] hover:text-[#ddd6ca] px-2 py-1 rounded-lg hover:bg-[#3a3a37] transition-colors" data-slot-id="${slot.id}">Cofnij</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
const addLabel = entries.length === 0 ? 'Dodaj przepis' : 'Dodaj kolejny';
|
||||
const addClasses = entries.length === 0
|
||||
? 'planner-add-meal flex-1 py-2 rounded-lg border border-dashed border-gray-200 text-[13px] font-semibold text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors'
|
||||
: 'planner-add-meal w-full py-1.5 rounded-lg border border-dashed border-gray-200 text-xs font-semibold text-gray-600 hover:bg-gray-50 hover:border-gray-300 transition-colors';
|
||||
? 'planner-add-meal flex-1 py-2 rounded-lg border border-dashed border-[#444442] text-[13px] font-semibold text-[#d7d2c8] hover:bg-[#3a3a37] hover:border-[#6d6c67] transition-colors'
|
||||
: 'planner-add-meal w-full py-1.5 rounded-lg border border-dashed border-[#444442] text-xs font-semibold text-[#d7d2c8] hover:bg-[#3a3a37] hover:border-[#6d6c67] transition-colors';
|
||||
|
||||
const skipBtn = entries.length === 0
|
||||
? `<button type="button" class="planner-skip-meal shrink-0 py-2 px-3 rounded-lg text-[11px] font-semibold text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors" data-slot-id="${slot.id}"><i class="fas fa-forward text-[9px] mr-1"></i>Pomijam</button>`
|
||||
? `<button type="button" class="planner-skip-meal shrink-0 py-2 px-3 rounded-lg text-[11px] font-semibold text-[#9b978f] hover:text-[#ddd6ca] hover:bg-[#3a3a37] transition-colors" data-slot-id="${slot.id}"><i class="fas fa-forward text-[9px] mr-1"></i>Pomijam</button>`
|
||||
: '';
|
||||
|
||||
const bottomRow = entries.length === 0
|
||||
@@ -584,12 +455,10 @@ function renderDayContent(state) {
|
||||
: `<button type="button" class="${addClasses}" data-slot-id="${slot.id}"><i class="fas fa-plus text-[10px] mr-1 opacity-70" aria-hidden="true"></i>${addLabel}</button>`;
|
||||
|
||||
return `
|
||||
<div class="rounded-xl border border-gray-200 bg-white shadow-sm overflow-hidden" data-slot-id="${slot.id}">
|
||||
<div class="flex items-center gap-2 px-3 py-2 border-b border-gray-100 bg-gray-50/90">
|
||||
<span class="w-7 h-7 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 shrink-0">
|
||||
<i class="fas ${slot.icon} text-[13px]" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="text-[13px] font-semibold text-gray-900 truncate min-w-0 flex-1">${slot.label}</span>
|
||||
<div class="rounded-xl bg-[#393937] overflow-hidden" style="background:#393937 !important;" data-slot-id="${slot.id}">
|
||||
<div class="flex items-center gap-2 px-3 py-2 border-b border-[#444442] bg-[#393937]" style="background:#393937 !important;">
|
||||
<i class="fas ${slot.icon} w-7 text-center text-[13px] text-[#9b978f] shrink-0" aria-hidden="true"></i>
|
||||
<span class="text-[13px] font-semibold text-[#ddd6ca] truncate min-w-0 flex-1">${slot.label}</span>
|
||||
${countLabel}
|
||||
${kcalBadge}
|
||||
</div>
|
||||
@@ -632,18 +501,18 @@ function getRecentRecipeIds(plans, limit = 5) {
|
||||
|
||||
function recipeCardHtml(r) {
|
||||
return `
|
||||
<button type="button" class="planner-pick-recipe w-full flex gap-2.5 p-2.5 rounded-xl border border-gray-200 bg-gray-50/80 hover:border-gray-900 hover:bg-white text-left transition-all" data-recipe-id="${r.id}">
|
||||
<div class="w-11 h-11 rounded-lg bg-[#d4d4d4] overflow-hidden shrink-0">
|
||||
<button type="button" class="planner-pick-recipe w-full flex gap-2.5 p-2.5 rounded-xl border border-[#444442] bg-[#2d2e2b] hover:border-[#6d6c67] hover:bg-[#3a3a37] text-left transition-all" data-recipe-id="${r.id}">
|
||||
<div class="w-11 h-11 rounded-lg bg-[#3a3a37] overflow-hidden shrink-0">
|
||||
${r.image
|
||||
? `<img src="${escapeHtml(r.image)}" alt="" class="w-full h-full object-cover">`
|
||||
: `<span class="w-full h-full flex items-center justify-center text-white text-[9px] font-medium">${escapeHtml(r.thumbLabel)}</span>`}
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 py-0.5">
|
||||
<p class="text-[13px] font-bold text-gray-900 line-clamp-2">${escapeHtml(r.title)}</p>
|
||||
<p class="text-[11px] text-gray-500 mt-1 tabular-nums">
|
||||
<i class="fas fa-fire text-gray-400 mr-0.5" aria-hidden="true"></i>${r.nutritionPerServing.kcal} kcal
|
||||
<span class="mx-1 text-gray-300">·</span>
|
||||
<i class="fas fa-clock text-gray-400 mr-0.5" aria-hidden="true"></i>${r.minutes} min
|
||||
<p class="text-[13px] font-bold text-[#ddd6ca] line-clamp-2">${escapeHtml(r.title)}</p>
|
||||
<p class="text-[11px] text-[#9b978f] mt-1 tabular-nums">
|
||||
<i class="fas fa-fire text-[#7d7a74] mr-0.5" aria-hidden="true"></i>${r.nutritionPerServing.kcal} kcal
|
||||
<span class="mx-1 text-[#6d6c67]">·</span>
|
||||
<i class="fas fa-clock text-[#7d7a74] mr-0.5" aria-hidden="true"></i>${r.minutes} min
|
||||
</p>
|
||||
</div>
|
||||
</button>`;
|
||||
@@ -672,11 +541,11 @@ function renderPickerList(slotId, plans, query = '') {
|
||||
: allRecipes;
|
||||
|
||||
if (filtered.length === 0 && q) {
|
||||
list.innerHTML = '<p class="text-sm text-gray-500 text-center py-6">Brak wyników.</p>';
|
||||
list.innerHTML = '<p class="text-sm text-[#9b978f] text-center py-6">Brak wyników.</p>';
|
||||
return;
|
||||
}
|
||||
if (filtered.length === 0) {
|
||||
list.innerHTML = '<p class="text-sm text-gray-500 text-center py-6">Brak dopasowanych przepisów.</p>';
|
||||
list.innerHTML = '<p class="text-sm text-[#9b978f] text-center py-6">Brak dopasowanych przepisów.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -688,7 +557,7 @@ function renderPickerList(slotId, plans, query = '') {
|
||||
if (recentInSlot.length > 0) {
|
||||
html += `<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider px-0.5 pt-1 pb-1"><i class="fas fa-history text-[9px] mr-1"></i>Ostatnio używane</p>`;
|
||||
html += recentInSlot.map(recipeCardHtml).join('');
|
||||
html += `<div class="border-t border-gray-100 my-2"></div>`;
|
||||
html += `<div class="border-t border-[#444442] my-2"></div>`;
|
||||
html += `<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider px-0.5 pt-1 pb-1">Wszystkie</p>`;
|
||||
}
|
||||
}
|
||||
@@ -753,12 +622,12 @@ function renderIngredientsSheet(state) {
|
||||
|
||||
if (titleEl) {
|
||||
const wd = WEEKDAYS_LONG[state.selected.getDay()];
|
||||
titleEl.textContent = `${wd}, ${state.selected.getDate()} ${MONTHS_SHORT[state.selected.getMonth()]} — składniki`;
|
||||
titleEl.textContent = `${wd}, ${state.selected.getDate()} ${CALENDAR_MONTHS_SHORT[state.selected.getMonth()]} — składniki`;
|
||||
}
|
||||
if (subEl) subEl.textContent = 'Porównanie potrzeb z zapasami w spiżarni.';
|
||||
|
||||
if (!today || today.items.length === 0) {
|
||||
body.innerHTML = '<p class="text-sm text-gray-500 text-center py-8">Najpierw zaplanuj posiłki.</p>';
|
||||
body.innerHTML = '<p class="text-sm text-[#9b978f] text-center py-8">Najpierw zaplanuj posiłki.</p>';
|
||||
updateIngButtons(state);
|
||||
return;
|
||||
}
|
||||
@@ -768,22 +637,22 @@ function renderIngredientsSheet(state) {
|
||||
let html = '';
|
||||
|
||||
if (shortItems.length === 0) {
|
||||
html += `<div class="rounded-xl bg-emerald-50 border border-emerald-200/80 p-3 mb-4 flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
|
||||
html += `<div class="rounded-xl bg-[#2d2e2b] border border-emerald-400/40 p-3 mb-4 flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full bg-[#24352a] flex items-center justify-center shrink-0">
|
||||
<i class="fas fa-check text-emerald-600 text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[13px] font-semibold text-emerald-800">Wszystko masz w spiżarni</p>
|
||||
<p class="text-[13px] font-semibold text-emerald-300">Wszystko masz w spiżarni</p>
|
||||
<p class="text-[11px] text-emerald-600/80">${today.items.length} ${plIngredientWord(today.items.length)} — zapasy wystarczą</p>
|
||||
</div>
|
||||
</div>`;
|
||||
} else {
|
||||
html += `<div class="rounded-xl bg-red-50 border border-red-200/80 p-3 mb-4 flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center shrink-0">
|
||||
html += `<div class="rounded-xl bg-[#2d2e2b] border border-red-300/40 p-3 mb-4 flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full bg-[#3a2326] flex items-center justify-center shrink-0">
|
||||
<i class="fas fa-exclamation text-red-500 text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[13px] font-semibold text-red-800">${shortItems.length} ${plIngredientWord(shortItems.length)} do kupienia</p>
|
||||
<p class="text-[13px] font-semibold text-red-300">${shortItems.length} ${plIngredientWord(shortItems.length)} do kupienia</p>
|
||||
<p class="text-[11px] text-red-600/80">Brakuje składników na zaplanowane posiłki</p>
|
||||
</div>
|
||||
</div>`;
|
||||
@@ -794,15 +663,15 @@ function renderIngredientsSheet(state) {
|
||||
<p class="text-[10px] font-bold text-red-400 uppercase tracking-wider mb-2 px-0.5">
|
||||
<i class="fas fa-cart-shopping text-[9px] mr-1"></i>Do kupienia
|
||||
</p>
|
||||
<ul class="border border-red-100/80 rounded-xl overflow-hidden bg-white divide-y divide-red-50">
|
||||
<ul class="border border-red-300/30 rounded-xl overflow-hidden bg-[#2d2e2b] divide-y divide-[#3a2326]">
|
||||
${shortItems.map((ing) => `
|
||||
<li class="flex items-start gap-3 py-3 px-3">
|
||||
<div class="w-2 h-2 rounded-full bg-red-400 mt-1.5 shrink-0"></div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-[13px] font-semibold text-gray-900">${escapeHtml(ing.name)}</p>
|
||||
<p class="text-[11px] text-gray-500 mt-0.5">
|
||||
potrzeba <span class="font-medium text-gray-700">${formatAmount(ing.amount)} ${escapeHtml(ing.pantryUnit)}</span>
|
||||
<span class="mx-1 text-gray-300">·</span>
|
||||
<p class="text-[13px] font-semibold text-[#ddd6ca]">${escapeHtml(ing.name)}</p>
|
||||
<p class="text-[11px] text-[#9b978f] mt-0.5">
|
||||
potrzeba <span class="font-medium text-[#d7d2c8]">${formatAmount(ing.amount)} ${escapeHtml(ing.pantryUnit)}</span>
|
||||
<span class="mx-1 text-[#6d6c67]">·</span>
|
||||
w spiżarni <span class="font-medium ${ing.pantryQty > 0 ? 'text-amber-600' : 'text-gray-400'}">${ing.pantryQty > 0 ? formatAmount(ing.pantryQty) + ' ' + escapeHtml(ing.pantryUnit) : 'brak'}</span>
|
||||
</p>
|
||||
</div>
|
||||
@@ -820,15 +689,15 @@ function renderIngredientsSheet(state) {
|
||||
<p class="text-[10px] font-bold text-emerald-500 uppercase tracking-wider mb-2 px-0.5">
|
||||
<i class="fas fa-check text-[9px] mr-1"></i>W spiżarni
|
||||
</p>
|
||||
<ul class="border border-gray-100 rounded-xl overflow-hidden bg-white divide-y divide-gray-50">
|
||||
<ul class="border border-[#444442] rounded-xl overflow-hidden bg-[#2d2e2b] divide-y divide-[#353632]">
|
||||
${okItems.map((ing) => `
|
||||
<li class="flex items-start gap-3 py-2.5 px-3">
|
||||
<div class="w-2 h-2 rounded-full bg-emerald-400 mt-1.5 shrink-0"></div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-[13px] font-medium text-gray-700">${escapeHtml(ing.name)}</p>
|
||||
<p class="text-[11px] text-gray-400 mt-0.5">
|
||||
potrzeba <span class="font-medium">${formatAmount(ing.amount)} ${escapeHtml(ing.pantryUnit)}</span>
|
||||
<span class="mx-1 text-gray-300">·</span>
|
||||
<p class="text-[13px] font-medium text-[#d7d2c8]">${escapeHtml(ing.name)}</p>
|
||||
<p class="text-[11px] text-[#9b978f] mt-0.5">
|
||||
potrzeba <span class="font-medium text-[#d7d2c8]">${formatAmount(ing.amount)} ${escapeHtml(ing.pantryUnit)}</span>
|
||||
<span class="mx-1 text-[#6d6c67]">·</span>
|
||||
masz <span class="font-medium text-emerald-600">${formatAmount(ing.pantryQty)} ${escapeHtml(ing.pantryUnit)}</span>
|
||||
</p>
|
||||
</div>
|
||||
@@ -845,9 +714,9 @@ function renderIngredientsSheet(state) {
|
||||
<div class="space-y-2">
|
||||
${upcoming.map((day) => {
|
||||
const wd = WEEKDAYS_LONG[day.date.getDay()];
|
||||
const label = `${wd}, ${day.date.getDate()} ${MONTHS_SHORT[day.date.getMonth()]}`;
|
||||
const label = `${wd}, ${day.date.getDate()} ${CALENDAR_MONTHS_SHORT[day.date.getMonth()]}`;
|
||||
const shorts = day.items.filter((it) => !it.enough);
|
||||
return `<div class="rounded-xl border border-amber-200/80 bg-amber-50/50 p-3">
|
||||
return `<div class="rounded-xl border border-amber-200/80 bg-[#2d2e2b] p-3">
|
||||
<p class="text-[12px] font-semibold text-amber-900">
|
||||
<i class="fas fa-calendar-day text-[10px] mr-1.5 text-amber-500"></i>${escapeHtml(label)}
|
||||
</p>
|
||||
@@ -896,7 +765,6 @@ export function setupMealPlanner() {
|
||||
monthAnchor: startOfDay(new Date()),
|
||||
selected: startOfDay(new Date()),
|
||||
plans,
|
||||
nutritionExpanded: false,
|
||||
pickerSlot: null,
|
||||
};
|
||||
|
||||
@@ -907,15 +775,24 @@ export function setupMealPlanner() {
|
||||
const pickerSheet = document.getElementById('planner-picker-sheet');
|
||||
const ingBackdrop = document.getElementById('planner-ing-backdrop');
|
||||
const ingSheet = document.getElementById('planner-ing-sheet');
|
||||
const copyBackdrop = document.getElementById('planner-copy-backdrop');
|
||||
const copySheet = document.getElementById('planner-copy-sheet');
|
||||
|
||||
const rerender = () => {
|
||||
syncModeToggle(state.mode);
|
||||
updatePeriodLabel(state.mode, state.weekStart, state.monthAnchor);
|
||||
updatePeriodLabel(state.mode, state.weekStart, state.monthAnchor, state.selected);
|
||||
syncTodayButton(state.mode, state.weekStart, state.monthAnchor, state.selected);
|
||||
renderWeekGrid(state.weekStart, state.selected, state.plans);
|
||||
renderMonthGrid(state.monthAnchor, state.selected, state.plans);
|
||||
renderCollapsibleCalendar({
|
||||
weekGridEl: weekGrid,
|
||||
monthGridEl: monthGrid,
|
||||
weekAnchorDate: state.weekStart,
|
||||
monthAnchorDate: state.monthAnchor,
|
||||
selectedDate: state.selected,
|
||||
resolveDayState: (day, meta) => ({
|
||||
dimmed: meta.mode === 'month' && !meta.inCurrentMonth,
|
||||
showIndicator: meta.mode === 'month'
|
||||
? meta.inCurrentMonth && dayHasAnyMeal(state.plans, day)
|
||||
: dayHasAnyMeal(state.plans, day),
|
||||
}),
|
||||
});
|
||||
renderDayContent(state);
|
||||
};
|
||||
|
||||
@@ -924,8 +801,14 @@ export function setupMealPlanner() {
|
||||
rerender();
|
||||
};
|
||||
|
||||
bindDayClicks(weekGrid?.parentElement, state, rerender);
|
||||
bindDayClicks(monthGrid?.parentElement, state, rerender);
|
||||
bindCalendarDayClicks(weekGrid, (date) => {
|
||||
state.selected = date;
|
||||
rerender();
|
||||
});
|
||||
bindCalendarDayClicks(monthGrid, (date) => {
|
||||
state.selected = date;
|
||||
rerender();
|
||||
});
|
||||
|
||||
document.getElementById('cal-prev')?.addEventListener('click', () => {
|
||||
if (state.mode === 'week') {
|
||||
@@ -965,16 +848,6 @@ export function setupMealPlanner() {
|
||||
rerender();
|
||||
});
|
||||
|
||||
document.getElementById('planner-toggle-nutrition')?.addEventListener('click', () => {
|
||||
state.nutritionExpanded = !state.nutritionExpanded;
|
||||
const details = document.getElementById('planner-nutrition-details');
|
||||
const chev = document.getElementById('planner-nutrition-chevron');
|
||||
const btn = document.getElementById('planner-toggle-nutrition');
|
||||
if (details) details.classList.toggle('hidden', !state.nutritionExpanded);
|
||||
if (chev) chev.classList.toggle('rotate-180', state.nutritionExpanded);
|
||||
if (btn) btn.setAttribute('aria-expanded', state.nutritionExpanded ? 'true' : 'false');
|
||||
});
|
||||
|
||||
document.getElementById('planner-meal-slots')?.addEventListener('click', (e) => {
|
||||
const skipBtn = e.target.closest('.planner-skip-meal');
|
||||
if (skipBtn) {
|
||||
@@ -1096,63 +969,6 @@ export function setupMealPlanner() {
|
||||
closeSheet(ingBackdrop, ingSheet);
|
||||
});
|
||||
|
||||
const closeCopy = () => closeSheet(copyBackdrop, copySheet);
|
||||
bindPlannerSheetDragClose(copySheet, closeCopy);
|
||||
copyBackdrop?.addEventListener('click', closeCopy);
|
||||
|
||||
document.getElementById('planner-copy-day')?.addEventListener('click', () => {
|
||||
const srcKey = dateKey(state.selected);
|
||||
const srcPlan = state.plans[srcKey];
|
||||
if (!srcPlan || Object.keys(srcPlan).length === 0) {
|
||||
showPlannerToast('Ten dzień jest pusty — nie ma co kopiować.');
|
||||
return;
|
||||
}
|
||||
const copyList = document.getElementById('planner-copy-list');
|
||||
if (!copyList) return;
|
||||
const days = [];
|
||||
for (let i = -3; i <= 10; i++) {
|
||||
if (i === 0) continue;
|
||||
const d = addDays(state.selected, i);
|
||||
days.push(d);
|
||||
}
|
||||
copyList.innerHTML = days.map((d) => {
|
||||
const wd = WEEKDAYS_LONG[d.getDay()];
|
||||
const label = `${wd}, ${d.getDate()} ${MONTHS_SHORT[d.getMonth()]}`;
|
||||
const hasMeals = dayHasAnyMeal(state.plans, d);
|
||||
const badge = hasMeals ? '<span class="text-[10px] text-amber-600 font-semibold">ma posiłki</span>' : '';
|
||||
return `<button type="button" class="planner-copy-target w-full flex items-center justify-between gap-2 p-3 rounded-xl border border-gray-200 bg-gray-50/80 hover:border-gray-900 hover:bg-white transition-all text-left" data-target-ts="${d.getTime()}">
|
||||
<span class="text-[13px] font-semibold text-gray-900">${escapeHtml(label)}</span>
|
||||
${badge}
|
||||
</button>`;
|
||||
}).join('');
|
||||
openSheet(copyBackdrop, copySheet);
|
||||
});
|
||||
|
||||
document.getElementById('planner-copy-list')?.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('.planner-copy-target');
|
||||
if (!btn) return;
|
||||
const targetDate = new Date(Number(btn.getAttribute('data-target-ts')));
|
||||
const srcKey = dateKey(state.selected);
|
||||
const tgtKey = dateKey(targetDate);
|
||||
const srcPlan = state.plans[srcKey];
|
||||
if (!srcPlan) return;
|
||||
|
||||
const copy = {};
|
||||
for (const [slotId, entries] of Object.entries(srcPlan)) {
|
||||
if (slotId === '_skipped') {
|
||||
copy._skipped = { ...entries };
|
||||
continue;
|
||||
}
|
||||
if (Array.isArray(entries)) {
|
||||
copy[slotId] = entries.map((e) => ({ ...e, id: newPlanEntryId() }));
|
||||
}
|
||||
}
|
||||
state.plans[tgtKey] = copy;
|
||||
closeCopy();
|
||||
persist();
|
||||
showPlannerToast('Plan skopiowany!');
|
||||
});
|
||||
|
||||
ingSheet?.addEventListener('click', (e) => {
|
||||
const row = e.target.closest('.planner-ing-row');
|
||||
if (!row || !ingSheet.contains(row)) return;
|
||||
|
||||
@@ -2,7 +2,7 @@ import {
|
||||
INGREDIENTS,
|
||||
CATEGORY_LABELS,
|
||||
pantryQtyStep,
|
||||
} from '../data/catalog.js';
|
||||
} from '../data/catalog.js?v=2';
|
||||
import { addIngredientToKitchenList, categoryLabel, loadPantry, setPantryQty } from '../services/pantryShopping.js';
|
||||
import { showAppToast } from '../ui/toast.js';
|
||||
|
||||
|
||||
@@ -1,667 +0,0 @@
|
||||
import { RECIPES, INGREDIENTS } from '../data/catalog.js';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
import { addDays, addMonths, sameDay, sameMonth, startOfDay, startOfMonth, startOfWeekMonday } from '../services/dateUtils.js';
|
||||
import { dateKey, loadPlans, newPlanEntryId, savePlans } from '../services/planStore.js';
|
||||
import { showAppToast } from '../ui/toast.js';
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
|
||||
const slotLabelMap = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
|
||||
const MONTHS_LONG = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'];
|
||||
const WEEKDAYS_SHORT = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd'];
|
||||
|
||||
export function getRecipeDetailHTML() {
|
||||
return `
|
||||
<div id="recipe-detail-view" class="absolute inset-0 bg-white z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
|
||||
<div class="absolute top-0 w-full p-3.5 flex justify-between z-40 mt-3">
|
||||
<button onclick="closeRecipeDetail()" class="w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
|
||||
<i class="fas fa-arrow-left text-[13px]"></i>
|
||||
</button>
|
||||
<button id="rd-add-to-planner-btn" class="h-9 px-3 bg-white/90 backdrop-blur rounded-full flex items-center justify-center gap-1.5 shadow-sm text-gray-800 hover:bg-white transition-colors text-[12px] font-semibold">
|
||||
<i class="fas fa-calendar-plus text-[11px]"></i> Zaplanuj
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="rd-planner-picker" class="absolute inset-0 z-50 bg-black/45 hidden flex items-end" style="pointer-events: none">
|
||||
<div id="rd-planner-sheet" class="w-full bg-white rounded-t-3xl shadow-lg p-5 pb-8 max-h-[85vh] overflow-y-auto" style="pointer-events: auto; transform: translateY(100%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1)">
|
||||
<div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-4"></div>
|
||||
<h3 class="text-[15px] font-bold text-gray-900 mb-1">Zaplanuj</h3>
|
||||
<p id="rd-planner-recipe-name" class="text-[11px] text-gray-500 mb-3"></p>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
<button id="rd-cal-prev" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-left text-xs"></i></button>
|
||||
<p id="rd-cal-title" class="flex-1 min-w-0 text-xs font-medium text-gray-900 text-center tabular-nums leading-none px-1 truncate"></p>
|
||||
<button id="rd-cal-next" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-right text-xs"></i></button>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mb-2">
|
||||
<button id="rd-cal-today" type="button" class="h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-2.5 text-[10px] font-semibold text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 transition-colors hidden">
|
||||
<i class="fas fa-calendar-day text-[9px] opacity-70"></i> Dziś
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-0.5 text-center text-[9px] font-medium text-gray-400 uppercase tracking-wide mb-0.5 leading-none">
|
||||
${WEEKDAYS_SHORT.map((d) => `<div>${d}</div>`).join('')}
|
||||
</div>
|
||||
<div id="rd-cal-grid" class="grid grid-cols-7 gap-0.5"></div>
|
||||
<button id="rd-cal-toggle" type="button" class="w-full flex items-center justify-center py-1 mt-1 text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<i id="rd-cal-toggle-icon" class="fas fa-chevron-down text-[10px]"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Pora posiłku</p>
|
||||
<div id="rd-planner-slots" class="flex flex-wrap gap-1.5 mb-4"></div>
|
||||
|
||||
<div id="rd-planner-variant" class="mb-4 hidden">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wymienne składniki</p>
|
||||
<div id="rd-planner-variant-options"></div>
|
||||
</div>
|
||||
<button id="rd-planner-confirm" type="button" class="w-full bg-gray-900 hover:bg-black text-white py-3 rounded-xl font-semibold text-[13px] transition-colors flex items-center justify-center gap-2">
|
||||
<i class="fas fa-check text-xs"></i> Dodaj
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rd-hero" class="h-[220px] shrink-0 w-full bg-[#d4d4d4] flex items-center justify-center relative">
|
||||
<span id="rd-hero-label" class="text-white font-medium text-[15px]"></span>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden">
|
||||
<div class="mb-3 px-5 shrink-0">
|
||||
<div class="flex justify-between items-start mb-2.5">
|
||||
<h1 id="rd-title" class="text-xl font-bold text-gray-900"></h1>
|
||||
</div>
|
||||
<div id="rd-tags" class="flex flex-wrap gap-1.5 mb-3"></div>
|
||||
<div class="flex justify-between items-center text-[13px] text-gray-600 font-medium">
|
||||
<div class="flex gap-3.5">
|
||||
<div class="flex items-center gap-1.5"><i class="fas fa-clock text-gray-400 text-xs"></i><span id="rd-time"></span></div>
|
||||
<div class="flex items-center gap-1.5"><i class="fas fa-fire text-gray-400 text-xs"></i><span id="rd-kcal"></span></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-0.5 bg-gray-100 p-0.5 rounded-lg">
|
||||
<button id="rd-serv-minus" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[9px]"></i></button>
|
||||
<div class="flex items-center gap-1 px-1.5">
|
||||
<span id="rd-servings" class="font-bold text-gray-900 text-[13px] w-3 text-center tabular-nums">1</span>
|
||||
<span class="text-[11px] text-gray-500"><i class="fas fa-user-friends"></i></span>
|
||||
</div>
|
||||
<button id="rd-serv-plus" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[9px]"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex border-b border-gray-200 mb-2 px-5 shrink-0">
|
||||
<button class="flex-1 pb-2.5 text-[13px] font-semibold text-gray-900 border-b-2 border-gray-900 rd-tab-btn" data-rd-tab="ingredients">Składniki</button>
|
||||
<button class="flex-1 pb-2.5 text-[13px] font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 rd-tab-btn" data-rd-tab="steps">Kroki</button>
|
||||
<button class="flex-1 pb-2.5 text-[13px] font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 rd-tab-btn" data-rd-tab="nutrition">Wartości</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto px-5 pt-2 pb-10 no-scrollbar relative">
|
||||
<div id="rd-tab-ingredients" class="rd-tab-content block animate-fade-in"></div>
|
||||
<div id="rd-tab-steps" class="rd-tab-content hidden animate-fade-in"></div>
|
||||
<div id="rd-tab-nutrition" class="rd-tab-content hidden animate-fade-in"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/* ── state ─────────────────────────────────────────────── */
|
||||
|
||||
let currentRecipeId = null;
|
||||
let currentServings = 1;
|
||||
let currentSubstitutions = {};
|
||||
let expandedAlternatives = new Set();
|
||||
|
||||
function getEffectiveIngredientId(originalId) {
|
||||
return currentSubstitutions[originalId] || originalId;
|
||||
}
|
||||
|
||||
/* ── populate ──────────────────────────────────────────── */
|
||||
|
||||
function populateDetail(recipeId) {
|
||||
const recipe = RECIPES[recipeId];
|
||||
if (!recipe) return;
|
||||
|
||||
currentRecipeId = recipeId;
|
||||
currentServings = 1;
|
||||
currentSubstitutions = {};
|
||||
expandedAlternatives.clear();
|
||||
|
||||
document.getElementById('rd-hero-label').textContent = `Zdjęcie: ${recipe.title}`;
|
||||
document.getElementById('rd-title').textContent = recipe.title;
|
||||
document.getElementById('rd-time').textContent = `${recipe.minutes} min`;
|
||||
updateKcalDisplay();
|
||||
|
||||
const tagsHtml = [];
|
||||
for (const slotId of recipe.allowedSlots) {
|
||||
const label = slotLabelMap[slotId];
|
||||
if (label) tagsHtml.push(`<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">${escapeHtml(label)}</span>`);
|
||||
}
|
||||
for (const tag of (recipe.tags || [])) {
|
||||
tagsHtml.push(`<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">${escapeHtml(tag)}</span>`);
|
||||
}
|
||||
document.getElementById('rd-tags').innerHTML = tagsHtml.join('');
|
||||
document.getElementById('rd-servings').textContent = '1';
|
||||
|
||||
renderIngredients(recipe);
|
||||
renderSteps(recipe);
|
||||
renderNutrition(recipe);
|
||||
|
||||
const tabBtns = document.querySelectorAll('.rd-tab-btn');
|
||||
const tabs = document.querySelectorAll('.rd-tab-content');
|
||||
tabBtns.forEach((b) => {
|
||||
b.classList.remove('text-gray-900', 'border-gray-900', 'font-semibold');
|
||||
b.classList.add('text-gray-500', 'border-transparent', 'font-medium');
|
||||
});
|
||||
tabBtns[0]?.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
|
||||
tabBtns[0]?.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
|
||||
tabs.forEach((t) => { t.classList.add('hidden'); t.classList.remove('block'); });
|
||||
document.getElementById('rd-tab-ingredients')?.classList.remove('hidden');
|
||||
document.getElementById('rd-tab-ingredients')?.classList.add('block');
|
||||
}
|
||||
|
||||
/* ── helpers ───────────────────────────────────────────── */
|
||||
|
||||
function updateKcalDisplay() {
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (!recipe) return;
|
||||
const kcal = Math.round(recipe.nutritionPerServing.kcal * currentServings);
|
||||
document.getElementById('rd-kcal').textContent = `${kcal} kcal`;
|
||||
}
|
||||
|
||||
function nutritionForAmount(ingredientId, amount, unit) {
|
||||
const def = INGREDIENTS[ingredientId];
|
||||
if (!def?.nutritionPer100g) return null;
|
||||
let grams = amount;
|
||||
if ((unit === 'szt.' || unit === 'szt') && def.weightPerPiece) {
|
||||
grams = amount * def.weightPerPiece;
|
||||
}
|
||||
const f = grams / 100;
|
||||
return {
|
||||
kcal: Math.round(def.nutritionPer100g.kcal * f),
|
||||
protein: Math.round(def.nutritionPer100g.protein * f * 10) / 10,
|
||||
fat: Math.round(def.nutritionPer100g.fat * f * 10) / 10,
|
||||
carbs: Math.round(def.nutritionPer100g.carbs * f * 10) / 10,
|
||||
};
|
||||
}
|
||||
|
||||
function renderNutritionLine(nutrition) {
|
||||
if (!nutrition) return '';
|
||||
return `<div class="text-[10px] text-gray-500 mt-1 flex flex-wrap gap-x-3 gap-y-0.5"><span>${nutrition.kcal} kcal</span><span>${nutrition.protein}g białko</span><span>${nutrition.fat}g tłuszcz</span><span>${nutrition.carbs}g węgle</span></div>`;
|
||||
}
|
||||
|
||||
/* ── ingredients tab (read-only) ───────────────────────── */
|
||||
|
||||
function renderIngredients(recipe) {
|
||||
const container = document.getElementById('rd-tab-ingredients');
|
||||
if (!container) return;
|
||||
|
||||
const rows = recipe.ingredients.map((ing) => {
|
||||
const def = INGREDIENTS[ing.ingredientId];
|
||||
const name = def?.name || ing.ingredientId;
|
||||
const scaledAmount = ing.amount * currentServings;
|
||||
const displayAmount = Number.isInteger(scaledAmount) ? scaledAmount : parseFloat(scaledAmount.toFixed(1));
|
||||
|
||||
const hasAlts = ing.alternatives && ing.alternatives.length > 0;
|
||||
const isExpanded = expandedAlternatives.has(ing.ingredientId);
|
||||
|
||||
const toggleBtn = hasAlts
|
||||
? `<button type="button" class="rd-alt-toggle shrink-0 w-6 h-6 rounded-full ${isExpanded ? 'bg-amber-50 text-amber-500' : 'bg-gray-100 text-gray-400 hover:bg-gray-200'} flex items-center justify-center transition-colors" data-original-id="${escapeHtml(ing.ingredientId)}"><i class="fas fa-shuffle text-[9px]"></i></button>`
|
||||
: '';
|
||||
|
||||
let altListHtml = '';
|
||||
if (hasAlts) {
|
||||
const altCards = ing.alternatives.map((altId) => {
|
||||
const altDef = INGREDIENTS[altId];
|
||||
const altName = escapeHtml(altDef?.name || altId);
|
||||
const nutrition = nutritionForAmount(altId, scaledAmount, ing.unit);
|
||||
return `<div class="bg-gray-50 rounded-lg p-2.5 border border-gray-100">
|
||||
<p class="text-[12px] font-medium text-gray-700">${altName}</p>
|
||||
${renderNutritionLine(nutrition)}
|
||||
</div>`;
|
||||
});
|
||||
altListHtml = `
|
||||
<div class="rd-alt-list ${isExpanded ? '' : 'hidden'} mt-2 mb-0.5 space-y-1.5" data-original-id="${escapeHtml(ing.ingredientId)}">
|
||||
<p class="text-[10px] text-gray-400 font-medium mb-1">Można zamienić na:</p>
|
||||
${altCards.join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
return `
|
||||
<li class="py-2.5 border-b border-gray-100">
|
||||
<div class="flex items-center gap-2.5 py-0.5">
|
||||
<span class="text-gray-700 text-[13px] flex-1">${escapeHtml(name)}</span>
|
||||
${toggleBtn}
|
||||
<span class="font-medium text-gray-900 text-[13px] tabular-nums">${displayAmount} ${escapeHtml(ing.unit)}</span>
|
||||
</div>${altListHtml}
|
||||
</li>`;
|
||||
}).join('');
|
||||
|
||||
container.innerHTML = `
|
||||
<ul class="space-y-0" id="rd-ingredient-list">${rows}</ul>`;
|
||||
|
||||
container.querySelectorAll('.rd-alt-toggle').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const origId = btn.dataset.originalId;
|
||||
if (expandedAlternatives.has(origId)) {
|
||||
expandedAlternatives.delete(origId);
|
||||
} else {
|
||||
expandedAlternatives.add(origId);
|
||||
}
|
||||
const list = container.querySelector(`.rd-alt-list[data-original-id="${origId}"]`);
|
||||
if (list) list.classList.toggle('hidden');
|
||||
btn.classList.toggle('bg-gray-100');
|
||||
btn.classList.toggle('text-gray-400');
|
||||
btn.classList.toggle('bg-amber-50');
|
||||
btn.classList.toggle('text-amber-500');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ── steps tab ─────────────────────────────────────────── */
|
||||
|
||||
function renderSteps(recipe) {
|
||||
const container = document.getElementById('rd-tab-steps');
|
||||
if (!container) return;
|
||||
|
||||
const steps = recipe.steps || [];
|
||||
if (steps.length === 0) {
|
||||
container.innerHTML = '<p class="text-sm text-gray-500 text-center py-8">Brak kroków przygotowania.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="space-y-5 pb-5">
|
||||
${steps.map((step, i) => `
|
||||
<div class="flex gap-3">
|
||||
<div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">${i + 1}</div>
|
||||
<div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">${escapeHtml(step)}</p></div>
|
||||
</div>`).join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/* ── nutrition tab ─────────────────────────────────────── */
|
||||
|
||||
function renderNutrition(recipe) {
|
||||
const container = document.getElementById('rd-tab-nutrition');
|
||||
if (!container) return;
|
||||
|
||||
const n = recipe.nutritionPerServing;
|
||||
const s = currentServings;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="bg-gray-50 rounded-xl p-4 border border-gray-100 mb-5">
|
||||
<p class="text-[11px] text-gray-500 mb-3 font-medium">${s > 1 ? `Wartości dla ${s} porcji` : 'Wartości na 1 porcję'}</p>
|
||||
<ul class="space-y-0 divide-y divide-gray-200">
|
||||
<li class="flex justify-between py-2 font-bold"><span class="text-gray-900 text-[13px]">Kalorie</span><span class="text-gray-900 text-[13px] tabular-nums">${Math.round(n.kcal * s)} kcal</span></li>
|
||||
<li class="flex justify-between py-2"><span class="text-gray-800 text-[13px] font-medium">Białko</span><span class="font-medium text-gray-900 text-[13px] tabular-nums">${Math.round(n.protein * s * 10) / 10} g</span></li>
|
||||
<li class="flex justify-between py-2"><span class="text-gray-800 text-[13px] font-medium">Tłuszcze</span><span class="font-medium text-gray-900 text-[13px] tabular-nums">${Math.round(n.fat * s * 10) / 10} g</span></li>
|
||||
<li class="flex justify-between py-2"><span class="text-gray-800 text-[13px] font-medium">Węglowodany</span><span class="font-medium text-gray-900 text-[13px] tabular-nums">${Math.round(n.carbs * s * 10) / 10} g</span></li>
|
||||
</ul>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/* ── setup ─────────────────────────────────────────────── */
|
||||
|
||||
export function setupRecipeDetail() {
|
||||
document.querySelectorAll('.rd-tab-btn').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const tabId = btn.dataset.rdTab;
|
||||
document.querySelectorAll('.rd-tab-content').forEach((el) => {
|
||||
el.classList.add('hidden');
|
||||
el.classList.remove('block');
|
||||
});
|
||||
const target = document.getElementById(`rd-tab-${tabId}`);
|
||||
if (target) {
|
||||
target.classList.remove('hidden');
|
||||
target.classList.add('block');
|
||||
target.parentElement.scrollTop = 0;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.rd-tab-btn').forEach((b) => {
|
||||
b.classList.remove('text-gray-900', 'border-gray-900', 'font-semibold');
|
||||
b.classList.add('text-gray-500', 'border-transparent', 'font-medium');
|
||||
});
|
||||
btn.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
|
||||
btn.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('rd-serv-minus')?.addEventListener('click', () => {
|
||||
if (currentServings <= 1) return;
|
||||
currentServings--;
|
||||
document.getElementById('rd-servings').textContent = currentServings;
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (recipe) {
|
||||
renderIngredients(recipe);
|
||||
renderNutrition(recipe);
|
||||
updateKcalDisplay();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('rd-serv-plus')?.addEventListener('click', () => {
|
||||
if (currentServings >= 12) return;
|
||||
currentServings++;
|
||||
document.getElementById('rd-servings').textContent = currentServings;
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (recipe) {
|
||||
renderIngredients(recipe);
|
||||
renderNutrition(recipe);
|
||||
updateKcalDisplay();
|
||||
}
|
||||
});
|
||||
|
||||
/* ── planner picker ──────────────────────────────── */
|
||||
|
||||
let plannerPickerDay = null;
|
||||
let plannerPickerSlot = null;
|
||||
let calViewDate = null;
|
||||
let calExpanded = false;
|
||||
|
||||
const plannerOverlay = document.getElementById('rd-planner-picker');
|
||||
const plannerSheet = document.getElementById('rd-planner-sheet');
|
||||
|
||||
function renderCalendarCell(d, today, activeMonth) {
|
||||
const isToday = sameDay(d, today);
|
||||
const isSelected = plannerPickerDay && sameDay(d, plannerPickerDay);
|
||||
const isOtherMonth = d.getMonth() !== activeMonth;
|
||||
const isPast = d.getTime() < today.getTime();
|
||||
|
||||
let cls = 'flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight ';
|
||||
|
||||
if (isSelected) {
|
||||
cls += 'bg-gray-900 text-white ';
|
||||
} else if (isPast) {
|
||||
cls += 'text-gray-300 ';
|
||||
} else if (isOtherMonth) {
|
||||
cls += 'text-gray-300 ';
|
||||
} else {
|
||||
cls += 'text-gray-800 hover:bg-gray-100 ';
|
||||
}
|
||||
|
||||
if (isToday && !isSelected && !isPast) {
|
||||
cls += 'ring-1 ring-inset ring-gray-900 ';
|
||||
}
|
||||
|
||||
const inner = `<span>${d.getDate()}</span><span class="w-1 h-1"></span>`;
|
||||
|
||||
if (isPast && !isSelected) {
|
||||
return `<div class="${cls}">${inner}</div>`;
|
||||
}
|
||||
|
||||
return `<button type="button" class="rd-cal-day ${cls}" data-ts="${d.getTime()}">${inner}</button>`;
|
||||
}
|
||||
|
||||
function renderPlannerCalendar() {
|
||||
const grid = document.getElementById('rd-cal-grid');
|
||||
const titleEl = document.getElementById('rd-cal-title');
|
||||
const todayBtn = document.getElementById('rd-cal-today');
|
||||
const toggleIcon = document.getElementById('rd-cal-toggle-icon');
|
||||
if (!grid || !titleEl) return;
|
||||
|
||||
const today = startOfDay(new Date());
|
||||
|
||||
if (calExpanded) {
|
||||
const ms = startOfMonth(calViewDate);
|
||||
titleEl.textContent = `${MONTHS_LONG[ms.getMonth()]} ${ms.getFullYear()}`;
|
||||
toggleIcon.className = 'fas fa-chevron-up text-[10px]';
|
||||
|
||||
const firstCell = startOfWeekMonday(ms);
|
||||
const cells = [];
|
||||
let d = new Date(firstCell);
|
||||
for (let i = 0; i < 42; i++) {
|
||||
cells.push(new Date(d));
|
||||
d = addDays(d, 1);
|
||||
}
|
||||
while (cells.length > 7) {
|
||||
const last7 = cells.slice(-7);
|
||||
if (last7.every((c) => c.getMonth() !== ms.getMonth())) cells.splice(-7);
|
||||
else break;
|
||||
}
|
||||
|
||||
grid.innerHTML = cells.map((c) => renderCalendarCell(c, today, ms.getMonth())).join('');
|
||||
todayBtn.classList.toggle('hidden', sameMonth(today, calViewDate));
|
||||
} else {
|
||||
const ws = startOfWeekMonday(calViewDate);
|
||||
titleEl.textContent = `${MONTHS_LONG[calViewDate.getMonth()]} ${calViewDate.getFullYear()}`;
|
||||
toggleIcon.className = 'fas fa-chevron-down text-[10px]';
|
||||
|
||||
const cells = [];
|
||||
for (let i = 0; i < 7; i++) cells.push(addDays(ws, i));
|
||||
grid.innerHTML = cells.map((c) => renderCalendarCell(c, today, calViewDate.getMonth())).join('');
|
||||
|
||||
const todayWs = startOfWeekMonday(today);
|
||||
todayBtn.classList.toggle('hidden', sameDay(ws, todayWs));
|
||||
}
|
||||
|
||||
grid.querySelectorAll('.rd-cal-day').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
plannerPickerDay = new Date(Number(btn.dataset.ts));
|
||||
calViewDate = new Date(plannerPickerDay);
|
||||
renderPlannerCalendar();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('rd-cal-prev')?.addEventListener('click', () => {
|
||||
calViewDate = calExpanded ? addMonths(calViewDate, -1) : addDays(calViewDate, -7);
|
||||
renderPlannerCalendar();
|
||||
});
|
||||
document.getElementById('rd-cal-next')?.addEventListener('click', () => {
|
||||
calViewDate = calExpanded ? addMonths(calViewDate, 1) : addDays(calViewDate, 7);
|
||||
renderPlannerCalendar();
|
||||
});
|
||||
document.getElementById('rd-cal-today')?.addEventListener('click', () => {
|
||||
const today = startOfDay(new Date());
|
||||
plannerPickerDay = today;
|
||||
calViewDate = today;
|
||||
renderPlannerCalendar();
|
||||
});
|
||||
document.getElementById('rd-cal-toggle')?.addEventListener('click', () => {
|
||||
calExpanded = !calExpanded;
|
||||
renderPlannerCalendar();
|
||||
});
|
||||
|
||||
/* ── planner variant selection ────────────────────── */
|
||||
|
||||
const expandedVariantGroups = new Set();
|
||||
|
||||
function renderPlannerVariants(recipe) {
|
||||
const section = document.getElementById('rd-planner-variant');
|
||||
const container = document.getElementById('rd-planner-variant-options');
|
||||
if (!section || !container) return;
|
||||
|
||||
const altsIngredients = recipe.ingredients.filter((i) => i.alternatives?.length > 0);
|
||||
if (altsIngredients.length === 0) {
|
||||
section.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
section.classList.remove('hidden');
|
||||
|
||||
let html = '';
|
||||
for (const ing of altsIngredients) {
|
||||
const origId = ing.ingredientId;
|
||||
const scaledAmount = ing.amount * currentServings;
|
||||
const displayAmount = Number.isInteger(scaledAmount) ? scaledAmount : parseFloat(scaledAmount.toFixed(1));
|
||||
const effectiveId = getEffectiveIngredientId(origId);
|
||||
const effectiveDef = INGREDIENTS[effectiveId];
|
||||
const effectiveName = effectiveDef?.name || effectiveId;
|
||||
const isExpanded = expandedVariantGroups.has(origId);
|
||||
const isSwapped = effectiveId !== origId;
|
||||
|
||||
html += `<div class="mb-2 last:mb-0">
|
||||
<button type="button" class="rd-variant-toggle w-full flex items-center gap-2.5 p-2.5 rounded-xl border ${isSwapped ? 'border-amber-200 bg-amber-50/50' : 'border-gray-200 bg-white'} hover:border-gray-300 transition-colors text-left" data-original-id="${escapeHtml(origId)}">
|
||||
<i class="fas fa-shuffle text-[9px] ${isSwapped ? 'text-amber-500' : 'text-gray-400'}"></i>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[12px] font-semibold text-gray-900 truncate">${escapeHtml(effectiveName)}</span>
|
||||
<span class="text-[10px] text-gray-400 tabular-nums shrink-0">${displayAmount} ${escapeHtml(ing.unit)}</span>
|
||||
</div>
|
||||
${renderNutritionLine(nutritionForAmount(effectiveId, scaledAmount, ing.unit))}
|
||||
</div>
|
||||
<i class="fas fa-chevron-${isExpanded ? 'up' : 'down'} text-[9px] text-gray-400 shrink-0"></i>
|
||||
</button>`;
|
||||
|
||||
if (isExpanded) {
|
||||
const allOptions = [origId, ...ing.alternatives];
|
||||
html += '<div class="mt-1.5 space-y-1 pl-2">';
|
||||
for (const altId of allOptions) {
|
||||
const def = INGREDIENTS[altId];
|
||||
const altName = def?.name || altId;
|
||||
const isSelected = effectiveId === altId;
|
||||
const isOriginal = altId === origId;
|
||||
const nutrition = nutritionForAmount(altId, scaledAmount, ing.unit);
|
||||
|
||||
const selectedCls = isSelected
|
||||
? 'border-gray-900 bg-gray-50 ring-1 ring-gray-900'
|
||||
: 'border-gray-200 bg-white hover:border-gray-300';
|
||||
|
||||
let tag = '';
|
||||
if (isOriginal) tag = `<span class="text-[9px] px-1.5 py-0.5 rounded ${isSelected ? 'bg-gray-200 text-gray-600' : 'bg-gray-100 text-gray-400'} font-medium shrink-0">Domyślny</span>`;
|
||||
|
||||
html += `
|
||||
<button type="button" class="rd-variant-option w-full text-left p-2.5 rounded-lg border transition-all ${selectedCls}" data-original-id="${escapeHtml(origId)}" data-alt-id="${escapeHtml(altId)}">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-3.5 h-3.5 rounded-full border-2 shrink-0 ${isSelected ? 'border-gray-900' : 'border-gray-300'} flex items-center justify-center">
|
||||
${isSelected ? '<div class="w-1.5 h-1.5 rounded-full bg-gray-900"></div>' : ''}
|
||||
</div>
|
||||
<span class="text-[12px] font-semibold text-gray-900 truncate">${escapeHtml(altName)}</span>
|
||||
</div>
|
||||
${tag}
|
||||
</div>
|
||||
${renderNutritionLine(nutrition)}
|
||||
</button>`;
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
document.getElementById('rd-planner-variant-options')?.addEventListener('click', (e) => {
|
||||
const toggle = e.target.closest('.rd-variant-toggle');
|
||||
if (toggle) {
|
||||
const origId = toggle.dataset.originalId;
|
||||
if (expandedVariantGroups.has(origId)) expandedVariantGroups.delete(origId);
|
||||
else expandedVariantGroups.add(origId);
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (recipe) renderPlannerVariants(recipe);
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = e.target.closest('.rd-variant-option');
|
||||
if (!btn) return;
|
||||
const originalId = btn.dataset.originalId;
|
||||
const altId = btn.dataset.altId;
|
||||
if (altId === originalId) {
|
||||
delete currentSubstitutions[originalId];
|
||||
} else {
|
||||
currentSubstitutions[originalId] = altId;
|
||||
}
|
||||
expandedVariantGroups.delete(originalId);
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (recipe) renderPlannerVariants(recipe);
|
||||
});
|
||||
|
||||
function openPlannerPicker() {
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (!recipe) return;
|
||||
|
||||
document.getElementById('rd-planner-recipe-name').textContent = recipe.title;
|
||||
currentSubstitutions = {};
|
||||
expandedVariantGroups.clear();
|
||||
|
||||
const today = startOfDay(new Date());
|
||||
plannerPickerDay = today;
|
||||
calViewDate = today;
|
||||
calExpanded = false;
|
||||
renderPlannerCalendar();
|
||||
|
||||
renderPlannerVariants(recipe);
|
||||
|
||||
plannerPickerSlot = recipe.allowedSlots[0] || MEAL_SLOTS[0]?.id;
|
||||
const slotsContainer = document.getElementById('rd-planner-slots');
|
||||
slotsContainer.innerHTML = MEAL_SLOTS.filter((s) => recipe.allowedSlots.includes(s.id)).map((s) => {
|
||||
const sel = s.id === plannerPickerSlot;
|
||||
return `<button type="button" class="rd-plan-slot-btn px-3 py-1.5 rounded-lg border text-[12px] font-semibold transition-all ${sel ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-gray-50 text-gray-700 hover:border-gray-400'}" data-slot-id="${s.id}">${escapeHtml(s.label)}</button>`;
|
||||
}).join('');
|
||||
|
||||
plannerOverlay.classList.remove('hidden');
|
||||
plannerOverlay.style.pointerEvents = 'auto';
|
||||
requestAnimationFrame(() => {
|
||||
plannerSheet.style.transform = 'translateY(0)';
|
||||
});
|
||||
}
|
||||
|
||||
function closePlannerPicker() {
|
||||
plannerSheet.style.transform = 'translateY(100%)';
|
||||
setTimeout(() => {
|
||||
plannerOverlay.classList.add('hidden');
|
||||
plannerOverlay.style.pointerEvents = 'none';
|
||||
}, 300);
|
||||
}
|
||||
|
||||
document.getElementById('rd-add-to-planner-btn')?.addEventListener('click', openPlannerPicker);
|
||||
|
||||
plannerOverlay?.addEventListener('click', (e) => {
|
||||
if (e.target === plannerOverlay) closePlannerPicker();
|
||||
});
|
||||
|
||||
document.getElementById('rd-planner-slots')?.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('.rd-plan-slot-btn');
|
||||
if (!btn) return;
|
||||
plannerPickerSlot = btn.getAttribute('data-slot-id');
|
||||
document.querySelectorAll('.rd-plan-slot-btn').forEach((b) => {
|
||||
b.classList.remove('border-gray-900', 'bg-gray-900', 'text-white');
|
||||
b.classList.add('border-gray-200', 'bg-gray-50', 'text-gray-700');
|
||||
});
|
||||
btn.classList.remove('border-gray-200', 'bg-gray-50', 'text-gray-700');
|
||||
btn.classList.add('border-gray-900', 'bg-gray-900', 'text-white');
|
||||
});
|
||||
|
||||
document.getElementById('rd-planner-confirm')?.addEventListener('click', () => {
|
||||
if (!currentRecipeId || !plannerPickerDay || !plannerPickerSlot) return;
|
||||
const plans = loadPlans();
|
||||
const key = dateKey(plannerPickerDay);
|
||||
if (!plans[key]) plans[key] = {};
|
||||
if (!plans[key][plannerPickerSlot]) plans[key][plannerPickerSlot] = [];
|
||||
|
||||
const entry = {
|
||||
id: newPlanEntryId(),
|
||||
recipeId: currentRecipeId,
|
||||
servings: currentServings,
|
||||
};
|
||||
if (Object.keys(currentSubstitutions).length > 0) {
|
||||
entry.substitutions = { ...currentSubstitutions };
|
||||
}
|
||||
|
||||
plans[key][plannerPickerSlot].push(entry);
|
||||
savePlans(plans);
|
||||
closePlannerPicker();
|
||||
showAppToast('Dodano do planera!');
|
||||
window.refreshPlanner?.();
|
||||
});
|
||||
|
||||
window.openRecipeDetail = (recipeId) => {
|
||||
if (!recipeId || !RECIPES[recipeId]) return;
|
||||
populateDetail(recipeId);
|
||||
const view = document.getElementById('recipe-detail-view');
|
||||
view.classList.remove('translate-x-full', 'opacity-0', 'pointer-events-none');
|
||||
view.classList.add('translate-x-0', 'opacity-100', 'pointer-events-auto');
|
||||
};
|
||||
|
||||
window.closeRecipeDetail = () => {
|
||||
closePlannerPicker();
|
||||
const view = document.getElementById('recipe-detail-view');
|
||||
view.classList.remove('translate-x-0', 'opacity-100', 'pointer-events-auto');
|
||||
view.classList.add('translate-x-full', 'opacity-0', 'pointer-events-none');
|
||||
};
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { RECIPES, INGREDIENTS } from '../data/catalog.js';
|
||||
import { RECIPES, INGREDIENTS } from '../data/catalog.js?v=2';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
|
||||
function escapeHtml(s) {
|
||||
@@ -10,51 +10,79 @@ function escapeHtml(s) {
|
||||
}
|
||||
|
||||
const slotLabelMap = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
|
||||
const RD_THEME = Object.freeze({
|
||||
surface: '#393937',
|
||||
surfaceSoft: '#2f2f2d',
|
||||
surfaceActive: '#23221e',
|
||||
border: '#444442',
|
||||
borderSoft: '#56534f',
|
||||
borderStrong: '#787876',
|
||||
textPrimary: '#ddd6ca',
|
||||
textSecondary: '#d7d2c8',
|
||||
textMuted: '#9b978f',
|
||||
});
|
||||
|
||||
function forceBg(bg) {
|
||||
return `background:${bg} !important; background-image:none !important; box-shadow:none !important;`;
|
||||
}
|
||||
|
||||
function forceBgBorder(bg, border) {
|
||||
return `${forceBg(bg)} border:1px solid ${border} !important;`;
|
||||
}
|
||||
|
||||
function renderTagChip(label) {
|
||||
return `<span class="px-3 py-1 rounded-full text-[11px] font-semibold inline-flex items-center" style="${forceBgBorder(RD_THEME.surfaceSoft, RD_THEME.border)} color:${RD_THEME.textSecondary} !important;">${escapeHtml(label)}</span>`;
|
||||
}
|
||||
|
||||
function setTabButtonState(btn, active) {
|
||||
if (!btn) return;
|
||||
btn.style.color = active ? RD_THEME.textPrimary : RD_THEME.textMuted;
|
||||
btn.style.borderBottomColor = active ? RD_THEME.borderStrong : 'transparent';
|
||||
btn.style.fontWeight = active ? '600' : '500';
|
||||
}
|
||||
|
||||
export function getRecipeDetailHTML() {
|
||||
return `
|
||||
<div id="recipe-detail-view" class="absolute inset-0 bg-white z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
|
||||
<div id="recipe-detail-view" class="absolute inset-0 bg-[#2d2e2b] z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden" style="background:#2d2e2b !important; background-image:none !important;">
|
||||
<div class="absolute top-0 w-full p-3.5 flex justify-between z-40 mt-3">
|
||||
<button onclick="closeRecipeDetail()" class="w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
|
||||
<button onclick="closeRecipeDetail()" class="w-9 h-9 rounded-full border flex items-center justify-center transition-opacity opacity-95 hover:opacity-100" style="background:rgba(47,47,45,0.92) !important; backdrop-filter:none !important; border-color:#444442 !important; color:#ddd6ca !important;">
|
||||
<i class="fas fa-arrow-left text-[13px]"></i>
|
||||
</button>
|
||||
<button id="rd-add-to-planner-btn" class="h-9 px-3 bg-white/90 backdrop-blur rounded-full flex items-center justify-center gap-1.5 shadow-sm text-gray-800 hover:bg-white transition-colors text-[12px] font-semibold">
|
||||
<button id="rd-add-to-planner-btn" class="h-9 px-3 rounded-full border flex items-center justify-center gap-1.5 transition-opacity opacity-95 hover:opacity-100 text-[12px] font-semibold" style="background:rgba(47,47,45,0.92) !important; backdrop-filter:none !important; border-color:#444442 !important; color:#ddd6ca !important;">
|
||||
<i class="fas fa-calendar-plus text-[11px]"></i> Zaplanuj
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="rd-hero" class="h-[220px] shrink-0 w-full bg-[#d4d4d4] relative overflow-hidden">
|
||||
<div id="rd-hero" class="h-[236px] shrink-0 w-full relative overflow-hidden" style="background:linear-gradient(180deg, #3a3937 0%, #23221e 100%) !important;">
|
||||
<img id="rd-hero-img" src="" alt="" class="w-full h-full object-cover hidden">
|
||||
<span id="rd-hero-label" class="absolute inset-0 flex items-center justify-center text-white font-medium text-[15px]"></span>
|
||||
<div class="absolute inset-0 pointer-events-none" style="background:linear-gradient(to bottom, rgba(45,46,43,0.1), rgba(45,46,43,0.4), rgba(45,46,43,0.92));"></div>
|
||||
<span id="rd-hero-label" class="absolute inset-0 z-10 flex items-center justify-center font-medium text-[15px]" style="color:#ddd6ca;"></span>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden">
|
||||
<div class="bg-[#2d2e2b] rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden" style="background:#2d2e2b !important; background-image:none !important;">
|
||||
<div class="mb-3 px-5 shrink-0">
|
||||
<div class="flex justify-between items-start mb-2.5">
|
||||
<h1 id="rd-title" class="text-xl font-bold text-gray-900"></h1>
|
||||
<h1 id="rd-title" class="text-xl font-bold leading-tight" style="color:#ddd6ca;"></h1>
|
||||
</div>
|
||||
<div id="rd-tags" class="flex flex-wrap gap-1.5 mb-3"></div>
|
||||
<div class="flex justify-between items-center text-[13px] text-gray-600 font-medium">
|
||||
<div class="flex gap-3.5">
|
||||
<div class="flex items-center gap-1.5"><i class="fas fa-clock text-gray-400 text-xs"></i><span id="rd-time"></span></div>
|
||||
<div class="flex flex-wrap gap-2 text-[13px] font-medium">
|
||||
<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border" style="background:#2f2f2d; border-color:#444442; color:#d7d2c8;">
|
||||
<i class="fas fa-clock text-[10px]" style="color:#9b978f;"></i>
|
||||
<span id="rd-time"></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-0.5 bg-gray-100 p-0.5 rounded-lg">
|
||||
<button id="rd-serv-minus" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[9px]"></i></button>
|
||||
<div class="flex items-center gap-1 px-1.5">
|
||||
<span id="rd-servings" class="font-bold text-gray-900 text-[13px] w-3 text-center tabular-nums">1</span>
|
||||
<span class="text-[11px] text-gray-500"><i class="fas fa-user-friends"></i></span>
|
||||
</div>
|
||||
<button id="rd-serv-plus" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[9px]"></i></button>
|
||||
<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border" style="background:#2f2f2d; border-color:#444442; color:#d7d2c8;">
|
||||
<i class="fas fa-fire text-[10px]" style="color:#9b978f;"></i>
|
||||
<span id="rd-kcal" class="tabular-nums"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex border-b border-gray-200 mb-2 px-5 shrink-0">
|
||||
<button class="flex-1 pb-2.5 text-[13px] font-semibold text-gray-900 border-b-2 border-gray-900 rd-tab-btn" data-rd-tab="ingredients">Składniki</button>
|
||||
<button class="flex-1 pb-2.5 text-[13px] font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 rd-tab-btn" data-rd-tab="steps">Kroki</button>
|
||||
<div class="flex border-b mb-2 px-5 shrink-0" style="border-color:#444442;">
|
||||
<button class="flex-1 pb-2.5 text-[13px] border-b-2 rd-tab-btn" data-rd-tab="ingredients" style="color:#ddd6ca; border-bottom-color:#787876; font-weight:600;">Składniki</button>
|
||||
<button class="flex-1 pb-2.5 text-[13px] border-b-2 rd-tab-btn" data-rd-tab="steps" style="color:#9b978f; border-bottom-color:transparent; font-weight:500;">Kroki</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto px-5 pt-2 pb-10 no-scrollbar relative">
|
||||
<div class="flex-1 overflow-y-auto px-5 pt-2 pb-10 no-scrollbar relative" style="background:#2d2e2b !important; background-image:none !important; padding-bottom:calc(2.5rem + env(safe-area-inset-bottom));">
|
||||
<div id="rd-tab-ingredients" class="rd-tab-content block animate-fade-in"></div>
|
||||
<div id="rd-tab-steps" class="rd-tab-content hidden animate-fade-in"></div>
|
||||
</div>
|
||||
@@ -104,13 +132,12 @@ function populateDetail(recipeId) {
|
||||
const tagsHtml = [];
|
||||
for (const slotId of recipe.allowedSlots) {
|
||||
const label = slotLabelMap[slotId];
|
||||
if (label) tagsHtml.push(`<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">${escapeHtml(label)}</span>`);
|
||||
if (label) tagsHtml.push(renderTagChip(label));
|
||||
}
|
||||
for (const tag of (recipe.tags || [])) {
|
||||
tagsHtml.push(`<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">${escapeHtml(tag)}</span>`);
|
||||
tagsHtml.push(renderTagChip(tag));
|
||||
}
|
||||
document.getElementById('rd-tags').innerHTML = tagsHtml.join('');
|
||||
document.getElementById('rd-servings').textContent = '1';
|
||||
|
||||
renderIngredients(recipe);
|
||||
renderSteps(recipe);
|
||||
@@ -118,11 +145,9 @@ function populateDetail(recipeId) {
|
||||
const tabBtns = document.querySelectorAll('.rd-tab-btn');
|
||||
const tabs = document.querySelectorAll('.rd-tab-content');
|
||||
tabBtns.forEach((b) => {
|
||||
b.classList.remove('text-gray-900', 'border-gray-900', 'font-semibold');
|
||||
b.classList.add('text-gray-500', 'border-transparent', 'font-medium');
|
||||
setTabButtonState(b, false);
|
||||
});
|
||||
tabBtns[0]?.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
|
||||
tabBtns[0]?.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
|
||||
setTabButtonState(tabBtns[0], true);
|
||||
tabs.forEach((t) => { t.classList.add('hidden'); t.classList.remove('block'); });
|
||||
document.getElementById('rd-tab-ingredients')?.classList.remove('hidden');
|
||||
document.getElementById('rd-tab-ingredients')?.classList.add('block');
|
||||
@@ -155,6 +180,10 @@ function nutritionForAmount(ingredientId, amount, unit) {
|
||||
};
|
||||
}
|
||||
|
||||
function fmtAmt(n) {
|
||||
return Number.isInteger(n) ? String(n) : String(parseFloat(n.toFixed(1)));
|
||||
}
|
||||
|
||||
/* ── ingredients tab with inline nutrition + summary ───── */
|
||||
|
||||
function computeEffectiveNutritionTotals(recipe) {
|
||||
@@ -178,58 +207,42 @@ function computeEffectiveNutritionTotals(recipe) {
|
||||
}
|
||||
|
||||
function renderNutritionSummary(recipe) {
|
||||
const s = currentServings;
|
||||
const total = computeEffectiveNutritionTotals(recipe);
|
||||
|
||||
return `
|
||||
<div class="mb-4 pt-1 pb-3 border-b border-gray-100">
|
||||
${s > 1 ? `<p class="text-[10px] text-gray-400 font-medium mb-2">Wartości dla ${s} porcji</p>` : ''}
|
||||
<div class="grid grid-cols-4 gap-3 text-center">
|
||||
<div>
|
||||
<span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.kcal}</span>
|
||||
<span class="text-[10px] text-gray-500">Kalorie</span>
|
||||
<div class="mb-4">
|
||||
<div class="flex items-stretch gap-3">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
|
||||
<div class="flex-1 flex items-center">
|
||||
<div class="rounded-xl border px-3 py-2" style="border-color:#444442 !important;">
|
||||
<div class="grid grid-flow-col auto-cols-max gap-3 text-left">
|
||||
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${total.kcal}</span><span class="text-[9px] text-gray-500">kcal</span></div>
|
||||
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${total.protein}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Białko</span></div>
|
||||
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${total.carbs}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Węgle</span></div>
|
||||
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${total.fat}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Tłuszcze</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.protein} g</span>
|
||||
<span class="text-[10px] text-gray-500">Białko</span>
|
||||
<div class="shrink-0 w-[5.25rem]">
|
||||
<div class="h-full rounded-xl pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Porcje</p>
|
||||
<div class="flex items-center pt-2">
|
||||
<div class="flex h-[2rem] w-full items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;">
|
||||
<button type="button" id="rd-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
|
||||
<i class="fas fa-minus text-[10px]"></i>
|
||||
</button>
|
||||
<span id="rd-servings" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${currentServings}</span>
|
||||
<button type="button" id="rd-serv-plus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zwiększ liczbę porcji">
|
||||
<i class="fas fa-plus text-[10px]"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.carbs} g</span>
|
||||
<span class="text-[10px] text-gray-500">Węglo.</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.fat} g</span>
|
||||
<span class="text-[10px] text-gray-500">Tłuszcze</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderIngredientCard(name, amount, unit, nutrition, extra) {
|
||||
const displayAmount = Number.isInteger(amount) ? amount : parseFloat(amount.toFixed(1));
|
||||
const macroHtml = nutrition
|
||||
? `<div class="flex flex-wrap gap-x-2.5 text-[10px] text-gray-400 tabular-nums">
|
||||
<span>${nutrition.protein}g B</span><span>${nutrition.fat}g T</span><span>${nutrition.carbs}g W</span>
|
||||
</div>`
|
||||
: '';
|
||||
const kcalHtml = nutrition
|
||||
? `<span class="text-[10px] font-medium text-gray-400 tabular-nums whitespace-nowrap">${nutrition.kcal} kcal</span>`
|
||||
: '';
|
||||
|
||||
return `
|
||||
<div class="${extra?.cls || 'bg-white'} rounded-xl p-2.5 border ${extra?.border || 'border-gray-200'} flex items-center gap-2.5" ${extra?.dataAttrs || ''}>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
${extra?.prefix || ''}
|
||||
<span class="text-[12px] font-semibold text-gray-900 truncate">${escapeHtml(name)}</span>
|
||||
${extra?.suffix || ''}
|
||||
</div>
|
||||
${macroHtml}
|
||||
${extra?.badge || ''}
|
||||
</div>
|
||||
<div class="flex flex-col items-end shrink-0 gap-0.5">
|
||||
<span class="text-[12px] font-semibold text-gray-900 tabular-nums whitespace-nowrap">${displayAmount} ${escapeHtml(unit)}</span>
|
||||
${kcalHtml}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
@@ -245,21 +258,24 @@ function renderIngredients(recipe) {
|
||||
const effectiveDef = INGREDIENTS[effectiveId];
|
||||
const effectiveName = effectiveDef?.name || effectiveId;
|
||||
const scaledAmount = ing.amount * currentServings;
|
||||
const nutrition = nutritionForAmount(effectiveId, scaledAmount, ing.unit);
|
||||
const isSwapped = effectiveId !== origId;
|
||||
const isExpanded = expandedAlternatives.has(origId);
|
||||
const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;';
|
||||
|
||||
const toggleBtn = hasAlts
|
||||
? `<button type="button" class="rd-alt-toggle shrink-0 w-5 h-5 rounded-full ${isExpanded ? 'bg-amber-50 text-amber-500' : isSwapped ? 'bg-amber-50 text-amber-500' : 'bg-gray-100 text-gray-400 hover:bg-gray-200'} flex items-center justify-center transition-colors" data-original-id="${escapeHtml(origId)}"><i class="fas fa-shuffle text-[8px]"></i></button>`
|
||||
? `<button type="button" class="rd-alt-toggle shrink-0 w-5 h-5 flex items-center justify-center transition-colors text-gray-400 hover:text-gray-300" style="background:transparent !important; box-shadow:none !important;" data-original-id="${escapeHtml(origId)}" aria-label="Wybierz zamiennik składnika"><i class="fas fa-shuffle text-[10px]"></i></button>`
|
||||
: '';
|
||||
|
||||
const cardBorder = isSwapped ? 'border-amber-200' : 'border-gray-200';
|
||||
const cardCls = isSwapped ? 'bg-amber-50/30' : 'bg-white';
|
||||
const cardHtml = renderIngredientCard(effectiveName, scaledAmount, ing.unit, nutrition, {
|
||||
suffix: toggleBtn,
|
||||
border: cardBorder,
|
||||
cls: cardCls,
|
||||
});
|
||||
let rowHtml = `<div class="rd-ing-row rounded-xl p-2.5" style="${rowStyle}" data-original-id="${escapeHtml(origId)}">`;
|
||||
rowHtml += '<div class="flex items-center gap-2">';
|
||||
rowHtml += `<div class="flex-1 min-w-0"><span class="text-[12px] font-semibold text-gray-900 truncate block">${escapeHtml(effectiveName)}</span></div>`;
|
||||
rowHtml += '<div class="shrink-0 flex items-center gap-2">';
|
||||
rowHtml += toggleBtn;
|
||||
rowHtml += `<div class="shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg">
|
||||
<span class="text-[12px] font-semibold text-gray-900 tabular-nums">${fmtAmt(scaledAmount)}</span>
|
||||
<span class="text-[11px] text-gray-500">${escapeHtml(ing.unit)}</span>
|
||||
</div>`;
|
||||
rowHtml += '</div>';
|
||||
rowHtml += '</div>';
|
||||
|
||||
let altListHtml = '';
|
||||
if (hasAlts && isExpanded) {
|
||||
@@ -268,32 +284,46 @@ function renderIngredients(recipe) {
|
||||
const def = INGREDIENTS[altId];
|
||||
const altName = def?.name || altId;
|
||||
const isSelected = effectiveId === altId;
|
||||
const isOriginal = altId === origId;
|
||||
const altNutrition = nutritionForAmount(altId, scaledAmount, ing.unit);
|
||||
const checkbox = `
|
||||
<span class="ml-auto self-center w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center"
|
||||
style="border:1.5px solid #56534f; background:transparent;">
|
||||
${isSelected ? '<i class="fas fa-check" style="color:#9b978f; font-size:8px; line-height:1; display:block; transform:translateY(0.5px);"></i>' : ''}
|
||||
</span>`;
|
||||
const nutritionLine = altNutrition
|
||||
? `<div class="text-[10px] text-gray-400 mt-0.5 tabular-nums">${altNutrition.kcal} kcal · ${altNutrition.protein}g B · ${altNutrition.fat}g T · ${altNutrition.carbs}g W</div>`
|
||||
: '';
|
||||
|
||||
const radioDot = `<div class="w-3.5 h-3.5 rounded-full border-2 shrink-0 ${isSelected ? 'border-gray-900' : 'border-gray-300'} flex items-center justify-center">${isSelected ? '<div class="w-1.5 h-1.5 rounded-full bg-gray-900"></div>' : ''}</div>`;
|
||||
const defaultTag = isOriginal ? `<span class="text-[9px] px-1.5 py-0.5 rounded ${isSelected ? 'bg-gray-200 text-gray-600' : 'bg-gray-100 text-gray-400'} font-medium ml-1">Domyślny</span>` : '';
|
||||
|
||||
return renderIngredientCard(altName, scaledAmount, ing.unit, altNutrition, {
|
||||
cls: isSelected ? 'bg-gray-50' : 'bg-white hover:bg-gray-50 cursor-pointer',
|
||||
border: isSelected ? 'border-gray-900 ring-1 ring-gray-900' : 'border-gray-100',
|
||||
prefix: radioDot,
|
||||
badge: defaultTag,
|
||||
dataAttrs: `data-original-id="${escapeHtml(origId)}" data-alt-id="${escapeHtml(altId)}"`,
|
||||
});
|
||||
return `<button type="button" class="rd-alt-pick w-full text-left p-2.5 rounded-lg transition-all" style="background:#2f2f2d !important; background-image:none !important; border:none !important; box-shadow:none !important;" data-original-id="${escapeHtml(origId)}" data-alt-id="${escapeHtml(altId)}"><div class="flex items-center gap-3"><div class="min-w-0 flex-1"><div class="text-[11px] font-semibold text-gray-900">${escapeHtml(altName)}</div>${nutritionLine}</div>${checkbox}</div></button>`;
|
||||
});
|
||||
altListHtml = `
|
||||
<div class="mt-1.5 space-y-1.5 rd-alt-options" data-original-id="${escapeHtml(origId)}">
|
||||
<div class="mt-2 ml-1 space-y-1 rd-alt-options" data-original-id="${escapeHtml(origId)}">
|
||||
${optionCards.join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
return `<li>${cardHtml}${altListHtml}</li>`;
|
||||
rowHtml += altListHtml;
|
||||
rowHtml += '</div>';
|
||||
return `<li>${rowHtml}</li>`;
|
||||
}).join('');
|
||||
|
||||
container.innerHTML = `
|
||||
${renderNutritionSummary(recipe)}
|
||||
<ul class="space-y-2" id="rd-ingredient-list">${rows}</ul>`;
|
||||
<ul class="space-y-1.5" id="rd-ingredient-list">${rows}</ul>`;
|
||||
|
||||
container.querySelector('#rd-serv-minus')?.addEventListener('click', () => {
|
||||
if (currentServings <= 1) return;
|
||||
currentServings--;
|
||||
renderIngredients(recipe);
|
||||
updateKcalDisplay();
|
||||
});
|
||||
|
||||
container.querySelector('#rd-serv-plus')?.addEventListener('click', () => {
|
||||
if (currentServings >= 12) return;
|
||||
currentServings++;
|
||||
renderIngredients(recipe);
|
||||
updateKcalDisplay();
|
||||
});
|
||||
|
||||
container.querySelectorAll('.rd-alt-toggle').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
@@ -332,16 +362,16 @@ function renderSteps(recipe) {
|
||||
|
||||
const steps = recipe.steps || [];
|
||||
if (steps.length === 0) {
|
||||
container.innerHTML = '<p class="text-sm text-gray-500 text-center py-8">Brak kroków przygotowania.</p>';
|
||||
container.innerHTML = `<p class="text-sm text-center py-8" style="color:${RD_THEME.textMuted};">Brak kroków przygotowania.</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="space-y-5 pb-5">
|
||||
<div class="space-y-2 pb-5">
|
||||
${steps.map((step, i) => `
|
||||
<div class="flex gap-3">
|
||||
<div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">${i + 1}</div>
|
||||
<div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">${escapeHtml(step)}</p></div>
|
||||
<div class="rounded-xl p-3 flex gap-3" style="${forceBg(RD_THEME.surface)} border:none !important;">
|
||||
<div class="w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold shrink-0" style="${forceBgBorder(RD_THEME.surfaceActive, RD_THEME.borderSoft)} color:${RD_THEME.textSecondary} !important;">${i + 1}</div>
|
||||
<div class="pt-0.5"><p class="text-[13px] leading-relaxed" style="color:${RD_THEME.textSecondary};">${escapeHtml(step)}</p></div>
|
||||
</div>`).join('')}
|
||||
</div>`;
|
||||
}
|
||||
@@ -364,36 +394,12 @@ export function setupRecipeDetail() {
|
||||
}
|
||||
|
||||
document.querySelectorAll('.rd-tab-btn').forEach((b) => {
|
||||
b.classList.remove('text-gray-900', 'border-gray-900', 'font-semibold');
|
||||
b.classList.add('text-gray-500', 'border-transparent', 'font-medium');
|
||||
setTabButtonState(b, false);
|
||||
});
|
||||
btn.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
|
||||
btn.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
|
||||
setTabButtonState(btn, true);
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('rd-serv-minus')?.addEventListener('click', () => {
|
||||
if (currentServings <= 1) return;
|
||||
currentServings--;
|
||||
document.getElementById('rd-servings').textContent = currentServings;
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (recipe) {
|
||||
renderIngredients(recipe);
|
||||
updateKcalDisplay();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('rd-serv-plus')?.addEventListener('click', () => {
|
||||
if (currentServings >= 12) return;
|
||||
currentServings++;
|
||||
document.getElementById('rd-servings').textContent = currentServings;
|
||||
const recipe = RECIPES[currentRecipeId];
|
||||
if (recipe) {
|
||||
renderIngredients(recipe);
|
||||
updateKcalDisplay();
|
||||
}
|
||||
});
|
||||
|
||||
/* ── planner — delegate to MealPlanEditor ─────── */
|
||||
|
||||
document.getElementById('rd-add-to-planner-btn')?.addEventListener('click', () => {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { RECIPES } from '../data/catalog.js';
|
||||
import { RECIPES } from '../data/catalog.js?v=2';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
|
||||
function escapeHtml(s) {
|
||||
@@ -98,7 +98,7 @@ function renderGrid() {
|
||||
|
||||
export function getRecipeListHTML() {
|
||||
return `
|
||||
<div id="main-view" class="flex flex-col h-full absolute inset-0 bg-gray-50 z-10">
|
||||
<div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[#2d2e2b] z-10">
|
||||
<div class="p-4 border-b border-gray-200 mt-4 bg-white">
|
||||
<div class="flex items-center w-full border border-gray-300 rounded-lg bg-white focus-within:border-gray-400 transition-colors">
|
||||
<div class="pl-3 pr-2 text-gray-400"><i class="fas fa-search"></i></div>
|
||||
@@ -110,7 +110,7 @@ export function getRecipeListHTML() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-gray-50">
|
||||
<div class="flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[#2d2e2b]">
|
||||
<div id="recipe-grid" class="grid grid-cols-2 gap-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user