Rework calendar
This commit is contained in:
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>
|
||||||
134
.idea/workspace.xml
generated
Normal file
134
.idea/workspace.xml
generated
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
<?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="">
|
||||||
|
<change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" 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/MealPlanner.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/views/MealPlanner.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="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="3585000" />
|
||||||
|
</task>
|
||||||
|
<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>
|
||||||
|
</project>
|
||||||
435
index.html
435
index.html
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<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-capable" content="yes">
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
<meta name="apple-mobile-web-app-title" content="Recipe">
|
<meta name="apple-mobile-web-app-title" content="Recipe">
|
||||||
@@ -11,173 +11,334 @@
|
|||||||
<link rel="manifest" href="./manifest.webmanifest">
|
<link rel="manifest" href="./manifest.webmanifest">
|
||||||
<link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
|
<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="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>
|
<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">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
<style>
|
<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 */
|
/* Slider styling */
|
||||||
input[type=range]::-webkit-slider-thumb {
|
input[type=range]::-webkit-slider-thumb {
|
||||||
-webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%;
|
-webkit-appearance: none;
|
||||||
background: #111827; cursor: pointer; margin-top: -8px;
|
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 {
|
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 States */
|
||||||
.ingredient-active .check-box,
|
.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 .check-icon,
|
||||||
.ingredient-active .rd-check-icon { display: block; }
|
.ingredient-active .rd-check-icon { display: block; }
|
||||||
.ingredient-active .ingredient-text,
|
.ingredient-active .ingredient-text,
|
||||||
.ingredient-active .rd-ing-text { text-decoration: line-through; color: #9ca3af; }
|
.ingredient-active .rd-ing-text { text-decoration: line-through; color: rgba(var(--text-tertiary-rgb), 0.94); }
|
||||||
.dark .ingredient-active .check-box,
|
|
||||||
.dark .ingredient-active .rd-check-box { background-color: #f0f0f0; border-color: #f0f0f0; }
|
|
||||||
|
|
||||||
/* Utilities */
|
/* Utilities */
|
||||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: 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; }
|
.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 ===== */
|
/* Shared palette overrides */
|
||||||
.dark { color-scheme: dark; }
|
.bg-white { background-color: rgba(var(--surface-rgb), 0.9) !important; }
|
||||||
|
.bg-gray-50 { background-color: rgb(var(--app-bg-rgb)) !important; }
|
||||||
/* --- Gray backgrounds --- */
|
.bg-gray-100 { background-color: rgba(var(--surface-soft-rgb), 0.92) !important; }
|
||||||
.dark .bg-white { background-color: #1a1a1a !important; }
|
.bg-gray-200 { background-color: rgba(var(--surface-strong-rgb), 0.94) !important; }
|
||||||
.dark .bg-gray-50 { background-color: #0d0d0d !important; }
|
.bg-gray-900 {
|
||||||
.dark .bg-gray-100 { background-color: #242424 !important; }
|
background: linear-gradient(180deg, rgba(var(--surface-strong-rgb), 1) 0%, rgba(var(--surface-soft-rgb), 1) 100%) !important;
|
||||||
.dark .bg-gray-200 { background-color: #2e2e2e !important; }
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.18) !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;
|
|
||||||
}
|
}
|
||||||
.dark input::placeholder, .dark textarea::placeholder {
|
.border-gray-900 { border-color: rgba(var(--accent-rgb), 0.42) !important; }
|
||||||
color: #666666 !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 --- */
|
#planner-summary-card {
|
||||||
.dark #app-toast .rounded-xl,
|
position: relative;
|
||||||
.dark #planner-toast .rounded-xl {
|
overflow: hidden;
|
||||||
background-color: #f0f0f0 !important;
|
background: linear-gradient(145deg, rgba(var(--surface-rgb), 0.98) 0%, rgba(var(--surface-soft-rgb), 0.98) 100%) !important;
|
||||||
color: #0d0d0d !important;
|
border-color: rgba(var(--warm-rgb), 0.26) !important;
|
||||||
|
box-shadow: var(--panel-shadow) !important;
|
||||||
|
}
|
||||||
|
#planner-summary-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -20% auto auto -8%;
|
||||||
|
width: 9rem;
|
||||||
|
height: 9rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(var(--warm-rgb), 0.14);
|
||||||
|
filter: blur(44px);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
#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 --- */
|
/* Cards and sheets */
|
||||||
.dark #planner-summary-card {
|
#recipe-grid > div {
|
||||||
background: #1e1a10 !important;
|
background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.94), rgba(var(--surface-soft-rgb), 0.97)) !important;
|
||||||
border-color: #4a3800 !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,
|
||||||
|
#planner-copy-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,
|
||||||
|
#planner-copy-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 --- */
|
/* Planner and common interactive surfaces */
|
||||||
.dark .bg-emerald-50 { background-color: #0a1f15 !important; }
|
#planner-open-ingredients,
|
||||||
.dark .bg-emerald-100 { background-color: #064e3b !important; }
|
.planner-pick-recipe,
|
||||||
.dark .bg-emerald-500 { background-color: #10b981 !important; }
|
.planner-copy-target,
|
||||||
.dark .bg-emerald-600 { background-color: #059669 !important; }
|
#mpe-nutrition-section > div,
|
||||||
.dark .hover\:bg-emerald-700:hover { background-color: #047857 !important; }
|
#mpe-add-area > div,
|
||||||
.dark .hover\:bg-emerald-100\/80:hover { background-color: rgba(6, 78, 59, 0.5) !important; }
|
#pv2-edit-nutrition ul {
|
||||||
.dark .border-emerald-200\/80 { border-color: #065f46 !important; }
|
box-shadow: var(--panel-shadow) !important;
|
||||||
.dark .text-emerald-800 { color: #6ee7b7 !important; }
|
}
|
||||||
.dark .text-emerald-600 { color: #34d399 !important; }
|
.planner-copy-target,
|
||||||
.dark .text-emerald-600\/80 { color: rgba(52, 211, 153, 0.85) !important; }
|
.planner-pick-recipe,
|
||||||
.dark .text-emerald-500 { color: #34d399 !important; }
|
.pv2-chip,
|
||||||
|
.pv2-cat-chip,
|
||||||
/* --- Red accents --- */
|
.mpe-slot-btn,
|
||||||
.dark .bg-red-50 { background-color: #1f0a0a !important; }
|
#filter-slot-chips button,
|
||||||
.dark .bg-red-100 { background-color: #450a0a !important; }
|
#filter-tag-chips button,
|
||||||
.dark .bg-red-500 { background-color: #ef4444 !important; }
|
#rd-tags span {
|
||||||
.dark .border-red-200\/80 { border-color: #5c2020 !important; }
|
transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||||||
.dark .border-red-100\/80 { border-color: #3b1010 !important; }
|
}
|
||||||
.dark .text-red-800 { color: #fca5a5 !important; }
|
.planner-pick-recipe:hover,
|
||||||
.dark .text-red-600 { color: #f87171 !important; }
|
.planner-copy-target:hover { transform: translateY(-1px); }
|
||||||
.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; }
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</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>
|
<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>
|
</script>
|
||||||
|
|
||||||
<div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">
|
<div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import { getRecipeListHTML, setupRecipeList } from './views/RecipeList.js?v=2';
|
import { getRecipeListHTML, setupRecipeList } from './views/RecipeList.js?v=2';
|
||||||
import { getFilterHTML, setupFilter } from './views/Filter.js?v=2';
|
import { getFilterHTML, setupFilter } from './views/Filter.js?v=2';
|
||||||
import { getRecipeDetailHTML, setupRecipeDetail } from './views/RecipeDetailV2.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=4';
|
||||||
import { getPantryHTML, refreshPantry, setupPantry } from './views/Pantry.js?v=2';
|
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=5';
|
||||||
|
|
||||||
function getAppToastHTML() {
|
function getAppToastHTML() {
|
||||||
return `
|
return `
|
||||||
@@ -52,7 +52,7 @@ function setupThemeToggle() {
|
|||||||
if (label) label.textContent = isDark ? 'Jasny' : 'Ciemny';
|
if (label) label.textContent = isDark ? 'Jasny' : 'Ciemny';
|
||||||
|
|
||||||
const meta = document.querySelector('meta[name="theme-color"]');
|
const meta = document.querySelector('meta[name="theme-color"]');
|
||||||
if (meta) meta.setAttribute('content', isDark ? '#0d0d0d' : '#ffffff');
|
if (meta) meta.setAttribute('content', isDark ? '#161513' : '#f3efe9');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
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.3rem] 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.18rem' : '0.15rem';
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -6,7 +6,6 @@ import {
|
|||||||
sameDay,
|
sameDay,
|
||||||
sameMonth,
|
sameMonth,
|
||||||
startOfDay,
|
startOfDay,
|
||||||
startOfMonth,
|
|
||||||
startOfWeekMonday,
|
startOfWeekMonday,
|
||||||
} from '../services/dateUtils.js';
|
} from '../services/dateUtils.js';
|
||||||
import {
|
import {
|
||||||
@@ -15,16 +14,23 @@ import {
|
|||||||
newPlanEntryId,
|
newPlanEntryId,
|
||||||
savePlans,
|
savePlans,
|
||||||
} from '../services/planStore.js';
|
} from '../services/planStore.js';
|
||||||
|
import { dayHasAnyMeal } from '../services/planIngredients.js';
|
||||||
import { showAppToast } from './toast.js';
|
import { showAppToast } from './toast.js';
|
||||||
|
import {
|
||||||
|
bindCalendarDayClicks,
|
||||||
|
createCalendarTopbarHTML,
|
||||||
|
createCalendarWeekdayHeaderHTML,
|
||||||
|
formatCalendarMonthYear,
|
||||||
|
formatCalendarSelectedDate,
|
||||||
|
isCalendarOnToday,
|
||||||
|
renderCalendarGrid,
|
||||||
|
syncCalendarTodayButton,
|
||||||
|
} from './mealCalendar.js?v=1';
|
||||||
|
|
||||||
function esc(s) {
|
function esc(s) {
|
||||||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
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]));
|
const slotLabel = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
|
||||||
|
|
||||||
/* ── HTML template ──────────────────────────────────── */
|
/* ── HTML template ──────────────────────────────────── */
|
||||||
@@ -47,16 +53,15 @@ export function getMealPlanEditorHTML() {
|
|||||||
</div>
|
</div>
|
||||||
<div id="mpe-body" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 py-3">
|
<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 id="mpe-cal-section" class="hidden mb-4">
|
||||||
<div class="flex items-center gap-1 mb-2">
|
${createCalendarTopbarHTML({
|
||||||
<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>
|
titleId: 'mpe-cal-title',
|
||||||
<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>
|
prevId: 'mpe-cal-prev',
|
||||||
<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>
|
todayId: 'mpe-cal-today',
|
||||||
</div>
|
nextId: 'mpe-cal-next',
|
||||||
<div class="flex items-center justify-center mb-2">
|
wrapperClass: 'mb-2 flex items-center gap-3',
|
||||||
<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>
|
${createCalendarWeekdayHeaderHTML()}
|
||||||
<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-1.5"></div>
|
||||||
<div id="mpe-cal-grid" class="grid grid-cols-7 gap-0.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>
|
<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>
|
<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 id="mpe-slot-chips" class="flex flex-wrap gap-1.5"></div>
|
||||||
@@ -142,19 +147,6 @@ export function setupMealPlanEditor() {
|
|||||||
|
|
||||||
/* ── Calendar ──────────────────────────────────── */
|
/* ── 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() {
|
function renderCal() {
|
||||||
const sec = document.getElementById('mpe-cal-section');
|
const sec = document.getElementById('mpe-cal-section');
|
||||||
if (!sec || !S.showCal) { sec?.classList.add('hidden'); return; }
|
if (!sec || !S.showCal) { sec?.classList.add('hidden'); return; }
|
||||||
@@ -165,34 +157,34 @@ export function setupMealPlanEditor() {
|
|||||||
const icon = document.getElementById('mpe-cal-toggle-icon');
|
const icon = document.getElementById('mpe-cal-toggle-icon');
|
||||||
if (!grid || !title) return;
|
if (!grid || !title) return;
|
||||||
const today = startOfDay(new Date());
|
const today = startOfDay(new Date());
|
||||||
|
const plans = loadPlans();
|
||||||
|
const mode = S.calExpanded ? 'month' : 'week';
|
||||||
|
|
||||||
if (S.calExpanded) {
|
title.textContent = S.calExpanded ? formatCalendarMonthYear(S.calDate) : formatCalendarSelectedDate(S.date);
|
||||||
const ms = startOfMonth(S.calDate);
|
if (icon) {
|
||||||
title.textContent = `${MONTHS_LONG[ms.getMonth()]} ${ms.getFullYear()}`;
|
icon.className = S.calExpanded ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
|
||||||
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));
|
|
||||||
}
|
}
|
||||||
|
syncCalendarTodayButton(
|
||||||
|
todayBtn,
|
||||||
|
isCalendarOnToday(mode, startOfWeekMonday(S.calDate), S.calDate, S.date),
|
||||||
|
);
|
||||||
|
|
||||||
grid.querySelectorAll('.mpe-cal-day').forEach((btn) => {
|
renderCalendarGrid({
|
||||||
btn.addEventListener('click', () => {
|
gridEl: grid,
|
||||||
S.date = new Date(Number(btn.dataset.ts));
|
mode,
|
||||||
S.calDate = new Date(S.date);
|
anchorDate: S.calDate,
|
||||||
renderCal();
|
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),
|
||||||
|
};
|
||||||
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -475,6 +467,11 @@ export function setupMealPlanEditor() {
|
|||||||
document.getElementById('mpe-close-btn')?.addEventListener('click', closeEditor);
|
document.getElementById('mpe-close-btn')?.addEventListener('click', closeEditor);
|
||||||
overlay?.addEventListener('click', (e) => { if (e.target === overlay) closeEditor(); });
|
overlay?.addEventListener('click', (e) => { if (e.target === overlay) closeEditor(); });
|
||||||
document.getElementById('mpe-confirm-btn')?.addEventListener('click', handleConfirm);
|
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', () => {
|
document.getElementById('mpe-cal-prev')?.addEventListener('click', () => {
|
||||||
if (!S.showCal) return;
|
if (!S.showCal) return;
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import {
|
|||||||
addDays,
|
addDays,
|
||||||
addMonths,
|
addMonths,
|
||||||
addWeeks,
|
addWeeks,
|
||||||
sameDay,
|
|
||||||
sameMonth,
|
sameMonth,
|
||||||
startOfDay,
|
startOfDay,
|
||||||
startOfMonth,
|
startOfMonth,
|
||||||
@@ -26,12 +25,20 @@ import {
|
|||||||
newPlanEntryId,
|
newPlanEntryId,
|
||||||
savePlans,
|
savePlans,
|
||||||
} from '../services/planStore.js';
|
} 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 = [
|
const WEEKDAYS_LONG = [
|
||||||
'Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota',
|
'Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota',
|
||||||
];
|
];
|
||||||
@@ -44,58 +51,34 @@ function recipesForSlot(slotId) {
|
|||||||
return Object.values(RECIPES).filter((r) => r.allowedSlots.includes(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) {
|
function syncTodayButton(mode, weekStart, monthAnchor, selected) {
|
||||||
const btn = document.getElementById('cal-go-today');
|
syncCalendarTodayButton(
|
||||||
if (!btn) return;
|
document.getElementById('cal-go-today'),
|
||||||
const onToday = isCalendarOnToday(mode, weekStart, monthAnchor, selected);
|
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getMealPlannerHTML() {
|
export function getMealPlannerHTML() {
|
||||||
return `
|
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 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="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">
|
${createCalendarTopbarHTML({
|
||||||
<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">
|
titleId: 'cal-period-label',
|
||||||
<i class="fas fa-chevron-left text-xs" aria-hidden="true"></i>
|
prevId: 'cal-prev',
|
||||||
</button>
|
todayId: 'cal-go-today',
|
||||||
<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>
|
nextId: 'cal-next',
|
||||||
<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>
|
<div id="calendar-swipe-zone" class="overflow-x-hidden" style="touch-action: none">
|
||||||
</button>
|
<div id="calendar-week-wrap" class="px-3 overflow-x-hidden" style="overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.75rem">
|
||||||
</div>
|
${createCalendarWeekdayHeaderHTML()}
|
||||||
<div class="px-3 pb-2 flex items-center justify-center">
|
<div id="calendar-week-grid" class="grid grid-cols-7 gap-1.5 max-w-full overflow-x-hidden"></div>
|
||||||
<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>
|
</div>
|
||||||
<div id="calendar-month-wrap" class="px-3 pb-1" style="overflow: hidden; max-height: 0; opacity: 0">
|
<div id="calendar-month-wrap" class="px-3" style="overflow: hidden; max-height: 0; opacity: 0; padding-bottom: 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">
|
${createCalendarWeekdayHeaderHTML()}
|
||||||
${WEEKDAYS_SHORT.map((d) => `<div>${d}</div>`).join('')}
|
<div id="calendar-month-grid" class="grid grid-cols-7 gap-1.5"></div>
|
||||||
</div>
|
|
||||||
<div id="calendar-month-grid" class="grid grid-cols-7 gap-0.5"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="calendar-drag-handle" class="flex items-center justify-center pb-2 pt-0.5">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
@@ -199,105 +182,23 @@ export function getMealPlannerHTML() {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderWeekGrid(weekStart, selected, plans) {
|
function updatePeriodLabel(mode, weekStart, monthAnchor, selected) {
|
||||||
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) {
|
|
||||||
const el = document.getElementById('cal-period-label');
|
const el = document.getElementById('cal-period-label');
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
|
|
||||||
if (mode === 'week') {
|
if (mode === 'week') {
|
||||||
const end = addDays(weekStart, 6);
|
el.textContent = formatCalendarSelectedDate(selected);
|
||||||
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}`;
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
const m = monthAnchor.getMonth();
|
el.textContent = formatCalendarMonthYear(monthAnchor);
|
||||||
const y = monthAnchor.getFullYear();
|
|
||||||
const monthLong = [
|
|
||||||
'Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec',
|
|
||||||
'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień',
|
|
||||||
][m];
|
|
||||||
el.textContent = `${monthLong} ${y}`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function syncModeToggle(mode) {
|
function syncModeToggle(mode) {
|
||||||
const weekWrap = document.getElementById('calendar-week-wrap');
|
syncCollapsibleCalendarMode({
|
||||||
const monthWrap = document.getElementById('calendar-month-wrap');
|
mode,
|
||||||
const handleIcon = document.getElementById('calendar-handle-icon');
|
weekWrapEl: document.getElementById('calendar-week-wrap'),
|
||||||
|
monthWrapEl: document.getElementById('calendar-month-wrap'),
|
||||||
if (weekWrap) {
|
handleEl: document.getElementById('calendar-handle-icon'),
|
||||||
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();
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -448,7 +349,7 @@ function renderDayContent(state) {
|
|||||||
const heading = document.getElementById('planner-day-heading');
|
const heading = document.getElementById('planner-day-heading');
|
||||||
if (heading) {
|
if (heading) {
|
||||||
const wd = WEEKDAYS_LONG[sel.getDay()];
|
const wd = WEEKDAYS_LONG[sel.getDay()];
|
||||||
heading.textContent = `${wd}, ${sel.getDate()} ${MONTHS_SHORT[sel.getMonth()]}`;
|
heading.textContent = `${wd}, ${sel.getDate()} ${CALENDAR_MONTHS_SHORT[sel.getMonth()]}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const dayPlan = getDayPlan(state.plans, sel);
|
const dayPlan = getDayPlan(state.plans, sel);
|
||||||
@@ -753,7 +654,7 @@ function renderIngredientsSheet(state) {
|
|||||||
|
|
||||||
if (titleEl) {
|
if (titleEl) {
|
||||||
const wd = WEEKDAYS_LONG[state.selected.getDay()];
|
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 (subEl) subEl.textContent = 'Porównanie potrzeb z zapasami w spiżarni.';
|
||||||
|
|
||||||
@@ -845,7 +746,7 @@ function renderIngredientsSheet(state) {
|
|||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
${upcoming.map((day) => {
|
${upcoming.map((day) => {
|
||||||
const wd = WEEKDAYS_LONG[day.date.getDay()];
|
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);
|
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-amber-50/50 p-3">
|
||||||
<p class="text-[12px] font-semibold text-amber-900">
|
<p class="text-[12px] font-semibold text-amber-900">
|
||||||
@@ -912,10 +813,21 @@ export function setupMealPlanner() {
|
|||||||
|
|
||||||
const rerender = () => {
|
const rerender = () => {
|
||||||
syncModeToggle(state.mode);
|
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);
|
syncTodayButton(state.mode, state.weekStart, state.monthAnchor, state.selected);
|
||||||
renderWeekGrid(state.weekStart, state.selected, state.plans);
|
renderCollapsibleCalendar({
|
||||||
renderMonthGrid(state.monthAnchor, state.selected, state.plans);
|
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);
|
renderDayContent(state);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -924,8 +836,14 @@ export function setupMealPlanner() {
|
|||||||
rerender();
|
rerender();
|
||||||
};
|
};
|
||||||
|
|
||||||
bindDayClicks(weekGrid?.parentElement, state, rerender);
|
bindCalendarDayClicks(weekGrid, (date) => {
|
||||||
bindDayClicks(monthGrid?.parentElement, state, rerender);
|
state.selected = date;
|
||||||
|
rerender();
|
||||||
|
});
|
||||||
|
bindCalendarDayClicks(monthGrid, (date) => {
|
||||||
|
state.selected = date;
|
||||||
|
rerender();
|
||||||
|
});
|
||||||
|
|
||||||
document.getElementById('cal-prev')?.addEventListener('click', () => {
|
document.getElementById('cal-prev')?.addEventListener('click', () => {
|
||||||
if (state.mode === 'week') {
|
if (state.mode === 'week') {
|
||||||
@@ -1117,7 +1035,7 @@ export function setupMealPlanner() {
|
|||||||
}
|
}
|
||||||
copyList.innerHTML = days.map((d) => {
|
copyList.innerHTML = days.map((d) => {
|
||||||
const wd = WEEKDAYS_LONG[d.getDay()];
|
const wd = WEEKDAYS_LONG[d.getDay()];
|
||||||
const label = `${wd}, ${d.getDate()} ${MONTHS_SHORT[d.getMonth()]}`;
|
const label = `${wd}, ${d.getDate()} ${CALENDAR_MONTHS_SHORT[d.getMonth()]}`;
|
||||||
const hasMeals = dayHasAnyMeal(state.plans, d);
|
const hasMeals = dayHasAnyMeal(state.plans, d);
|
||||||
const badge = hasMeals ? '<span class="text-[10px] text-amber-600 font-semibold">ma posiłki</span>' : '';
|
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()}">
|
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()}">
|
||||||
|
|||||||
Reference in New Issue
Block a user