Redesigned admin pages
This commit is contained in:
Borna Rajković
parent
6163c0a04f
commit
9bdb5dd129
|
|
@ -11,17 +11,15 @@ window.addEventListener('load', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
function generateQuery(query) {
|
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'];
|
delete query['country'];
|
||||||
|
|
||||||
for(const key in query) {
|
for(const key in query) {
|
||||||
initialQuery += `&${key}=${query[key]}`
|
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");
|
let country = document.querySelector("#country");
|
||||||
|
|
@ -36,10 +34,8 @@ window.addEventListener('load', () => {
|
||||||
let dDate = document.querySelector("#dsd-date");
|
let dDate = document.querySelector("#dsd-date");
|
||||||
|
|
||||||
let dStartRange = document.querySelector("#dsr-start-range");
|
let dStartRange = document.querySelector("#dsr-start-range");
|
||||||
let dStartRangeRequired = document.querySelector("#dsr-start-range-required");
|
|
||||||
|
|
||||||
let dEndRange = document.querySelector("#dsr-end-range");
|
let dEndRange = document.querySelector("#dsr-end-range");
|
||||||
let dEndRangeRequired = document.querySelector("#dsr-end-range-required");
|
|
||||||
|
|
||||||
let queryGenerator = document.querySelector("#query-generator");
|
let queryGenerator = document.querySelector("#query-generator");
|
||||||
|
|
||||||
|
|
@ -53,6 +49,7 @@ window.addEventListener('load', () => {
|
||||||
if(religiousHoliday.value === 'true' || religiousHoliday.value === 'false') {
|
if(religiousHoliday.value === 'true' || religiousHoliday.value === 'false') {
|
||||||
query['religiousHoliday'] = parseBoolean(religiousHoliday.value);
|
query['religiousHoliday'] = parseBoolean(religiousHoliday.value);
|
||||||
}
|
}
|
||||||
|
console.log(dateSelector.value, dStartRange.value, dEndRange.value);
|
||||||
switch(dateSelector.value) {
|
switch(dateSelector.value) {
|
||||||
case 'year':
|
case 'year':
|
||||||
query['year'] = dYear.value;
|
query['year'] = dYear.value;
|
||||||
|
|
@ -63,10 +60,10 @@ window.addEventListener('load', () => {
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'range':
|
case 'range':
|
||||||
if(dStartRangeRequired.checked && dStartRange.value) {
|
if(dStartRange.value) {
|
||||||
query['startRange'] = dStartRange.value;
|
query['startRange'] = dStartRange.value;
|
||||||
}
|
}
|
||||||
if(dEndRangeRequired.checked && dEndRange.value) {
|
if(dEndRange.value) {
|
||||||
query['endRange'] = dEndRange.value;
|
query['endRange'] = dEndRange.value;
|
||||||
}
|
}
|
||||||
case 'all':
|
case 'all':
|
||||||
|
|
@ -79,13 +76,14 @@ window.addEventListener('load', () => {
|
||||||
queryGenerator.addEventListener('change', event => {
|
queryGenerator.addEventListener('change', event => {
|
||||||
const query = {};
|
const query = {};
|
||||||
query['country'] = country.value;
|
query['country'] = country.value;
|
||||||
query['contentType'] = contentType.value;
|
query['type'] = contentType.value;
|
||||||
if(stateHoliday.value === 'true' || stateHoliday.value === 'false') {
|
if(stateHoliday.value === 'true' || stateHoliday.value === 'false') {
|
||||||
query['stateHoliday'] = parseBoolean(stateHoliday.value);
|
query['stateHoliday'] = parseBoolean(stateHoliday.value);
|
||||||
}
|
}
|
||||||
if(religiousHoliday.value === 'true' || religiousHoliday.value === 'false') {
|
if(religiousHoliday.value === 'true' || religiousHoliday.value === 'false') {
|
||||||
query['religiousHoliday'] = parseBoolean(religiousHoliday.value);
|
query['religiousHoliday'] = parseBoolean(religiousHoliday.value);
|
||||||
}
|
}
|
||||||
|
console.log(dateSelector.value, dStartRange.value, dEndRange.value);
|
||||||
switch(dateSelector.value) {
|
switch(dateSelector.value) {
|
||||||
case 'year':
|
case 'year':
|
||||||
query['year'] = dYear.value;
|
query['year'] = dYear.value;
|
||||||
|
|
@ -96,10 +94,10 @@ window.addEventListener('load', () => {
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'range':
|
case 'range':
|
||||||
if(dStartRangeRequired.checked && dStartRange.value) {
|
if(dStartRange.value) {
|
||||||
query['startRange'] = dStartRange.value;
|
query['startRange'] = dStartRange.value;
|
||||||
}
|
}
|
||||||
if(dEndRangeRequired.checked && dEndRange.value) {
|
if(dEndRange.value) {
|
||||||
query['endRange'] = dEndRange.value;
|
query['endRange'] = dEndRange.value;
|
||||||
}
|
}
|
||||||
case 'all':
|
case 'all':
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ body {
|
||||||
border: 0;
|
border: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
|
|
@ -12,20 +11,44 @@ main {
|
||||||
position: relative;
|
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 {
|
.dialog {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
background: white;
|
background: white;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 16px 32px;
|
padding: 1em 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (min-width: 480px) {
|
||||||
|
.dialog {
|
||||||
|
padding: 1em 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.background-image {
|
.background-image {
|
||||||
min-width: 100vw;
|
min-width: 100vw;
|
||||||
min-height: 100vh;
|
min-height: 100dvh;
|
||||||
|
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
max-height: 100vh;
|
max-height: 100dvh;
|
||||||
|
|
||||||
background: url("/assets/background.jpg");
|
background: url("/assets/background.jpg");
|
||||||
background-position: bottom;
|
background-position: bottom;
|
||||||
|
|
@ -63,50 +86,65 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2rem;
|
font-size: 1.1rem;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
h1 a {
|
h1 a {
|
||||||
all: unset;
|
all: unset;
|
||||||
}
|
}
|
||||||
|
h3 {
|
||||||
|
margin: 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 480px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.form-field {
|
.form-field {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
.form-field label {
|
.form-field label {
|
||||||
display: block;
|
display: block;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
.form-field input {
|
.form-field input, .form-field textarea {
|
||||||
width: 300px;
|
width: 100%;
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 1px solid #bbb;
|
border-bottom: 1px solid #bbb;
|
||||||
|
|
||||||
font-size: 20px;
|
font-size: 1rem;
|
||||||
outline: none;
|
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;
|
color: cadetblue;
|
||||||
border-bottom: 1px solid cadetblue;
|
border-bottom: 1px solid cadetblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-field input:not(focus) {
|
.form-field input:not(focus), .form-field textarea:not(focus) {
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-field label {
|
|
||||||
display: block;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
.form-field select {
|
.form-field select {
|
||||||
all: unset;
|
all: unset;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 1px solid #bbb;
|
border-bottom: 1px solid #bbb;
|
||||||
|
|
||||||
font-size: 20px;
|
font-size: 1rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -123,29 +161,28 @@ h1 a {
|
||||||
color: cadetblue;
|
color: cadetblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button.primary, button.primary {
|
||||||
.button.secondary, button.primary {
|
padding: 0.75em 1em;
|
||||||
padding: 12px 16px;
|
|
||||||
background-color: cadetblue;
|
background-color: cadetblue;
|
||||||
font-family: Quicksand, Arial, sans-serif;
|
font-family: Quicksand, Arial, sans-serif;
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1.2rem;
|
font-size: 1rem;
|
||||||
margin-top: 16px;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.secondary, button.primary:hover {
|
.button.primary, button.primary:hover {
|
||||||
filter: contrast(140%);
|
filter: contrast(140%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.secondary, button.secondary {
|
.button.secondary, button.secondary {
|
||||||
padding: 12px 16px;
|
padding: 0.75em 1em;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
font-family: Quicksand, Arial, sans-serif;
|
font-family: Quicksand, Arial, sans-serif;
|
||||||
border: 1px solid cadetblue;
|
border: 1px solid cadetblue;
|
||||||
color: cadetblue;
|
color: cadetblue;
|
||||||
font-size: 1.2rem;
|
font-size: 1rem;
|
||||||
margin-top: 16px;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.secondary:hover, button.secondary:hover {
|
.button.secondary:hover, button.secondary:hover {
|
||||||
|
|
@ -155,11 +192,11 @@ h1 a {
|
||||||
/*index.html*/
|
/*index.html*/
|
||||||
|
|
||||||
.search-dialog {
|
.search-dialog {
|
||||||
position: absolute;
|
position: relative;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding-top: 40px;
|
||||||
padding-bottom: 40px;
|
padding-bottom: 40px;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 480px) {
|
@media screen and (min-width: 480px) {
|
||||||
|
|
@ -169,6 +206,7 @@ h1 a {
|
||||||
left: 10vw;
|
left: 10vw;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
width: 380px;
|
width: 380px;
|
||||||
|
padding-top: 40px;
|
||||||
padding-bottom: 40px;
|
padding-bottom: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -179,6 +217,7 @@ h1 a {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding-bottom: 40px;
|
padding-bottom: 40px;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.results-dialog table {
|
.results-dialog table {
|
||||||
|
|
@ -193,6 +232,7 @@ h1 a {
|
||||||
.results-dialog {
|
.results-dialog {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
margin-top: 1em;
|
||||||
width: 600px;
|
width: 600px;
|
||||||
padding-bottom: 40px;
|
padding-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
@ -200,4 +240,155 @@ h1 a {
|
||||||
|
|
||||||
.results td {
|
.results td {
|
||||||
padding: 0.4em 0;
|
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;
|
||||||
}
|
}
|
||||||
|
|
@ -5,11 +5,8 @@ window.addEventListener('load', () => {
|
||||||
const action = el.querySelector(".dropdown-action");
|
const action = el.querySelector(".dropdown-action");
|
||||||
const content = el.querySelector(".dropdown-content");
|
const content = el.querySelector(".dropdown-content");
|
||||||
|
|
||||||
console.log(action, content, el.offsetWidth, content.offsetWidth);
|
|
||||||
|
|
||||||
action.addEventListener('click', () => {
|
action.addEventListener('click', () => {
|
||||||
content.classList.toggle('selected');
|
content.classList.toggle('selected');
|
||||||
console.log(content.offsetWidth - action.offsetWidth);
|
|
||||||
content.style.marginLeft = `-${(content.offsetWidth - action.offsetWidth)}px`;
|
content.style.marginLeft = `-${(content.offsetWidth - action.offsetWidth)}px`;
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
||||||
4
main.go
4
main.go
|
|
@ -133,6 +133,7 @@ func loadTemplates(g *gin.Engine) {
|
||||||
"templates/dialogs/delete-holiday.gohtml",
|
"templates/dialogs/delete-holiday.gohtml",
|
||||||
"templates/dialogs/check-is-a-holiday.gohtml",
|
"templates/dialogs/check-is-a-holiday.gohtml",
|
||||||
|
|
||||||
|
"templates/dialogs/add-country.gohtml",
|
||||||
"templates/dialogs/edit-country.gohtml",
|
"templates/dialogs/edit-country.gohtml",
|
||||||
"templates/dialogs/delete-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")
|
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) {
|
adminDashboard.GET("/dialogs/add-holiday", func(c *gin.Context) {
|
||||||
countries, _ := countryService.Find()
|
countries, _ := countryService.Find()
|
||||||
|
|
|
||||||
|
|
@ -1,101 +1,95 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html>
|
||||||
<head>
|
<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>
|
<script src="/assets/global.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="dialog-container"></div>
|
<div class="background-image" style="position: fixed">
|
||||||
|
</div>
|
||||||
<header>
|
<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>
|
</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">
|
<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">
|
<select id="country" name="country">
|
||||||
{{range $entry := .Countries}}
|
{{range $entry := .Countries}}
|
||||||
<option {{if eq $.Search.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
|
<option {{if eq $.Search.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
|
||||||
{{end}}
|
{{end}}
|
||||||
</select>
|
</select>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section class="form-field">
|
||||||
<label for="year">Year:</label>
|
<label for="year">Za godinu:</label>
|
||||||
<select id="year" name="year">
|
<select id="year" name="year">
|
||||||
{{range $entry := .Years}}
|
{{range $entry := .Years}}
|
||||||
<option {{if intpeq $.Search.Year $entry}}selected{{end}} value="{{$entry}}">{{$entry}}</option>
|
<option {{if intpeq $.Search.Year $entry}}selected{{end}} value="{{$entry}}">{{$entry}}</option>
|
||||||
{{end}}
|
{{end}}
|
||||||
</select>
|
</select>
|
||||||
</section>
|
</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>
|
<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>
|
</div>
|
||||||
<input type="hidden" value="{{.Search.StateHoliday}}" name="state_holiday">
|
<input type="hidden" value="{{.Search.StateHoliday}}" id="state-holiday" name="state_holiday">
|
||||||
</section>
|
</section>
|
||||||
<section class="radio-group">
|
<section class="radio-group">
|
||||||
<label>Is religious holiday:</label>
|
<label>Religiozni praznik:</label>
|
||||||
<div>
|
<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>
|
</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">
|
|
||||||
{{ importSvg "/assets/icons/search.svg"}}
|
|
||||||
<span>Search</span>
|
|
||||||
</button>
|
|
||||||
</section>
|
</section>
|
||||||
|
<div class="button-actions">
|
||||||
|
<button class="primary">Pretraži</button>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</article>
|
</section>
|
||||||
</section>
|
</div>
|
||||||
<section id="results">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Date</th>
|
|
||||||
<th>State</th>
|
|
||||||
<th>Religious</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
{{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>
|
<tr>
|
||||||
<td>{{$entry.Name}}</td>
|
<th>Ime</th>
|
||||||
<td>{{$entry.Date.Format "2006-01-02"}}</td>
|
<th>Datum</th>
|
||||||
<td><img class="icon" src="{{if $entry.IsStateHoliday}}/assets/icons/done-v.svg{{else}}/assets/icons/close-x.svg{{end}}"></td>
|
<th></th>
|
||||||
<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>
|
|
||||||
</tr>
|
</tr>
|
||||||
{{end}}
|
</thead>
|
||||||
</tbody>
|
<tbody>
|
||||||
</table>
|
|
||||||
</section>
|
{{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>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
<!--
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
@ -57,4 +58,54 @@
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</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>
|
</html>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -1,35 +1,35 @@
|
||||||
<dialog class="card" id="create-card">
|
<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">
|
<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">
|
<select id="country" required name="country">
|
||||||
{{range $entry := .Countries}}
|
{{range $entry := .Countries}}
|
||||||
<option value="{{$entry.IsoName}}">{{$entry.Name}}</option>
|
<option value="{{$entry.IsoName}}">{{$entry.Name}}</option>
|
||||||
{{end}}
|
{{end}}
|
||||||
</select>
|
</select>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section class="form-field">
|
||||||
<label for="name">Name:</label>
|
<label for="name">Ime:</label>
|
||||||
<input required id="name" name="name" type="text">
|
<input required id="name" name="name" type="text">
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section class="form-field">
|
||||||
<label for="description">Description:</label>
|
<label for="description">Opis:</label>
|
||||||
<textarea id="description" name="description"></textarea>
|
<textarea id="description" name="description"></textarea>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section class="form-field">
|
||||||
<label for="date">Date:</label>
|
<label for="date">Datum:</label>
|
||||||
<input required id="date" name="date" type="date">
|
<input required id="date" name="date" type="date">
|
||||||
</section>
|
</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>
|
<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>
|
||||||
<section class="actions">
|
<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>
|
</section>
|
||||||
</form>
|
</form>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
|
|
||||||
<dialog class="card" id="delete-card">
|
<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">
|
<form method="post" action="/admin/countries/{{.Country.Id}}/delete">
|
||||||
<section class="actions">
|
<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>
|
</section>
|
||||||
</form>
|
</form>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
|
|
||||||
<dialog class="card" id="delete-card">
|
<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">
|
<form method="post" action="/admin/holidays/{{.Holiday.Id}}/delete">
|
||||||
<section class="actions">
|
<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>
|
</section>
|
||||||
</form>
|
</form>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
<dialog class="card" id="update-card">
|
<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">
|
<form method="post" action="/admin/countries">
|
||||||
<input type="hidden" name="id" value="{{.Country.Id}}">
|
<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">
|
<input required minlength="2" maxlength="2" id="iso_name" value="{{.Country.IsoName}}" name="iso_name" type="text">
|
||||||
</section>
|
</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">
|
<input required minlength="1" maxlength="45" id="name" value="{{.Country.Name}}" name="name" type="text">
|
||||||
</section>
|
</section>
|
||||||
<section class="actions">
|
<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>
|
</section>
|
||||||
</form>
|
</form>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
@ -1,36 +1,36 @@
|
||||||
<dialog class="card" id="update-card">
|
<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">
|
<form method="post" action="/admin/holidays">
|
||||||
<input type="hidden" name="id" value="{{.Holiday.Id}}">
|
<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">
|
<select id="country" required name="country">
|
||||||
{{range $entry := .Countries}}
|
{{range $entry := .Countries}}
|
||||||
<option {{if eq $.Holiday.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
|
<option {{if eq $.Holiday.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
|
||||||
{{end}}
|
{{end}}
|
||||||
</select>
|
</select>
|
||||||
</section>
|
</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">
|
<input required id="name" value="{{.Holiday.Name}}" name="name" type="text">
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section class="form-field">
|
||||||
<label for="description">Description:</label>
|
<label for="description">Opis:</label>
|
||||||
<textarea id="description" name="description">{{.Holiday.Description}}</textarea>
|
<textarea id="description" name="description">{{.Holiday.Description}}</textarea>
|
||||||
</section>
|
</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">
|
<input required id="date" value="{{.Holiday.Date.Format "2006-01-02"}}" name="date" type="date">
|
||||||
</section>
|
</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>
|
<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>
|
||||||
<section class="actions">
|
<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>
|
</section>
|
||||||
</form>
|
</form>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
@ -1,127 +1,122 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html>
|
||||||
<head>
|
<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/global.js"></script>
|
||||||
<script src="/assets/documentation.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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="dialog-container"></div>
|
<div class="background-image" style="position: fixed;"></div>
|
||||||
<header>
|
<header>
|
||||||
<section class="container">
|
<h1><a href="/">Holiday-api</a> | Dokumentacija</h1>
|
||||||
<h1><a href="/">Holiday-api</a></h1>
|
|
||||||
</section>
|
|
||||||
</header>
|
</header>
|
||||||
<nav>
|
<main class="dialog documentation-dialog">
|
||||||
<section class="container">
|
<section style="margin-bottom: 1em;">
|
||||||
<a href="/">Search</a>
|
<section id="query">
|
||||||
<a class="selected" href="#">Documentation</a>
|
<article class="card" style="margin: 1em;">
|
||||||
<button data-type="dialog" data-trigger="#check-is-a-holiday" data-url="/dialogs/check-is-a-holiday">Check is a holiday</button>
|
<form id="query-generator">
|
||||||
</section>
|
<input type="hidden" id="country" name="country" value="HR">
|
||||||
</nav>
|
<section class="form-field">
|
||||||
<main>
|
<label for="content-type">Format</label>
|
||||||
<section id="query">
|
<select id="content-type" name="content-type">
|
||||||
<article class="card" style="margin: 1em;">
|
<option value="json">JSON</option>
|
||||||
<form id="query-generator">
|
<option value="xml">XML</option>
|
||||||
<section>
|
<option value="csv">CSV</option>
|
||||||
<label for="country">Country</label>
|
</select>
|
||||||
<select id="country" name="country">
|
</section>
|
||||||
{{range $entry := .Countries}}
|
|
||||||
<option value="{{$entry.IsoName}}">{{$entry.Name}}</option>
|
|
||||||
{{end}}
|
|
||||||
</select>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<article class="optional-selector">
|
||||||
<label for="content-type">Content type</label>
|
<div class="header">
|
||||||
<select id="content-type" name="content-type">
|
<section class="form-field">
|
||||||
<option value="application/json">JSON</option>
|
<label for="date-selector">Izbornik</label>
|
||||||
<option value="application/xml">XML</option>
|
<select data-type="section-selector" data-selector-prefix="date-selector" id="date-selector" name="date-selector">
|
||||||
<option value="text/csv">CSV</option>
|
<option value="year">Za godinu</option>
|
||||||
</select>
|
<option value="date">Za datum</option>
|
||||||
</section>
|
<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 data-section-id="date-selector-date">
|
||||||
<div class="header">
|
<section class="form-field">
|
||||||
<section>
|
<label for="dsd-date">Datum</label>
|
||||||
<label for="date-selector">Date selector</label>
|
<input type="date" id="dsd-date" name="dsd-date">
|
||||||
<select data-type="section-selector" data-selector-prefix="date-selector" id="date-selector" name="date-selector">
|
</section>
|
||||||
<option value="year">Select year</option>
|
</div>
|
||||||
<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-year">
|
<div class="range-selector" data-section-id="date-selector-range">
|
||||||
<section>
|
<section class="form-field">
|
||||||
<label for="dsy-year">Year</label>
|
<label for="dsr-start-range">Početak raspona</label>
|
||||||
<select id="dsy-year" name="year">
|
<input type="date" id="dsr-start-range" name="dsr-start-range">
|
||||||
{{range $entry := .Years}}
|
</section>
|
||||||
<option value="{{$entry}}">{{$entry}}</option>
|
<section class="form-field">
|
||||||
{{end}}
|
<label for="dsr-end-range">Kraj raspona</label>
|
||||||
</select>
|
<input type="date" id="dsr-end-range" name="dsr-end-range">
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
<div data-section-id="date-selector-date">
|
<section class="radio-group" style="margin-top: 0.5em;">
|
||||||
<section>
|
<label>Državni praznik:</label>
|
||||||
<label for="dsd-date">Date</label>
|
<div>
|
||||||
<input type="date" id="dsd-date" name="dsd-date">
|
<input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">Da
|
||||||
</section>
|
</label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">Ne
|
||||||
</div>
|
</label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">Svi</label>
|
||||||
|
</div>
|
||||||
<div data-section-id="date-selector-range">
|
<input type="hidden" id="state-holiday" name="state_holiday">
|
||||||
<section>
|
</section>
|
||||||
<label for="dsr-start-range">Start range</label>
|
<section class="radio-group">
|
||||||
<input type="date" id="dsr-start-range" name="dsr-start-range">
|
<label>Religiozni praznik:</label>
|
||||||
</section>
|
<div>
|
||||||
<section>
|
<input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">Da
|
||||||
<label for="dsr-start-range-required">Required</label>
|
</label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">Ne
|
||||||
<input type="checkbox" id="dsr-start-range-required" name="dsr-start-range-required">
|
</label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">Svi</label>
|
||||||
</section>
|
</div>
|
||||||
<section>
|
<input type="hidden" id="religious-holiday" name="religious_holiday">
|
||||||
<label for="dsr-end-range">End range</label>
|
</section>
|
||||||
<input type="date" id="dsr-end-range" name="dsr-end-range">
|
</form>
|
||||||
</section>
|
</article>
|
||||||
<section>
|
</section>
|
||||||
<label for="dsr-end-range-required">Required</label>
|
<section id="result" style="flex-grow: 1; margin: 1em;">
|
||||||
<input type="checkbox" id="dsr-end-range-required" name="dsr-end-range-required">
|
<div style="display: flex; flex-wrap: wrap; align-items: baseline">
|
||||||
</section>
|
<h3 style="margin-bottom: 1em;">Naredba</h3>
|
||||||
</div>
|
<div style="flex-grow: 1"></div>
|
||||||
</article>
|
<div>
|
||||||
|
<a id="query-link" style="text-decoration: none" class="button secondary" href="." target="_blank">Dohvati</a>
|
||||||
<section class="radio-group" style="margin-top: 0.5em;">
|
</div>
|
||||||
<label>Is state holiday:</label>
|
</div>
|
||||||
<div>
|
<article id="result-content">
|
||||||
<input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">True
|
Učitavanje...
|
||||||
</label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">False
|
</article>
|
||||||
</label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">All</label>
|
</section>
|
||||||
</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>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -11,8 +11,12 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="background-image">
|
<div class="background-image">
|
||||||
<article class="dialog search-dialog">
|
<header>
|
||||||
<h1><a href="/">Holiday-api</a></h1>
|
<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="/">
|
<form action="/">
|
||||||
<div class="form-field">
|
<div class="form-field">
|
||||||
<label for="year">Za godinu:</label>
|
<label for="year">Za godinu:</label>
|
||||||
|
|
@ -26,7 +30,7 @@
|
||||||
<button class="primary">Pretraži</button>
|
<button class="primary">Pretraži</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</article>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -39,9 +39,13 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="background-image" style="position: fixed;"></div>
|
<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;">
|
<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="/">
|
<form style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1em" action="/">
|
||||||
<div style="flex-grow: 1;"></div>
|
<div style="flex-grow: 1;"></div>
|
||||||
<div class="form-field" style="width: auto;" >
|
<div class="form-field" style="width: auto;" >
|
||||||
|
|
@ -83,6 +87,6 @@
|
||||||
{{end}}
|
{{end}}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</article>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue