Redesigned admin pages

This commit is contained in:
Borna Rajković 2024-01-01 12:29:59 +01:00
parent 6163c0a04f
commit 9bdb5dd129
15 changed files with 527 additions and 272 deletions

View File

@ -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('#result-content').innerHTML = initialQuery;
document.querySelector('#query-link').href = initialQuery;
document.querySelector('#result-content').innerHTML = "curl \"" + 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':

View File

@ -2,7 +2,6 @@ body {
border: 0;
margin: 0;
padding: 0;
font-size: 20px;
}
main {
@ -12,20 +11,44 @@ main {
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: 16px 32px;
padding: 1em 0.5em;
}
@media screen and (min-width: 480px) {
.dialog {
padding: 1em 2em;
}
}
.background-image {
min-width: 100vw;
min-height: 100vh;
min-height: 100dvh;
max-width: 100vw;
max-height: 100vh;
max-height: 100dvh;
background: url("/assets/background.jpg");
background-position: bottom;
@ -63,50 +86,65 @@ main {
}
h1 {
font-size: 2rem;
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: 16px;
margin-bottom: 1em;
}
.form-field label {
display: block;
color: #999;
}
.form-field input {
width: 300px;
.form-field input, .form-field textarea {
width: 100%;
border: none;
border-bottom: 1px solid #bbb;
font-size: 20px;
font-size: 1rem;
outline: none;
}
.form-field input:focus {
.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 input:not(focus), .form-field textarea:not(focus) {
color: #333;
}
.form-field label {
display: block;
color: #999;
}
.form-field select {
all: unset;
width: 100%;
border: none;
border-bottom: 1px solid #bbb;
font-size: 20px;
font-size: 1rem;
outline: none;
}
@ -123,29 +161,28 @@ h1 a {
color: cadetblue;
}
.button.secondary, button.primary {
padding: 12px 16px;
.button.primary, button.primary {
padding: 0.75em 1em;
background-color: cadetblue;
font-family: Quicksand, Arial, sans-serif;
border: none;
color: white;
font-size: 1.2rem;
margin-top: 16px;
font-size: 1rem;
margin-top: 1em;
}
.button.secondary, button.primary:hover {
.button.primary, button.primary:hover {
filter: contrast(140%);
}
.button.secondary, button.secondary {
padding: 12px 16px;
padding: 0.75em 1em;
background-color: white;
font-family: Quicksand, Arial, sans-serif;
border: 1px solid cadetblue;
color: cadetblue;
font-size: 1.2rem;
margin-top: 16px;
font-size: 1rem;
margin-top: 1em;
}
.button.secondary:hover, button.secondary:hover {
@ -155,11 +192,11 @@ h1 a {
/*index.html*/
.search-dialog {
position: absolute;
top: 0;
left: 0;
position: relative;
width: 100%;
padding-top: 40px;
padding-bottom: 40px;
border: none;
}
@media screen and (min-width: 480px) {
@ -169,6 +206,7 @@ h1 a {
left: 10vw;
transform: translateY(-50%);
width: 380px;
padding-top: 40px;
padding-bottom: 40px;
}
}
@ -179,6 +217,7 @@ h1 a {
width: 100%;
max-width: 100%;
padding-bottom: 40px;
border: none;
}
.results-dialog table {
@ -193,6 +232,7 @@ h1 a {
.results-dialog {
position: relative;
margin: auto;
margin-top: 1em;
width: 600px;
padding-bottom: 40px;
}
@ -200,4 +240,155 @@ h1 a {
.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: 100vh;
}

View File

@ -5,11 +5,8 @@ window.addEventListener('load', () => {
const action = el.querySelector(".dropdown-action");
const content = el.querySelector(".dropdown-content");
console.log(action, content, el.offsetWidth, content.offsetWidth);
action.addEventListener('click', () => {
content.classList.toggle('selected');
console.log(content.offsetWidth - action.offsetWidth);
content.style.marginLeft = `-${(content.offsetWidth - action.offsetWidth)}px`;
})
})

View File

@ -133,6 +133,7 @@ func loadTemplates(g *gin.Engine) {
"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",
)
@ -267,6 +268,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()

View File

@ -1,101 +1,95 @@
<!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 | Admin dashboard</title>
<link rel="stylesheet" href="/assets/style.css">
<title>Holiday-api | Admin</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>
</head>
<body>
<div id="dialog-container"></div>
<div class="background-image" style="position: fixed">
</div>
<header>
<section class="container">
<h1><a href="/">Holiday-api | Admin dashboard</a></h1>
</section>
<h1><a href="/admin?country=HR">Holiday-api | Admin</a></h1>
<div style="flex-grow: 1"></div>
<a style="all: unset;" href="/admin/countries">Države</a>
</header>
<nav>
<section class="container">
<a class="selected" href="#">Search</a>
<a href="/admin/countries">Countries</a>
<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">
<main class="admin-dashboard">
<div class="filter-dialog">
<section class="dialog filter-dialog">
<h2 style="margin-top: 0.5em">Pretraga</h2>
<form action="#" method="get">
<section>
<label for="country">Country:</label>
<section class="form-field">
<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>
<label for="year">Year:</label>
<section class="form-field">
<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">
<label>Is state holiday:</label>
<section class="radio-group" style="margin-top: 0.5em;">
<label>Državni praznik:</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>
<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">Ne
</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
</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>
<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">Ne
</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">
</section>
<section class="actions">
<button class="icon primary" type="submit">
{{ importSvg "/assets/icons/search.svg"}}
<span>Search</span>
</button>
<input type="hidden" value="{{.Search.ReligiousHoliday}}" id="religious-holiday" name="religious_holiday">
</section>
<div class="button-actions">
<button class="primary">Pretraži</button>
</div>
</form>
</article>
</section>
<section id="results">
<table>
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>State</th>
<th>Religious</th>
<th></th>
</tr>
</thead>
<tbody>
</section>
</div>
{{range $entry := .Holidays.Holidays}}
<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>
<td>{{$entry.Name}}</td>
<td>{{$entry.Date.Format "2006-01-02"}}</td>
<td><img class="icon" src="{{if $entry.IsStateHoliday}}/assets/icons/done-v.svg{{else}}/assets/icons/close-x.svg{{end}}"></td>
<td><img class="icon" src="{{if $entry.IsReligiousHoliday}}/assets/icons/done-v.svg{{else}}/assets/icons/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/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/icons/trash-delete.svg"></button>
</td>
<th>Ime</th>
<th>Datum</th>
<th></th>
</tr>
{{end}}
</tbody>
</table>
</section>
</thead>
<tbody>
{{range $entry := .Holidays.Holidays}}
<tr>
<td>{{$entry.Name}}</td>
<td>{{$entry.Date.Format "02.01.2006"}}</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/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/icons/trash-delete.svg"></button>
</td>
</tr>
{{end}}
</tbody>
</table>
</section>
</div>
</main>
</body>
</html>

View File

@ -1,3 +1,4 @@
<!--
<!DOCTYPE html>
<html lang="en">
<head>
@ -57,4 +58,54 @@
</section>
</main>
</body>
</html>
-->
<!DOCTYPE html>
<html>
<head>
<title>Holiday-api | Države</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>
</head>
<body>
<div class="background-image" style="position: fixed">
</div>
<header>
<h1><a href="/admin?country=HR">Holiday-api | Države</a></h1>
</header>
<main class="admin-dashboard">
<div style="width: 640px; max-width: 100%; margin: auto">
<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>
<section class="dialog table-results" style="margin: 0; margin-top: 3.5em" id="results">
<table style="width: 100%">
<thead>
<tr>
<th>Iso ime</th>
<th>Ime</th>
<th></th>
</tr>
</thead>
<tbody>
{{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/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/icons/trash-delete.svg"></button>
</td>
</tr>
{{end}}
</tbody>
</table>
</section>
</div>
</main>
</body>
</html>

View File

@ -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>

View File

@ -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>
<label for="country">Country:</label>
<section class="form-field">
<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>
<label for="name">Name:</label>
<section class="form-field">
<label for="name">Ime:</label>
<input required id="name" name="name" type="text">
</section>
<section>
<label for="description">Description:</label>
<section class="form-field">
<label for="description">Opis:</label>
<textarea id="description" name="description"></textarea>
</section>
<section>
<label for="date">Date:</label>
<section class="form-field">
<label for="date">Datum:</label>
<input required id="date" name="date" type="date">
</section>
<section>
<label class="checkbox"><span>State holiday</span><input id="state_holiday" value="true" name="state_holiday" type="checkbox"></label>
<section class="form-field">
<label class="checkbox"><span>Državni praznik</span><input id="state_holiday" value="true" name="state_holiday" type="checkbox"></label>
</section>
<section>
<label class="checkbox"><span>Religious holiday</span><input id="religious_holiday" value="true" name="religious_holiday" type="checkbox"></label>
<section class="form-field">
<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 type="button" onclick="closeDialog('#create-card')">Cancel</button>
<button class="primary" type="submit">Dodaj</button>
<button class="secondary" type="button" onclick="closeDialog('#create-card')">Odustani</button>
</section>
</form>
</dialog>

View File

@ -1,11 +1,11 @@
<dialog class="card" id="delete-card">
<h3 class="card-title">Delete country</h3>
<p>Are you sure you want to delete "{{.Country.Name}}"?<br>All holidays for given country will be deleted!</p>
<h3 class="card-title">Obriši državu</h3>
<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 type="button" onclick="closeDialog('#delete-card')">Cancel</button>
<button class="primary" type="submit">Obriši</button>
<button class="secondary" type="button" onclick="closeDialog('#delete-card')">Odustani</button>
</section>
</form>
</dialog>

View File

@ -1,11 +1,11 @@
<dialog class="card" id="delete-card">
<h3 class="card-title">Delete holiday</h3>
<p>Are you sure you want to delete "{{.Holiday.Name}}"?</p>
<h3 class="card-title">Ukloni praznik</h3>
<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 type="button" onclick="closeDialog('#delete-card')">Cancel</button>
<button class="primary" type="submit">Obriši</button>
<button class="secondary" type="button" onclick="closeDialog('#delete-card')">Odustani</button>
</section>
</form>
</dialog>

View File

@ -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>
<label for="name">Iso name:</label>
<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>
<label for="name">Name:</label>
<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 type="submit">Update</button>
<button type="button" onclick="closeDialog('#update-card')">Cancel</button>
<button class="primary" type="submit">Ažuriraj</button>
<button class="secondary" type="button" onclick="closeDialog('#update-card')">Odustani</button>
</section>
</form>
</dialog>

View File

@ -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>
<label for="country">Country:</label>
<section class="form-field">
<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>
<label for="name">Name:</label>
<section class="form-field">
<label for="name">Ime:</label>
<input required id="name" value="{{.Holiday.Name}}" name="name" type="text">
</section>
<section>
<label for="description">Description:</label>
<section class="form-field">
<label for="description">Opis:</label>
<textarea id="description" name="description">{{.Holiday.Description}}</textarea>
</section>
<section>
<label for="date">Date:</label>
<section class="form-field">
<label for="date">Datum:</label>
<input required id="date" value="{{.Holiday.Date.Format "2006-01-02"}}" name="date" type="date">
</section>
<section>
<label class="checkbox"><span>State holiday</span><input id="state_holiday" value="true" {{if .Holiday.IsStateHoliday}}checked{{end}} name="state_holiday" type="checkbox"></label>
<section class="form-field">
<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>
<label class="checkbox"><span>Religious holiday</span><input id="religious_holiday" value="true" {{if .Holiday.IsReligiousHoliday}}checked{{end}} name="religious_holiday" type="checkbox"></label>
<section class="form-field">
<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 type="button" onclick="closeDialog('#update-card')">Cancel</button>
<button class="primary" type="submit">Ažuriraj</button>
<button class="secondary" type="button" onclick="closeDialog('#update-card')">Odustani</button>
</section>
</form>
</dialog>

View File

@ -1,127 +1,122 @@
<!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">
<title>Holiday-api | Dokumentacija</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>
<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></h1>
</section>
<h1><a href="/">Holiday-api</a> | Dokumentacija</h1>
</header>
<nav>
<section class="container">
<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>
<label for="country">Country</label>
<select id="country" name="country">
{{range $entry := .Countries}}
<option value="{{$entry.IsoName}}">{{$entry.Name}}</option>
{{end}}
</select>
</section>
<main class="dialog documentation-dialog">
<section style="margin-bottom: 1em;">
<section id="query">
<article class="card" style="margin: 1em;">
<form id="query-generator">
<input type="hidden" id="country" name="country" value="HR">
<section class="form-field">
<label for="content-type">Format</label>
<select id="content-type" name="content-type">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</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="application/xml">XML</option>
<option value="text/csv">CSV</option>
</select>
</section>
<article class="optional-selector">
<div class="header">
<section class="form-field">
<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">Za godinu</option>
<option value="date">Za datum</option>
<option value="range">Za raspon datuma</option>
<option value="all">Svi</option>
</select>
</section>
</div>
<div data-section-id="date-selector-year">
<section class="form-field">
<label for="dsy-year">Godina</label>
<select id="dsy-year" name="year">
{{range $entry := .Years}}
<option value="{{$entry}}">{{$entry}}</option>
{{end}}
</select>
</section>
</div>
<article class="optional-selector">
<div class="header">
<section>
<label for="date-selector">Date selector</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="date">Select date</option>
<option value="range">Select date range</option>
<option value="all">All</option>
</select>
</section>
</div>
<div data-section-id="date-selector-date">
<section class="form-field">
<label for="dsd-date">Datum</label>
<input type="date" id="dsd-date" name="dsd-date">
</section>
</div>
<div data-section-id="date-selector-year">
<section>
<label for="dsy-year">Year</label>
<select id="dsy-year" name="year">
{{range $entry := .Years}}
<option value="{{$entry}}">{{$entry}}</option>
{{end}}
</select>
</section>
</div>
<div class="range-selector" data-section-id="date-selector-range">
<section class="form-field">
<label for="dsr-start-range">Početak raspona</label>
<input type="date" id="dsr-start-range" name="dsr-start-range">
</section>
<section class="form-field">
<label for="dsr-end-range">Kraj raspona</label>
<input type="date" id="dsr-end-range" name="dsr-end-range">
</section>
</div>
</article>
<div data-section-id="date-selector-date">
<section>
<label for="dsd-date">Date</label>
<input type="date" id="dsd-date" name="dsd-date">
</section>
</div>
<div data-section-id="date-selector-range">
<section>
<label for="dsr-start-range">Start range</label>
<input type="date" id="dsr-start-range" name="dsr-start-range">
</section>
<section>
<label for="dsr-start-range-required">Required</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>
<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" id="state-holiday" name="state_holiday">
</section>
<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" id="religious-holiday" name="religious_holiday">
</section>
</form>
</article>
</section>
<section id="result" style="flex-grow: 1; margin: 1em;">
<h3 style="margin-bottom: 1em;">Query</h3>
<article id="result-content" class="card source-code">
Loading...
</article>
<section class="radio-group" style="margin-top: 0.5em;">
<label>Državni praznik:</label>
<div>
<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">Ne
</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>Religiozni praznik:</label>
<div>
<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">Ne
</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>
</form>
</article>
</section>
<section id="result" style="flex-grow: 1; margin: 1em;">
<div style="display: flex; flex-wrap: wrap; align-items: baseline">
<h3 style="margin-bottom: 1em;">Naredba</h3>
<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>
</html>

View File

@ -11,8 +11,12 @@
</head>
<body>
<div class="background-image">
<article class="dialog search-dialog">
<header>
<h1><a href="/">Holiday-api</a></h1>
<div style="flex-grow: 1"></div>
<a style="all: unset;" href="/documentation">Api dokumentacija</a>
</header>
<main class="dialog search-dialog">
<form action="/">
<div class="form-field">
<label for="year">Za godinu:</label>
@ -26,7 +30,7 @@
<button class="primary">Pretraži</button>
</div>
</form>
</article>
</main>
</div>
</body>
</html>

View File

@ -39,9 +39,13 @@
</head>
<body>
<div class="background-image" style="position: fixed;"></div>
<article class="dialog results-dialog">
<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;">
<h1><a href="/">Holiday-api</a> | {{deferint $.Search.Year}}</h1>
<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;" >
@ -83,6 +87,6 @@
{{end}}
</tbody>
</table>
</article>
</main>
</body>
</html>