v0.3.0

.gitignore

@@ -1,3 +1,4 @@
 .idea/**
 holiday-api
 .env
+**/.DS_Store

assets/documentation.js

@@ -11,17 +11,15 @@ window.addEventListener('load', () => {
     }
 
     function generateQuery(query) {
-        initialQuery = `curl -H "accept: ${query['contentType']}" "https://holiday.bbr-dev.info/api/v1/holidays?country=${query['country']}`
+        initialQuery = `https://holiday.bbr-dev.info/api/v1/holidays?country=${query['country']}`
 
-        delete query['contentType'];
         delete query['country'];
 
         for(const key in query) {
             initialQuery += `&${key}=${query[key]}`
         }
-        initialQuery+='"';
+        document.querySelector('#query-link').href = initialQuery;
-
+        document.querySelector('#result-content').innerHTML = "curl \"" + initialQuery + "\"";
-        document.querySelector('#result-content').innerHTML = initialQuery;
     }
 
     let country = document.querySelector("#country");
@@ -36,10 +34,8 @@ window.addEventListener('load', () => {
     let dDate = document.querySelector("#dsd-date");
 
     let dStartRange = document.querySelector("#dsr-start-range");
-    let dStartRangeRequired = document.querySelector("#dsr-start-range-required");
 
     let dEndRange = document.querySelector("#dsr-end-range");
-    let dEndRangeRequired = document.querySelector("#dsr-end-range-required");
 
     let queryGenerator = document.querySelector("#query-generator");
 
@@ -53,6 +49,7 @@ window.addEventListener('load', () => {
         if(religiousHoliday.value === 'true' || religiousHoliday.value === 'false') {
             query['religiousHoliday'] = parseBoolean(religiousHoliday.value);
         }
+        console.log(dateSelector.value,  dStartRange.value,  dEndRange.value);
         switch(dateSelector.value) {
             case 'year':
                 query['year'] = dYear.value;
@@ -63,10 +60,10 @@ window.addEventListener('load', () => {
                 }
                 break;
             case 'range':
-                if(dStartRangeRequired.checked && dStartRange.value) {
+                if(dStartRange.value) {
                     query['startRange'] = dStartRange.value;
                 }
-                if(dEndRangeRequired.checked && dEndRange.value) {
+                if(dEndRange.value) {
                     query['endRange'] = dEndRange.value;
                 }
             case 'all':
@@ -79,13 +76,14 @@ window.addEventListener('load', () => {
     queryGenerator.addEventListener('change', event => {
         const query = {};
         query['country'] = country.value;
-        query['contentType'] = contentType.value;
+        query['type'] = contentType.value;
         if(stateHoliday.value === 'true' || stateHoliday.value === 'false') {
             query['stateHoliday'] = parseBoolean(stateHoliday.value);
         }
         if(religiousHoliday.value === 'true' || religiousHoliday.value === 'false') {
             query['religiousHoliday'] = parseBoolean(religiousHoliday.value);
         }
+        console.log(dateSelector.value,  dStartRange.value,  dEndRange.value);
         switch(dateSelector.value) {
             case 'year':
                 query['year'] = dYear.value;
@@ -96,10 +94,10 @@ window.addEventListener('load', () => {
                 }
                 break;
             case 'range':
-                if(dStartRangeRequired.checked && dStartRange.value) {
+                if(dStartRange.value) {
                     query['startRange'] = dStartRange.value;
                 }
-                if(dEndRangeRequired.checked && dEndRange.value) {
+                if(dEndRange.value) {
                     query['endRange'] = dEndRange.value;
                 }
             case 'all':

assets/global.css

@@ -0,0 +1,396 @@
+body {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+main {
+    background: #f3ebe6;
+    width: 640px;
+    max-width: 100%;
+    position: relative;
+}
+
+header {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 1em;
+    background: white;
+    position: sticky;
+    z-index: 10;
+    top: 0;
+    border-bottom: 1px solid #dddddd;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 1em;
+}
+
+.dialog {
+    box-sizing: border-box;
+    border: 1px solid #e0e0e0;
+    background: white;
+    margin: auto;
+    padding: 1em 0.5em;
+}
+
+
+@media screen and (min-width: 480px) {
+    .dialog {
+        padding: 1em 2em;
+    }
+}
+
+
+.background-image {
+    min-width: 100vw;
+    min-height: 100dvh;
+
+    max-width: 100vw;
+    max-height: 100dvh;
+
+    background: url("/assets/background.jpg");
+    background-position: bottom;
+    background-size: cover;
+}
+
+@font-face {
+    font-family: Quicksand;
+    src: url(fonts/Quicksand-Light.ttf);
+    font-weight: 100 200;
+}
+@font-face {
+    font-family: Quicksand;
+    src: url(fonts/Quicksand-Medium.ttf);
+    font-weight: 300 300;
+}
+@font-face {
+    font-family: Quicksand;
+    src: url(fonts/Quicksand-Regular.ttf);
+    font-weight: 400 500;
+}
+@font-face {
+    font-family: Quicksand;
+    src: url(fonts/Quicksand-Bold.ttf);
+    font-weight: 800 900;
+}
+@font-face {
+    font-family: Quicksand;
+    src: url(fonts/Quicksand-SemiBold.ttf);
+    font-weight: 600 700;
+}
+
+* {
+    font-family: Quicksand, Arial, sans-serif;
+}
+
+h1 {
+    font-size: 1.1rem;
+    margin: 0;
+}
+h1 a {
+    all: unset;
+}
+h3 {
+    margin: 0.5em 0;
+}
+
+@media screen and (min-width: 480px) {
+    h1 {
+        font-size: 1.6rem;
+    }
+}
+
+.form-field {
+    width: 100%;
+    margin-bottom: 1em;
+}
+.form-field label {
+    display: block;
+    color: #999;
+}
+.form-field input, .form-field textarea {
+    box-sizing: border-box;
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid #bbb;
+
+    font-size: 1rem;
+    outline: none;
+}
+
+.form-field .checkbox {
+    display: inline;
+}
+
+.form-field input[type=checkbox] {
+    width: inherit;
+    margin-left: 1em;
+    accent-color: #6a7579;
+}
+
+.form-field input:focus, .form-field textarea:focus {
+    color: cadetblue;
+    border-bottom: 1px solid cadetblue;
+}
+
+.form-field input:not(focus), .form-field textarea:not(focus) {
+    color: #333;
+}
+
+.form-field select {
+    all: unset;
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid #bbb;
+
+    font-size: 1rem;
+    outline: none;
+}
+
+.form-field select:focus {
+    color: cadetblue;
+    border-bottom: 1px solid cadetblue;
+}
+
+.form-field select:not(focus) {
+    color: #333;
+}
+
+.form-field:focus-within label {
+    color: cadetblue;
+}
+
+.button.primary, button.primary {
+    padding: 0.75em 1em;
+    background-color: cadetblue;
+    font-family: Quicksand, Arial, sans-serif;
+    border: none;
+    color: white;
+    font-size: 1rem;
+    margin-top: 1em;
+}
+
+.button.primary, button.primary:hover {
+    filter: contrast(140%);
+}
+
+.button.secondary, button.secondary {
+    padding: 0.75em 1em;
+    background-color: white;
+    font-family: Quicksand, Arial, sans-serif;
+    border: 1px solid cadetblue;
+    color: cadetblue;
+    font-size: 1rem;
+    margin-top: 1em;
+}
+
+.button.secondary:hover, button.secondary:hover {
+    filter: contrast(140%);
+}
+
+/*index.html*/
+
+.search-dialog {
+    position: relative;
+    width: 100%;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    border: none;
+}
+
+@media screen and (min-width: 480px) {
+    .search-dialog {
+        position: absolute;
+        top: 50%;
+        left: 10vw;
+        transform: translateY(-50%);
+        width: 380px;
+        padding-top: 40px;
+        padding-bottom: 40px;
+    }
+}
+
+/*results.html*/
+.results-dialog {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    padding-bottom: 40px;
+    border: none;
+}
+
+.results-dialog table {
+    width: 100%;
+}
+
+.results-dialog table th, .results-dialog table td {
+    text-align: left;
+}
+
+@media screen and (min-width: 480px) {
+    .results-dialog {
+        position: relative;
+        margin: auto;
+        margin-top: 1em;
+        width: 600px;
+        padding-bottom: 40px;
+    }
+}
+
+.results td {
+    padding: 0.4em 0;
+}
+
+
+/*documentation.html*/
+.documentation-dialog {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    border: none;
+}
+
+@media screen and (min-width: 480px) {
+    .documentation-dialog {
+        position: relative;
+        margin: auto;
+        margin-top: 1em;
+        width: 600px;
+    }
+}
+
+.documentation-dialog #result-content {
+    font-family: 'Courier New', Courier, monospace;
+    background: #aaa;
+    padding: 1em;
+    word-break: break-word;
+}
+
+section.radio-group {
+    margin-bottom: 0.5em;
+}
+
+section.radio-group input {
+    display: none;
+}
+
+section.radio-group div label {
+    display: inline-block;
+    padding: 0.75em 1em;
+    border: none;
+    color: black;
+    font-size: 1rem;
+    background: #ddd;
+}
+
+section.radio-group div label {
+    min-width: 3ch;
+    text-align: center;
+    font-size: 1rem;
+}
+
+
+section.radio-group div label:first-of-type {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+}
+
+section.radio-group div label:last-of-type {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+}
+
+section.radio-group div input:checked+label {
+    background: cadetblue;
+    color: white;
+}
+
+.documentation-dialog .range-selector {
+    display: flex;
+    gap: 1em;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.documentation-dialog .range-selector section {
+    flex-grow: 1;
+    width: initial;
+}
+
+.documentation-dialog .hide {
+    display: none;
+}
+
+.admin-dashboard {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    margin: 1em;
+    gap: 1em;
+    background: transparent;
+    width: calc(100% - 2em);
+}
+
+.admin-dashboard .filter-dialog {
+    margin: 0;
+    width: 100%;
+    flex-grow: 1;
+}
+
+.admin-dashboard .table-results table {
+    width: 100%;
+}
+
+
+.admin-dashboard .table-results table th, .admin-dashboard .table-results table td {
+    text-align: left;
+    margin: 0.4em 0;
+}
+
+.admin-dashboard .table-results table tr td:nth-child(3) {
+    display: flex;
+    flex-direction: row;
+}
+
+
+@media screen and (min-width: 480px) {
+    .admin-dashboard .filter-dialog {
+        width: 300px;
+        flex-grow: 0;
+    }
+}
+
+img.icon, button.icon svg {
+    height: 1.2em;
+    width: 1.2em;
+}
+button.icon, a.icon {
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    font-size: 1rem;
+
+    display: flex;
+    align-content: baseline;
+    gap: 0.3em;
+}
+
+button.icon svg, button.icon svg * {
+    fill: white;
+    color: white;
+    stroke: white;
+}
+
+dialog {
+    border: 1px solid rgba(95, 158, 160, 0.5);
+}
+dialog::backdrop {
+    background: rgba(151, 159, 159, 0.39);
+}
+dialog {
+    width: 400px;
+    max-width: 80vw;
+    box-sizing: border-box;
+}

assets/global.js

@@ -1,6 +1,16 @@
 const dialogContainerId = "#dialog-container"
 
 window.addEventListener('load', () => {
+    document.querySelectorAll(".dropdown").forEach(el => {
+        const action = el.querySelector(".dropdown-action");
+        const content = el.querySelector(".dropdown-content");
+
+        action.addEventListener('click', () => {
+            content.classList.toggle('selected');
+            content.style.marginLeft = `-${(content.offsetWidth - action.offsetWidth)}px`;
+        })
+    })
+
     // configure radio button groups
     document.querySelectorAll("section.radio-group").forEach(el => {
         const submittedInput = el.querySelector("input[type=hidden]");
@@ -23,7 +33,13 @@ window.addEventListener('load', () => {
             let response = await fetch(btn.dataset.url);
             if(response.ok) {
                 response = await response.text();
-                const container = document.querySelector(dialogContainerId);
+                let container = document.querySelector(dialogContainerId);
+                if(container == null) {
+                    const node = document.createElement('div');
+                    node.id = "dialog-container";
+                    document.querySelector("body").appendChild(node);
+                    container = document.querySelector(dialogContainerId);
+                }
                 container.innerHTML = response;
                 const dialogReference = document.querySelector(selector);
                 dialogReference?.showModal();

assets/style.css

@@ -1,297 +0,0 @@
-/* cleanup */
-
-* {
-    box-sizing: border-box;    
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    padding: 0;
-    margin: 0;
-}
-
-header {
-    padding: 1rem 2rem;
-    width: 100%;
-    background: #666;
-}
-header h1 {
-    font-size: 1.25em;
-}
-header a {
-    color: #fff;
-    text-decoration: none;
-}
-button {
-    all: unset;
-    padding: 0.25em 0.5em;
-    background: #dddddd;
-    border: solid 1px #cccccc;
-    border-radius: 0.25em;
-    font-size: 0.875em;
-}
-select {
-    all: unset;
-    color: #111;
-    padding: 0.25em 0.5em;
-    background: #dddddd;
-    border: solid 1px #cccccc;
-    border-radius: 0.25em;
-    font-size: 0.875em;
-}
-
-nav {
-    padding: 1rem 2rem;
-    width: 100%;
-    background: #f7f7f7;
-}
-nav a, nav button {
-    display: inline-block;
-    text-decoration: none;
-    color: #333;
-    font-size: 1rem;
-    border: none;
-    background: none;
-    padding: 0.5rem 1rem;
-    transition: ease-out 0.2s;
-    border-radius: 0;
-}
-nav a:hover, nav button:hover {
-    background: #e0e0e0;
-    color: #000;
-    transition: ease-out 0.2s;
-}
-nav a.selected, nav button.selected  {
-    background: #216897;
-    color: white;
-}
-
-table:not(.clean) {
-    width: 100%;
-}
-
-table th, table td {
-    text-align: left;
-}
-table {
-    border-collapse: collapse;
-}
-table thead * {
-    background: #666;
-    color: #fff;
-}
-table th, table td {
-    padding: 0.4rem 0.4rem;
-}
-
-table:not(.clean) tbody tr:nth-child(2n+1) {
-    background: #fcfcfc;
-}
-
-table:not(.clean) tbody tr:nth-child(2n) {
-    background: #f2f2f2;
-}
-
-button {
-    padding: 0.25rem 1rem;
-}
-
-.card {
-    padding: 1em;
-    background: #fff;
-    border-radius: 0.2rem;
-    border: 1px solid #bbb;
-}
-.card .card-title {
-    margin-bottom: 0.5em;
-}
-.card p {
-    margin-bottom: 0.5em;
-}
-
-form section {
-    width: fit-content;
-}
-
-/* styling */
-form section:not(.radio-group) label+:not(select) {
-    display: flex;
-}
-
-form section {
-    padding-bottom: 0.75rem;
-}
-
-form section > input {
-    width: 200px;
-    padding: 0.2em 0.5em;
-    border-radius: 0.25em;
-    border: 1px solid #aaa;
-}
-
-form section > textarea {
-    width: 200px;
-    padding: 0.2em 0.5em;
-    border: 1px solid #aaa;
-    border-radius: 0.25em;
-}
-
-form section select {
-    display: block;
-    width: 200px;
-    border: none;
-    font-size: 0.9rem;
-    padding: 0.2em 0.5em;
-    background: #ddd;
-}
-
-form section label.checkbox {
-    display: block;
-    overflow: hidden;
-    width: 200px;
-}
-form section input[type=checkbox] {
-    vertical-align: middle;
-    float: right;
-}
-
-
-section.radio-group input {
-    display: none;
-}
-
-section.radio-group div label {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    background: #ddd;
-}
-
-section.radio-group div label {
-    min-width: 64px;
-    text-align: center;
-    font-size: 0.9rem;
-}
-
-section.radio-group div label:first-of-type {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-}
-
-section.radio-group div label:last-of-type {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-}
-
-section.radio-group div input:checked+label {
-    background: #555;
-    color: white;
-}
-
-img.icon {
-    height: 1.5em;
-    width: 1.5em;
-}
-button.icon, a.icon {
-    display: flex;
-    align-content: baseline;
-    gap: 0.3em;
-}
-
-
-main {
-    display: flex;
-    flex-wrap: wrap;
-    max-width: 1280px;
-    margin: auto;
-}
-
-.container {
-    max-width: 1280px;
-    margin: auto;
-}
-
-section#search {
-    margin: 1em;
-    width: fit-content;
-}
-
-.index-page {
-    margin: 1em auto;
-    align-content: center;
-    gap: 1em;
-}
-.index-page section {
-    flex-grow: 1;
-}
-.index-page section article {
-    margin: auto;
-    width: 300px;
-    max-width: 90vw;
-}
-
-section#results {
-    margin: 1em;
-    flex-grow: 1;
-}
-
-button.clean {
-    display: inline-block;
-    padding: 0.4rem;
-    border: none;
-    background: none;
-    text-decoration: none;
-    color: #000;
-    cursor: pointer;
-}
-
-section#results a, section#results button {
-    display: inline-block;
-    padding: 0.4rem;
-    border: none;
-    background: none;
-    text-decoration: none;
-    color: #000;
-    cursor: pointer;
-}
-
-dialog {
-    position: fixed;
-    left: 50%;
-    top: 80px;
-    transform: translate(-50%, 0);
-    max-height: calc(100vh - 160px);
-    overflow-y: scroll;
-}
-section.actions {
-    padding: 0;
-}
-article.single-holiday {
-    padding-bottom: 0.5em;
-    margin-bottom: 1em;
-    border-bottom: 2px solid #a0a0a0;
-}
-
-.optional-selector {
-    border: 1px solid #666;
-    border-radius: 0.5em;
-}
-
-.optional-selector .header {
-    padding: 1em;
-    background: #666;
-    margin-bottom: 0.5em;
-    color: white;
-    border-top-left-radius: 0.5em;
-    border-top-right-radius: 0.5em;
-}
-.optional-selector > *:not(.header) {
-    margin: 0 1em;
-}
-.hide {
-    display: none;
-}
-.source-code {
-    padding: 1em;
-}
-.source-code, .source-code * {
-    background: #777;
-    color: #fff;
-    font-family: 'Courier New', Courier, monospace;
-}

handlers.go

@@ -1,12 +1,15 @@
 package main
 
 import (
+	"bytes"
+	"encoding/csv"
 	"encoding/xml"
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/google/uuid"
 	"holiday-api/holiday"
 	"net/http"
+	"strconv"
 	"time"
 )
 
@@ -26,9 +29,9 @@ func getHolidays(service holiday.HolidayService) gin.HandlerFunc {
 
 		holidays, err := service.Find(search, paging)
 		if err != nil {
-			render(c, http.StatusNotFound, ErrorResponse{Created: time.Now(), Message: "failed fetching holidays"})
+			render(c, http.StatusNotFound, ErrorResponse{Created: time.Now(), Message: "failed fetching holidays"}, nil)
 		} else {
-			render(c, http.StatusOK, mapHolidays(holidays))
+			render(c, http.StatusOK, mapHolidays(holidays), search.Type)
 		}
 	}
 }
@@ -54,6 +57,18 @@ type HolidayResponse struct {
 	Holidays []HolidayItemResponse `json:"holidays"`
 }
 
+func (h HolidayResponse) CSV() []byte {
+	buffer := bytes.Buffer{}
+	csvWriter := csv.NewWriter(&buffer)
+	csvWriter.Write([]string{"id", "date", "name", "description", "isStateHoliday", "isReligiousHoliday"})
+
+	for _, item := range h.Holidays {
+		csvWriter.Write([]string{item.Id.String(), item.Date.String(), item.Name, item.Description, strconv.FormatBool(item.IsStateHoliday), strconv.FormatBool(item.IsReligiousHoliday)})
+	}
+	csvWriter.Flush()
+	return buffer.Bytes()
+}
+
 type HolidayItemResponse struct {
 	XMLName            xml.Name     `json:"-" xml:"Holiday"`
 	Id                 uuid.UUID    `json:"id" xml:"id,attr"`

holiday/model.go

@@ -34,6 +34,7 @@ type Search struct {
 	RangeEnd         *time.Time `form:"range_end" time_format:"2006-01-02"`
 	StateHoliday     string     `form:"state_holiday,omitempty" binding:"omitempty"`
 	ReligiousHoliday string     `form:"religious_holiday,omitempty" binding:"omitempty"`
+	Type             *string    `form:"type,omitempty" binding:"omitempty"`
 }
 
 func (s Search) IsStateHoliday() *bool {

main.go

@@ -62,38 +62,26 @@ func main() {
 	setupAdminDashboard(g.Group("/admin"), holidayService, countryService, yearService)
 
 	g.GET("/", func(c *gin.Context) {
-		year := time.Now().Year()
+		search := holiday.Search{Country: "HR", Year: nil}
-		search := holiday.Search{Country: "HR", Year: &year}
 		if err := c.ShouldBindQuery(&search); err != nil {
 			c.AbortWithError(http.StatusBadRequest, err)
 			return
 		}
-		holidays, _ := holidayService.Find(search, holiday.Paging{PageSize: 100})
+
 		countries, _ := countryService.Find()
 		years, _ := yearService.Find()
-		c.HTML(http.StatusOK, "index.gohtml", gin.H{"Years": years, "Countries": countries, "Search": search, "Holidays": mapHolidays(holidays).Holidays})
+		if search.Year == nil {
+			c.HTML(http.StatusOK, "index.gohtml", gin.H{"Years": years, "Countries": countries, "Search": search})
+			return
+		}
+		holidays, _ := holidayService.Find(search, holiday.Paging{PageSize: 100})
+		c.HTML(http.StatusOK, "results.gohtml", gin.H{"Years": years, "Countries": countries, "Search": search, "Holidays": mapHolidays(holidays).Holidays})
 	})
 	g.GET("/documentation", func(c *gin.Context) {
 		countries, _ := countryService.Find()
 		years, _ := yearService.Find()
 		c.HTML(http.StatusOK, "documentation.gohtml", gin.H{"Years": years, "Countries": countries})
 	})
-	g.GET("/search", func(c *gin.Context) {
-		request := holiday.Search{}
-		if err := c.ShouldBindQuery(&request); err != nil {
-			c.AbortWithError(http.StatusBadRequest, err)
-			return
-		}
-		search := holiday.Search{Country: request.Country, Date: request.Date}
-		holidays, _ := holidayService.Find(search, holiday.Paging{PageSize: 100})
-		countries, _ := countryService.Find()
-		c.HTML(http.StatusOK, "search.gohtml", gin.H{"Countries": countries, "Search": search, "Holidays": mapHolidays(holidays).Holidays})
-	})
-	g.GET("/dialogs/check-is-a-holiday", func(c *gin.Context) {
-		countries, _ := countryService.Find()
-		c.HTML(http.StatusOK, "check-is-a-holiday.gohtml", gin.H{"Countries": countries})
-	})
-
 	log.Fatal(http.ListenAndServe(":5281", g))
 }
 
@@ -113,10 +101,11 @@ func loadTemplates(g *gin.Engine) {
 			}
 			return false
 		},
+		"importSvg": IncludeHTML,
 	})
 	g.LoadHTMLFiles(
 		"templates/index.gohtml",
-		"templates/search.gohtml",
+		"templates/results.gohtml",
 		"templates/documentation.gohtml",
 
 		"templates/admin_dashboard.gohtml",
@@ -125,13 +114,22 @@ func loadTemplates(g *gin.Engine) {
 		"templates/dialogs/add-holiday.gohtml",
 		"templates/dialogs/edit-holiday.gohtml",
 		"templates/dialogs/delete-holiday.gohtml",
-		"templates/dialogs/check-is-a-holiday.gohtml",
 
+		"templates/dialogs/add-country.gohtml",
 		"templates/dialogs/edit-country.gohtml",
 		"templates/dialogs/delete-country.gohtml",
 	)
 }
 
+func IncludeHTML(path string) template.HTML {
+	b, err := os.ReadFile(path)
+	if err != nil {
+		log.Println("includeHTML - error reading file: %v", err)
+		return ""
+	}
+	return template.HTML(string(b))
+}
+
 func setupAdminDashboard(adminDashboard *gin.RouterGroup, service holiday.HolidayService, countryService holiday.CountryService, yearService holiday.YearService) {
 	adminDashboard.Use(gin.BasicAuth(loadAuth()))
 
@@ -251,6 +249,9 @@ func setupAdminDashboard(adminDashboard *gin.RouterGroup, service holiday.Holida
 		}
 		c.Redirect(http.StatusSeeOther, "/admin/countries")
 	})
+	adminDashboard.GET("/dialogs/add-country", func(c *gin.Context) {
+		c.HTML(http.StatusOK, "add-country.gohtml", gin.H{})
+	})
 
 	adminDashboard.GET("/dialogs/add-holiday", func(c *gin.Context) {
 		countries, _ := countryService.Find()

makefile

@@ -1,7 +1,7 @@
 # scripts for building app
 # requires go 1.19+ and git installed
 
-VERSION := 0.2.3
+VERSION := 0.3.0
 
 serve:
 	go run ./...

render.go

@@ -4,12 +4,34 @@ import (
 	"github.com/gin-gonic/gin"
 )
 
-func render[T any](c *gin.Context, status int, response T) {
+type CSV interface {
-	switch c.GetHeader("accept") {
+	CSV() []byte
+}
+
+func render(c *gin.Context, status int, response any, contentType *string) {
+	value := c.GetHeader("accept")
+	if contentType != nil {
+		switch *contentType {
+		case "xml":
+			value = "text/xml"
+		case "json":
+			value = "application/json"
+		case "csv":
+			value = "text/csv"
+		}
+	}
+	switch value {
+	case "text/csv":
+		if csvResponse, ok := response.(CSV); ok {
+			c.Data(200, value+"; charset=utf-8", csvResponse.CSV())
+		} else {
+			c.Header("content-type", "application/json; charset=utf-8")
+			c.JSON(status, response)
+		}
 	case "application/xml":
 		fallthrough
 	case "text/xml":
-		c.Header("content-type", c.GetHeader("accept")+"; charset=utf-8")
+		c.Header("content-type", value+"; charset=utf-8; header=present;")
 		c.XML(status, response)
 	case "application/json":
 		fallthrough

templates/admin_dashboard.gohtml

@@ -1,81 +1,76 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
+    <title>Holiday-api | Admin</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
-    <title>Holiday-api | Admin dashboard</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/assets/style.css">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
     <script src="/assets/global.js"></script>
 </head>
 <body>
-<div id="dialog-container"></div>
+<div class="background-image" style="position: fixed">
+</div>
 <header>
-    <section class="container">
+    <h1><a href="/admin?country=HR">Holiday-api | Admin</a></h1>
-        <h1><a href="/">Holiday-api | Admin dashboard</a></h1>
+    <div style="flex-grow: 1"></div>
-    </section>
+    <a style="all: unset;" href="/admin/countries">Države</a>
 </header>
-<nav>
+<main class="admin-dashboard">
-    <section class="container">
+    <div class="filter-dialog">
-        <a class="selected" href="#">Search</a>
+        <section class="dialog filter-dialog">
-        <a href="/admin/countries">Countries</a>
+            <h2 style="margin-top: 0.5em">Pretraga</h2>
-        <button data-type="dialog" data-trigger="#create-card" data-url="/admin/dialogs/add-holiday">Add new holiday</button>
-    </section>
-</nav>
-<main>
-    <section id="search">
-        <article class="card">
             <form action="#" method="get">
-                <section>
+                <section class="form-field">
-                    <label for="country">Country:</label>
+                    <label for="country">Država:</label>
                     <select id="country" name="country">
                         {{range $entry := .Countries}}
                             <option {{if eq $.Search.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
                         {{end}}
                     </select>
                 </section>
-                <section>
+                <section class="form-field">
-                    <label for="year">Year:</label>
+                    <label for="year">Za godinu:</label>
                     <select id="year" name="year">
                         {{range $entry := .Years}}
                             <option {{if intpeq $.Search.Year $entry}}selected{{end}} value="{{$entry}}">{{$entry}}</option>
                         {{end}}
                     </select>
                 </section>
-                <section class="radio-group">
+                <section class="radio-group" style="margin-top: 0.5em;">
-                    <label>Is state holiday:</label>
+                    <label>Državni praznik:</label>
                     <div>
-                        <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">True
+                        <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">Da
-                        </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">False
+                        </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">Ne
-                        </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">All</label>
+                        </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">Svi</label>
                     </div>
-                    <input type="hidden" value="{{.Search.StateHoliday}}" name="state_holiday">
+                    <input type="hidden" value="{{.Search.StateHoliday}}" id="state-holiday" name="state_holiday">
                 </section>
                 <section class="radio-group">
-                    <label>Is religious holiday:</label>
+                    <label>Religiozni praznik:</label>
                     <div>
-                        <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">True
+                        <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">Da
-                        </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">False
+                        </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">Ne
-                        </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">All</label>
+                        </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">Svi</label>
                     </div>
-                    <input type="hidden" value="{{.Search.ReligiousHoliday}}" name="religious_holiday">
+                    <input type="hidden" value="{{.Search.ReligiousHoliday}}" id="religious-holiday" name="religious_holiday">
-                </section>
-                <section class="actions">
-                    <button class="icon primary" type="submit">
-                        <img class="icon" src="/assets/images/search.svg">
-                        <span>Search</span>
-                    </button>
                 </section>
+                <div class="button-actions">
+                    <button class="primary">Pretraži</button>
+                </div>
             </form>
-        </article>
         </section>
-    <section id="results">
+    </div>
+
+    <div style="flex-grow: 1">
+        <button style="float: right; margin-top: 0" data-type="dialog" data-trigger="#create-card" data-url="/admin/dialogs/add-holiday" class="primary">Dodaj novi praznik</button>
+        <section class="dialog table-results" style="margin: 0; margin-top: 3.5em" id="results">
             <table>
                 <thead>
                 <tr>
-                <th>Name</th>
+                    <th>Ime</th>
-                <th>Date</th>
+                    <th>Datum</th>
-                <th>State</th>
-                <th>Religious</th>
                     <th></th>
                 </tr>
                 </thead>
@@ -84,18 +79,17 @@
                 {{range $entry := .Holidays.Holidays}}
                     <tr>
                         <td>{{$entry.Name}}</td>
-                    <td>{{$entry.Date.Format "2006-01-02"}}</td>
+                        <td>{{$entry.Date.Format "02.01.2006"}}</td>
-                    <td><img class="icon" src="{{if $entry.IsStateHoliday}}/assets/images/done-v.svg{{else}}/assets/images/close-x.svg{{end}}"></td>
-                    <td><img class="icon" src="{{if $entry.IsReligiousHoliday}}/assets/images/done-v.svg{{else}}/assets/images/close-x.svg{{end}}"></td>
                         <td>
-                        <button data-type="dialog" data-trigger="#update-card" data-url="/admin/dialogs/edit-holiday?id={{$entry.Id}}" class="icon"><img class="icon" src="/assets/images/edit.svg"></button>
+                            <button data-type="dialog" data-trigger="#update-card" data-url="/admin/dialogs/edit-holiday?id={{$entry.Id}}" class="icon"><img class="icon" src="/assets/icons/edit.svg"></button>
-                        <button data-type="dialog" data-trigger="#delete-card" data-url="/admin/dialogs/delete-holiday?id={{$entry.Id}}" class="icon"><img class="icon" src="/assets/images/trash-delete.svg"></button>
+                            <button data-type="dialog" data-trigger="#delete-card" data-url="/admin/dialogs/delete-holiday?id={{$entry.Id}}" class="icon"><img class="icon" src="/assets/icons/trash-delete.svg"></button>
                         </td>
                     </tr>
                 {{end}}
                 </tbody>
             </table>
         </section>
+    </div>
 </main>
 </body>
 </html>

templates/countries.gohtml

@@ -1,60 +1,48 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
+    <title>Holiday-api | Države</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
-    <title>Holiday-api | Admin dashboard</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/assets/style.css">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
     <script src="/assets/global.js"></script>
 </head>
 <body>
-<div id="dialog-container"></div>
+<div class="background-image" style="position: fixed">
+</div>
 <header>
-    <section class="container">
+    <h1><a href="/admin?country=HR">Holiday-api | Države</a></h1>
-        <h1><a href="/">Holiday-api | Countries</a></h1>
-    </section>
 </header>
-<nav>
+<main class="admin-dashboard">
-    <section class="container">
+    <div style="width: 640px; max-width: 100%; margin: auto">
-        <a href="/admin">Search</a>
+        <button style="float: right; margin-top: 0" data-type="dialog" data-trigger="#create-card" data-url="/admin/dialogs/add-country" class="primary">Dodaj državu</button>
-        <a class="selected" href="#">Countries</a>
+        <section class="dialog table-results" style="margin: 0; margin-top: 3.5em" id="results">
-        <button data-type="dialog" data-trigger="#create-card" data-url="/admin/dialogs/add-holiday">Add new holiday</button>
-    </section>
-</nav>
-<main>
-
-    <section style="margin: 1em; flex-grow: 1">
-        <form action="/admin/countries" method="post">
             <table style="width: 100%">
                 <thead>
                 <tr>
-                    <th>Iso name</th>
+                    <th>Iso ime</th>
-                    <th>Name</th>
+                    <th>Ime</th>
                     <th></th>
                 </tr>
                 </thead>
                 <tbody>
 
-                <tr>
-                    <td><section><input minlength="2" maxlength="2" required id="iso_name" type="text" name="iso_name"></section></td>
-                    <td><section><input minlength="1" maxlength="45" required id="name" type="text" name="name"></section></td>
-                    <td><button>Create country</button></td>
-                </tr>
-
                 {{range $entry := .Countries}}
                     <tr>
                         <td>{{$entry.IsoName}}</td>
                         <td>{{$entry.Name}}</td>
                         <td>
-                            <button type="button" data-type="dialog" data-trigger="#update-card" data-url="/admin/dialogs/edit-country?id={{$entry.Id}}" class="clean icon"><img class="icon" src="/assets/images/edit.svg"></button>
+                            <button type="button" data-type="dialog" data-trigger="#update-card" data-url="/admin/dialogs/edit-country?id={{$entry.Id}}" class="clean icon"><img class="icon" src="/assets/icons/edit.svg"></button>
-                            <button type="button" data-type="dialog" data-trigger="#delete-card" data-url="/admin/dialogs/delete-country?id={{$entry.Id}}" class="clean icon"><img class="icon" src="/assets/images/trash-delete.svg"></button>
+                            <button type="button" data-type="dialog" data-trigger="#delete-card" data-url="/admin/dialogs/delete-country?id={{$entry.Id}}" class="clean icon"><img class="icon" src="/assets/icons/trash-delete.svg"></button>
                         </td>
                     </tr>
                 {{end}}
                 </tbody>
             </table>
-        </form>
         </section>
+    </div>
 </main>
 </body>
 </html>

templates/dialogs/add-country.gohtml

@@ -0,0 +1,17 @@
+<dialog class="card" id="create-card">
+    <h3 class="card-title">Dodaj državu</h3>
+    <form method="post" action="/admin/countries">
+        <section class="form-field">
+            <label for="name">Iso ime:</label>
+            <input required minlength="2" maxlength="2" id="iso_name" value="{{.Country.IsoName}}" name="iso_name" type="text">
+        </section>
+        <section class="form-field">
+            <label for="name">Ime:</label>
+            <input required minlength="1" maxlength="45" id="name" value="{{.Country.Name}}" name="name" type="text">
+        </section>
+        <section class="actions">
+            <button class="primary" type="submit">Dodaj</button>
+            <button class="secondary" type="button" onclick="closeDialog('#create-card')">Odustani</button>
+        </section>
+    </form>
+</dialog>

templates/dialogs/add-holiday.gohtml

@@ -1,35 +1,35 @@
 <dialog class="card" id="create-card">
-    <h3 class="card-title">Create holiday</h3>
+    <h3 class="card-title">Dodaj praznik</h3>
     <form method="post" action="/admin/holidays">
-        <section>
+        <section class="form-field">
-            <label for="country">Country:</label>
+            <label for="country">Država:</label>
             <select id="country" required name="country">
                 {{range $entry := .Countries}}
                     <option value="{{$entry.IsoName}}">{{$entry.Name}}</option>
                 {{end}}
             </select>
         </section>
-        <section>
+        <section class="form-field">
-            <label for="name">Name:</label>
+            <label for="name">Ime:</label>
             <input required id="name" name="name" type="text">
         </section>
-        <section>
+        <section class="form-field">
-            <label for="description">Description:</label>
+            <label for="description">Opis:</label>
             <textarea id="description" name="description"></textarea>
         </section>
-        <section>
+        <section class="form-field">
-            <label for="date">Date:</label>
+            <label for="date">Datum:</label>
             <input required id="date" name="date" type="date">
         </section>
-        <section>
+        <section class="form-field">
-            <label class="checkbox"><span>State holiday</span><input id="state_holiday" value="true" name="state_holiday" type="checkbox"></label>
+            <label class="checkbox"><span>Državni praznik</span><input id="state_holiday" value="true" name="state_holiday" type="checkbox"></label>
         </section>
-        <section>
+        <section class="form-field">
-            <label class="checkbox"><span>Religious holiday</span><input id="religious_holiday" value="true" name="religious_holiday" type="checkbox"></label>
+            <label class="checkbox"><span>Religiozni praznik</span><input id="religious_holiday" value="true" name="religious_holiday" type="checkbox"></label>
         </section>
         <section class="actions">
-            <button type="submit">Create</button>
+            <button class="primary" type="submit">Dodaj</button>
-            <button type="button" onclick="closeDialog('#create-card')">Cancel</button>
+            <button class="secondary" type="button" onclick="closeDialog('#create-card')">Odustani</button>
         </section>
     </form>
 </dialog>

templates/dialogs/check-is-a-holiday.gohtml

@@ -1,23 +0,0 @@
-<dialog class="card" data-closeable id="check-is-a-holiday">
-    <div style="display: flex;">
-        <h2 style="margin-right: 1em;">Is it a holiday?</h2>
-        <button onclick="closeDialog('#check-is-a-holiday')" class="clean icon"><img class="icon" src="/assets/images/close-x.svg"></button>
-    </div>
-    <form method="get" action="/search">
-        <section>
-            <label for="country">Country:</label>
-            <select id="country" name="country">
-                {{range $entry := .Countries}}
-                    <option value="{{$entry.IsoName}}">{{$entry.Name}}</option>
-                {{end}}
-            </select>
-        </section>
-        <section>
-            <label for="date">Date:</label>
-            <input id="date" name="date" type="date" required>
-        </section>
-        <section class="actions">
-            <button style="width: 100%;" type="submit">Check is a holiday</button>
-        </section>
-    </form>
-</dialog>

templates/dialogs/delete-country.gohtml

@@ -1,11 +1,11 @@
 
 <dialog class="card" id="delete-card">
-    <h3 class="card-title">Delete country</h3>
+    <h3 class="card-title">Obriši državu</h3>
-    <p>Are you sure you want to delete "{{.Country.Name}}"?<br>All holidays for given country will be deleted!</p>
+    <p>Jeste li sigurni da želite obrisati "{{.Country.Name}}"?<br>Svi uneseni praznici za danu državu će biti obrisani!</p>
     <form method="post" action="/admin/countries/{{.Country.Id}}/delete">
         <section class="actions">
-            <button type="submit">Delete</button>
+            <button class="primary" type="submit">Obriši</button>
-            <button type="button" onclick="closeDialog('#delete-card')">Cancel</button>
+            <button class="secondary" type="button" onclick="closeDialog('#delete-card')">Odustani</button>
         </section>
     </form>
 </dialog>

templates/dialogs/delete-holiday.gohtml

@@ -1,11 +1,11 @@
 
 <dialog class="card" id="delete-card">
-    <h3 class="card-title">Delete holiday</h3>
+    <h3 class="card-title">Ukloni praznik</h3>
-    <p>Are you sure you want to delete "{{.Holiday.Name}}"?</p>
+    <p>Jeste li sigurni da želite ukloniti praznik "{{.Holiday.Name}}"?</p>
     <form method="post" action="/admin/holidays/{{.Holiday.Id}}/delete">
         <section class="actions">
-            <button type="submit">Delete</button>
+            <button class="primary" type="submit">Obriši</button>
-            <button type="button" onclick="closeDialog('#delete-card')">Cancel</button>
+            <button class="secondary" type="button" onclick="closeDialog('#delete-card')">Odustani</button>
         </section>
     </form>
 </dialog>

templates/dialogs/edit-country.gohtml

@@ -1,18 +1,18 @@
 <dialog class="card" id="update-card">
-    <h3 class="card-title">Edit country</h3>
+    <h3 class="card-title">Ažuriraj državu</h3>
     <form method="post" action="/admin/countries">
         <input type="hidden" name="id" value="{{.Country.Id}}">
-        <section>
+        <section class="form-field">
-            <label for="name">Iso name:</label>
+            <label for="name">Iso ime:</label>
             <input required minlength="2" maxlength="2" id="iso_name" value="{{.Country.IsoName}}" name="iso_name" type="text">
         </section>
-        <section>
+        <section class="form-field">
-            <label for="name">Name:</label>
+            <label for="name">Ime:</label>
             <input required minlength="1" maxlength="45" id="name" value="{{.Country.Name}}" name="name" type="text">
         </section>
         <section class="actions">
-            <button type="submit">Update</button>
+            <button class="primary" type="submit">Ažuriraj</button>
-            <button type="button" onclick="closeDialog('#update-card')">Cancel</button>
+            <button class="secondary" type="button" onclick="closeDialog('#update-card')">Odustani</button>
         </section>
     </form>
 </dialog>

templates/dialogs/edit-holiday.gohtml

@@ -1,36 +1,36 @@
 <dialog class="card" id="update-card">
-    <h3 class="card-title">Edit holiday</h3>
+    <h3 class="card-title">Ažuriraj praznik</h3>
     <form method="post" action="/admin/holidays">
         <input type="hidden" name="id" value="{{.Holiday.Id}}">
-        <section>
+        <section class="form-field">
-            <label for="country">Country:</label>
+            <label for="country">Država:</label>
             <select id="country" required name="country">
                 {{range $entry := .Countries}}
                     <option {{if eq $.Holiday.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
                 {{end}}
             </select>
         </section>
-        <section>
+        <section class="form-field">
-            <label for="name">Name:</label>
+            <label for="name">Ime:</label>
             <input required id="name" value="{{.Holiday.Name}}" name="name" type="text">
         </section>
-        <section>
+        <section class="form-field">
-            <label for="description">Description:</label>
+            <label for="description">Opis:</label>
             <textarea id="description" name="description">{{.Holiday.Description}}</textarea>
         </section>
-        <section>
+        <section class="form-field">
-            <label for="date">Date:</label>
+            <label for="date">Datum:</label>
             <input required id="date" value="{{.Holiday.Date.Format "2006-01-02"}}" name="date" type="date">
         </section>
-        <section>
+        <section class="form-field">
-            <label class="checkbox"><span>State holiday</span><input id="state_holiday" value="true" {{if .Holiday.IsStateHoliday}}checked{{end}} name="state_holiday" type="checkbox"></label>
+            <label class="checkbox"><span>Državni praznik</span><input id="state_holiday" value="true" {{if .Holiday.IsStateHoliday}}checked{{end}} name="state_holiday" type="checkbox"></label>
         </section>
-        <section>
+        <section class="form-field">
-            <label class="checkbox"><span>Religious holiday</span><input id="religious_holiday" value="true" {{if .Holiday.IsReligiousHoliday}}checked{{end}} name="religious_holiday" type="checkbox"></label>
+            <label class="checkbox"><span>Religiozni praznik</span><input id="religious_holiday" value="true" {{if .Holiday.IsReligiousHoliday}}checked{{end}} name="religious_holiday" type="checkbox"></label>
         </section>
         <section class="actions">
-            <button type="submit">Update</button>
+            <button class="primary" type="submit">Ažuriraj</button>
-            <button type="button" onclick="closeDialog('#update-card')">Cancel</button>
+            <button class="secondary" type="button" onclick="closeDialog('#update-card')">Odustani</button>
         </section>
     </form>
 </dialog>

templates/documentation.gohtml

@@ -1,65 +1,61 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
+    <title>Holiday-api | Dokumentacija</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
-    <title>Holiday-api</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/assets/style.css">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
     <script src="/assets/global.js"></script>
     <script src="/assets/documentation.js"></script>
+
+    <style>
+        .dropdown-content a {
+            all: unset;
+            display: block;
+            padding: 0.5em 1em;
+        }
+        .dropdown-content a:hover {
+            background: rgba(95, 158, 160, 0.2);
+        }
+    </style>
 </head>
 <body>
-<div id="dialog-container"></div>
+<div class="background-image" style="position: fixed;"></div>
 <header>
-    <section class="container">
+    <h1><a href="/">Holiday-api</a> | Dokumentacija</h1>
-        <h1><a href="/">Holiday-api</a></h1>
-    </section>
 </header>
-<nav>
+<main class="dialog documentation-dialog">
-    <section class="container">
+    <section style="margin-bottom: 1em;">
-        <a href="/">Search</a>
-        <a class="selected" href="#">Documentation</a>
-        <button data-type="dialog" data-trigger="#check-is-a-holiday" data-url="/dialogs/check-is-a-holiday">Check is a holiday</button>
-    </section>
-</nav>
-<main>
         <section id="query">
             <article class="card" style="margin: 1em;">
                 <form id="query-generator">
-                <section>
+                    <input type="hidden" id="country" name="country" value="HR">
-                    <label for="country">Country</label>
+                    <section class="form-field">
-                    <select id="country" name="country">
+                        <label for="content-type">Format</label>
-                        {{range $entry := .Countries}}
-                            <option value="{{$entry.IsoName}}">{{$entry.Name}}</option>
-                        {{end}}
-                    </select>
-                </section>
-
-                <section>
-                    <label for="content-type">Content type</label>
                         <select id="content-type" name="content-type">
-                        <option value="application/json">JSON</option>
+                            <option value="json">JSON</option>
-                        <option value="application/xml">XML</option>
+                            <option value="xml">XML</option>
-                        <option value="text/csv">CSV</option>
+                            <option value="csv">CSV</option>
                         </select>
                     </section>
 
                     <article class="optional-selector">
                         <div class="header">
-                        <section>
+                            <section class="form-field">
-                            <label for="date-selector">Date selector</label>
+                                <label for="date-selector">Izbornik</label>
                                 <select data-type="section-selector" data-selector-prefix="date-selector" id="date-selector" name="date-selector">
-                                <option value="year">Select year</option>
+                                    <option value="year">Za godinu</option>
-                                <option value="date">Select date</option>
+                                    <option value="date">Za datum</option>
-                                <option value="range">Select date range</option>
+                                    <option value="range">Za raspon datuma</option>
-                                <option value="all">All</option>
+                                    <option value="all">Svi</option>
                                 </select>
                             </section>
                         </div>
-
                         <div data-section-id="date-selector-year">
-                        <section>
+                            <section class="form-field">
-                            <label for="dsy-year">Year</label>
+                                <label for="dsy-year">Godina</label>
                                 <select id="dsy-year" name="year">
                                     {{range $entry := .Years}}
                                         <option value="{{$entry}}">{{$entry}}</option>
@@ -69,47 +65,39 @@
                         </div>
 
                         <div data-section-id="date-selector-date">
-                        <section>
+                            <section class="form-field">
-                            <label for="dsd-date">Date</label>
+                                <label for="dsd-date">Datum</label>
                                 <input type="date" id="dsd-date" name="dsd-date">
                             </section>
                         </div>
 
-                    <div data-section-id="date-selector-range">
+                        <div class="range-selector" data-section-id="date-selector-range">
-                        <section>
+                            <section class="form-field">
-                            <label for="dsr-start-range">Start range</label>
+                                <label for="dsr-start-range">Početak raspona</label>
                                 <input type="date" id="dsr-start-range" name="dsr-start-range">
                             </section>
-                        <section>
+                            <section class="form-field">
-                            <label for="dsr-start-range-required">Required</label>
+                                <label for="dsr-end-range">Kraj raspona</label>
-                            <input type="checkbox" id="dsr-start-range-required" name="dsr-start-range-required">
-                        </section>
-                        <section>
-                            <label for="dsr-end-range">End range</label>
                                 <input type="date" id="dsr-end-range" name="dsr-end-range">
                             </section>
-                        <section>
-                            <label for="dsr-end-range-required">Required</label>
-                            <input type="checkbox" id="dsr-end-range-required" name="dsr-end-range-required">
-                        </section>
                         </div>
                     </article>
 
                     <section class="radio-group" style="margin-top: 0.5em;">
-                    <label>Is state holiday:</label>
+                        <label>Državni praznik:</label>
                         <div>
-                        <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">True
+                            <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">Da
-                        </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">False
+                            </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">Ne
-                        </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">All</label>
+                            </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">Svi</label>
                         </div>
                         <input type="hidden" id="state-holiday" name="state_holiday">
                     </section>
                     <section class="radio-group">
-                    <label>Is religious holiday:</label>
+                        <label>Religiozni praznik:</label>
                         <div>
-                        <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">True
+                            <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">Da
-                        </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">False
+                            </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">Ne
-                        </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">All</label>
+                            </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">Svi</label>
                         </div>
                         <input type="hidden" id="religious-holiday" name="religious_holiday">
                     </section>
@@ -117,11 +105,18 @@
             </article>
         </section>
         <section id="result" style="flex-grow: 1; margin: 1em;">
-        <h3 style="margin-bottom: 1em;">Query</h3>
+            <div style="display: flex; flex-wrap: wrap; align-items: baseline">
-        <article id="result-content" class="card source-code">
+                <h3 style="margin-bottom: 1em;">Naredba</h3>
-            Loading...
+                <div style="flex-grow: 1"></div>
+                <div>
+                    <a id="query-link" style="text-decoration: none" class="button secondary" href="." target="_blank">Dohvati</a>
+                </div>
+            </div>
+            <article id="result-content">
+                Učitavanje...
             </article>
         </section>
+    </section>
 </main>
 </body>
 </html>

templates/index.gohtml

@@ -1,95 +1,36 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Holiday-api</title>
-    <link rel="stylesheet" href="/assets/style.css">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
     <script src="/assets/global.js"></script>
 </head>
 <body>
-<div id="dialog-container"></div>
+<div class="background-image">
-<header>
+    <header>
-    <section class="container">
         <h1><a href="/">Holiday-api</a></h1>
-    </section>
+        <div style="flex-grow: 1"></div>
-</header>
+        <a style="all: unset;" href="/documentation">Api dokumentacija</a>
-<nav>
+    </header>
-    <section class="container">
+    <main class="dialog search-dialog">
-        <a class="selected" href="#">Search</a>
+        <form action="/">
-        <a href="/documentation">Documentation</a>
+            <div class="form-field">
-        <button data-type="dialog" data-trigger="#check-is-a-holiday" data-url="/dialogs/check-is-a-holiday">Check is a holiday</button>
+                <label for="year">Za godinu:</label>
-    </section>
-</nav>
-<main>
-    <section id="search">
-        <article class="card">
-            <form action="/" method="get">
-                <section>
-                    <label for="country">Country:</label>
-                    <select id="country" name="country">
-                        {{range $entry := .Countries}}
-                            <option {{if eq $.Search.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
-                        {{end}}
-                    </select>
-                </section>
-                <section>
-                    <label for="year">Year:</label>
                 <select id="year" name="year">
                     {{range $entry := .Years}}
                         <option {{if intpeq $.Search.Year $entry}}selected{{end}} value="{{$entry}}">{{$entry}}</option>
                     {{end}}
                 </select>
-                </section>
-                <section class="radio-group">
-                    <label>Is state holiday:</label>
-                    <div>
-                        <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">True
-                        </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">False
-                        </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">All</label>
             </div>
-                    <input type="hidden" value="{{.Search.StateHoliday}}" name="state_holiday">
+            <div class="button-actions">
-                </section>
+                <button class="primary">Pretraži</button>
-                <section class="radio-group">
-                    <label>Is religious holiday:</label>
-                    <div>
-                        <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">True
-                        </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">False
-                        </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">All</label>
             </div>
-                    <input type="hidden" value="{{.Search.ReligiousHoliday}}" name="religious_holiday">
-                </section>
-                <section class="actions">
-                    <button class="icon primary" type="submit">
-                        <img class="icon" src="/assets/images/search.svg">
-                        <span>Search</span>
-                    </button>
-                </section>
         </form>
-        </article>
+    </main>
-    </section>
+</div>
-    <section id="results">
-        <table>
-            <thead>
-            <tr>
-                <th>Name</th>
-                <th>Date</th>
-                <th>State</th>
-                <th>Religious</th>
-            </tr>
-            </thead>
-            <tbody>
-            {{range $entry := .Holidays}}
-                <tr>
-                    <td>{{$entry.Name}}</td>
-                    <td>{{$entry.Date.Format "2006-01-02"}}</td>
-                    <td><img class="icon" src="{{if $entry.IsStateHoliday}}/assets/images/done-v.svg{{else}}/assets/images/close-x.svg{{end}}"></td>
-                    <td><img class="icon" src="{{if $entry.IsReligiousHoliday}}/assets/images/done-v.svg{{else}}/assets/images/close-x.svg{{end}}"></td>
-                </tr>
-            {{end}}
-            </tbody>
-        </table>
-    </section>
-</main>
 </body>
 </html>

templates/results.gohtml

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Holiday-api | {{deferint $.Search.Year}}</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
+    <script src="/assets/global.js"></script>
+
+    <style>
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: #f9f9f9;
+            min-width: 160px;
+            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+            z-index: 1;
+        }
+
+        .dropdown-content.selected {
+            display: block;
+        }
+        .dropdown-content a {
+            all: unset;
+            display: block;
+            padding: 0.5em 1em;
+        }
+        .dropdown-content a:hover {
+            background: rgba(95, 158, 160, 0.2);
+        }
+    </style>
+</head>
+<body>
+<div class="background-image" style="position: fixed;"></div>
+<header>
+    <h1><a href="/">Holiday-api</a> | {{deferint $.Search.Year}}</h1>
+    <div style="flex-grow: 1"></div>
+    <a style="all: unset;" href="/documentation">Api dokumentacija</a>
+</header>
+<main class="dialog results-dialog">
+    <section style="margin-bottom: 1em;">
+        <form style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1em" action="/">
+            <div style="flex-grow: 1;"></div>
+            <div class="form-field" style="width: auto;" >
+                <label for="year">Za godinu:</label>
+                <select id="year" name="year" style="width: 150px">
+                    {{range $entry := .Years}}
+                        <option {{if intpeq $.Search.Year $entry}}selected{{end}} value="{{$entry}}">{{$entry}}</option>
+                    {{end}}
+                </select>
+            </div>
+            <div class="button-actions">
+                <button class="primary">Pretraži</button>
+            </div>
+            <div class="button-actions" style="margin-left: auto">
+                <div class="dropdown">
+                    <button type="button" class="secondary dropdown-action">Preuzmi</button>
+                    <div class="dropdown-content">
+                        <a target="_blank" href="/api/v1/holidays?country=HR&type=csv&year={{deferint $.Search.Year}}">Kao csv</a>
+                        <a target="_blank" href="/api/v1/holidays?country=HR&type=json&year={{deferint $.Search.Year}}">Kao json</a>
+                        <a target="_blank" href="/api/v1/holidays?country=HR&type=xml&year={{deferint $.Search.Year}}">Kao xml</a>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </section>
+    <table class="results">
+        <thead>
+        <tr>
+            <th>Ime</th>
+            <th>Datum</th>
+        </tr>
+        </thead>
+        <tbody>
+        {{range $entry := .Holidays}}
+            <tr>
+                <td>{{$entry.Name}}</td>
+                <td>{{$entry.Date.Format "02.01.2006."}}</td>
+            </tr>
+        {{end}}
+        </tbody>
+    </table>
+</main>
+</body>
+</html>

templates/search.gohtml

@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Holiday-api | Admin dashboard</title>
-    <link rel="stylesheet" href="/assets/style.css">
-    <script src="/assets/global.js"></script>
-</head>
-<body>
-<div id="dialog-container"></div>
-<header>
-    <section class="container">
-        <h1><a href="/">Holiday-api | {{.Search.Date.Format "2006-01-02"}}</a></h1>
-    </section>
-</header>
-<nav>
-    <section class="container">
-        <a href="/">Search</a>
-        <a href="/documentation">Documentation</a>
-        <a class="selected" href="#">For date</a>
-    </section>
-</nav>
-<main>
-    <section id="search">
-        <article class="card">
-            <h2 style="margin-right: 1em;">Is it a holiday?</h2>
-            <form method="get" action="/search">
-                <section>
-                    <label for="country">Country:</label>
-                    <select id="country" name="country">
-                        {{range $entry := .Countries}}
-                            <option {{if eq $.Search.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
-                        {{end}}
-                    </select>
-                </section>
-                <section>
-                    <label for="date">Date:</label>
-                    <input id="date" value="{{.Search.Date.Format "2006-01-02"}}" name="date" type="date" required>
-                </section>
-                <section class="actions">
-                    <button style="width: 100%;" type="submit">Check is a holiday</button>
-                </section>
-            </form>
-        </article>
-    </section>
-    <section id="results">
-        <h2 style="margin-bottom: 1em;">Results</h2>
-        {{range $entry := .Holidays}}
-            <article class="single-holiday">
-                <table class="clean">
-                    <tbody>
-                    <tr>
-                        <th>Name: </th>
-                        <td>{{$entry.Name}}</td>
-                    </tr>
-                    <tr>
-                        <th>Description: </th>
-                        <td>{{$entry.Description}}</td>
-                    </tr>
-                    <tr>
-                        <th>Is state holiday: </th>
-                        <td><img class="icon" src="{{if $entry.IsStateHoliday}}/assets/images/done-v.svg{{else}}/assets/images/close-x.svg{{end}}"></td>
-                    </tr>
-                    <tr>
-                        <th>Is religious holiday: </th>
-                        <td><img class="icon" src="{{if $entry.IsReligiousHoliday}}/assets/images/done-v.svg{{else}}/assets/images/close-x.svg{{end}}"></td>
-                    </tr>
-                    </tbody>
-                </table>
-            </article>
-        {{end}}
-    </section>
-</main>
-</body>
-</html>