finished vacation planner

Author: gluek

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.6.0
+
+### Features
+
+- New vacation days planner
+
 ## v0.5.8
 
 ### Bugfix

README.md

@@ -10,15 +10,15 @@ Tech Stack: Go, templ, htmx, SQLite, Tailwind+DaisyUI
 ### Task
 
 Using task to ease testing/building
-https://taskfile.dev/
+<https://taskfile.dev/>
 
 ``` bash
 go install github.com/go-task/task/v3/cmd/task@latest
 ```
 
 ### Templ
 
-https://templ.guide/
+<https://templ.guide/>
 
 ``` bash
 go install github.com/a-h/templ/cmd/templ@latest
@@ -28,25 +28,31 @@ Go templating package to generate HTML
 
 ### Tailwind CSS
 
-https://tailwindcss.com/docs/installation
+<https://tailwindcss.com/docs/installation>
 
 Provides CSS classes to format HTML elements
 
 ### DaisyUI
 
-https://daisyui.com/docs/install/
+<https://daisyui.com/docs/install/>
 
 Component library for Tailwind CSS (Buttons, Menus, ...)
 
 ### HTMX
 
-https://htmx.org/
+<https://htmx.org/>
 
 Provides means to create dynamic HTML webites with minimal javascript usage
 
+### Apache ECharts
+
+<https://echarts.apache.org/>
+
+Library for charts
+
 ## Go-Winres
 
-https://github.com/tc-hib/go-winres
+<https://github.com/tc-hib/go-winres>
 
 ``` bash
 go install github.com/tc-hib/go-winres@latest
@@ -57,10 +63,10 @@ Manifest/Icons for Windows
 ## Resources
 
 Go CRUD Tutorial:
-https://www.honeybadger.io/blog/how-to-create-crud-application-with-golang-and-mysql/
+<https://www.honeybadger.io/blog/how-to-create-crud-application-with-golang-and-mysql/>
 
 Go Web Examples:
-https://gowebexamples.com/
+<https://gowebexamples.com/>
 
 SQL Tutorial:
-https://www.w3schools.com/sql/default.asp
+<https://www.w3schools.com/sql/default.asp>

internal/assets/css/input.css

@@ -937,6 +937,57 @@ html {
   content: var(--tw-content);
 }
 
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--rounded-box, 1rem);
+}
+
+.card:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.card figure {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card.image-full {
+  display: grid;
+}
+
+.card.image-full:before {
+  position: relative;
+  content: "";
+  z-index: 10;
+  border-radius: var(--rounded-box, 1rem);
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
+  opacity: 0.75;
+}
+
+.card.image-full:before,
+    .card.image-full > * {
+  grid-column-start: 1;
+  grid-row-start: 1;
+}
+
+.card.image-full > figure img {
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.card.image-full > .card-body {
+  position: relative;
+  z-index: 20;
+  --tw-text-opacity: 1;
+  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
+}
+
 .checkbox {
   flex-shrink: 0;
   --chkbg: var(--fallback-bc,oklch(var(--bc)/1));
@@ -1664,6 +1715,44 @@ html {
   }
 }
 
+.card :where(figure:first-child) {
+  overflow: hidden;
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+  border-end-start-radius: unset;
+  border-end-end-radius: unset;
+}
+
+.card :where(figure:last-child) {
+  overflow: hidden;
+  border-start-start-radius: unset;
+  border-start-end-radius: unset;
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
+}
+
+.card:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.card.bordered {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
+}
+
+.card.compact .card-body {
+  padding: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.card.image-full :where(figure) {
+  overflow: hidden;
+  border-radius: inherit;
+}
+
 .checkbox:focus {
   box-shadow: none;
 }
@@ -2420,6 +2509,26 @@ html {
   margin-right: auto;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.ml-\[30px\] {
+  margin-left: 30px;
+}
+
+.mr-\[30px\] {
+  margin-right: 30px;
+}
+
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.mt-\[22px\] {
+  margin-top: 22px;
+}
+
 .flex {
   display: flex;
 }
@@ -2460,6 +2569,10 @@ html {
   height: 1.25rem;
 }
 
+.h-\[300px\] {
+  height: 300px;
+}
+
 .h-\[400px\] {
   height: 400px;
 }
@@ -2480,8 +2593,8 @@ html {
   width: 16rem;
 }
 
-.w-\[1400px\] {
-  width: 1400px;
+.w-\[1200px\] {
+  width: 1200px;
 }
 
 .w-full {
@@ -2545,6 +2658,10 @@ html {
   gap: 0.25rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -2594,6 +2711,10 @@ html {
   fill: currentColor;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -2621,6 +2742,11 @@ html {
   font-weight: 700;
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .text-error {
   --tw-text-opacity: 1;
   color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
@@ -2646,6 +2772,15 @@ input {
   color-scheme: dark;
 }
 
+.prevent-select {
+  -webkit-user-select: none;
+  /* Safari */
+  /* IE 10 and IE 11 */
+  -moz-user-select: none;
+       user-select: none;
+  /* Standard syntax */
+}
+
 @media (min-width: 640px) {
   .sm\:card {
     position: relative;

internal/assets/css/tailwind.css

@@ -4,4 +4,10 @@
 
 input {
     color-scheme: dark;
+}
+
+.prevent-select {
+	-webkit-user-select: none; /* Safari */
+	-ms-user-select: none; /* IE 10 and IE 11 */
+	user-select: none; /* Standard syntax */
 }

internal/components/components.templ

@@ -691,9 +691,40 @@ templ Quickbar() {
 }
 
 
-templ PlannerPage(entries []database.PlannerEntry) {
+templ PlannerPage(activeYear time.Time, plannedVacation int, entries []database.PlannerEntry) {
 	<div id="vacation-planner" class="flex justify-center gap-5 py-5">
 		@plannerChart(entries)
-		<div id="plannerchart" class="h-[400px] w-[1400px]"></div>
+		<div class="card bg-base-300 p-2 shadow">
+			<form class="mt-[22px] flex justify-center" hx-post="/api/vacation" hx-target="#vacation-planner" hx-select="#vacation-planner" hx-swap="outerHTML">
+				<select
+					class="select rounded bg-neutral text-xl text-neutral-content"
+					id="yearPlanner"
+					name="year"
+					hx-post="/api/vacation"
+					hx-target="#vacation-planner"
+					hx-select="#vacation-planner"
+					hx-swap="outerHTML"
+					hx-trigger="change delay:100ms"
+					hx-preserve="true"
+				>
+					for _, year := range yearSelectList() {
+						if year == activeYear.Year() {
+							<option selected>{ strconv.Itoa(year) }</option>
+						} else {
+							<option>{ strconv.Itoa(year) }</option>
+						}
+					}
+				</select>
+			</form>
+			<div class="prevent-select mb-2 ml-[30px] mr-[30px] mt-5 flex flex-row justify-center gap-2">
+				<p id="planner-counter" class="p-1 font-bold" >Planned Vacation: { strconv.Itoa(plannedVacation) }</p>
+				<p class="grow"></p>
+				<p class="p-1 text-black" style="background-color: #d5d8dc;">Weekday</p>
+				<p class="p-1 text-black" style="background-color: #808b96;">Weekend</p>
+				<p class="p-1 text-black" style="background-color: #2ecc71;">Vacation</p>
+				<p class="p-1 text-black" style="background-color: #f1c40f;">Holiday</p>
+			</div>
+			<div id="plannerchart" class="h-[300px] w-[1200px]"></div>
+		</div>
 	</div>
 }