Release 15 - Revamp #38
32 changed files with 846 additions and 1297 deletions
140
app/db_queries.py
Normal file
140
app/db_queries.py
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
#from datetime import datetime
|
||||
|
||||
from django.conf import settings
|
||||
from django.db import connection
|
||||
|
||||
from .models import Order
|
||||
|
||||
|
||||
def _db_select(sql_select:str):
|
||||
result = None
|
||||
with connection.cursor() as cursor:
|
||||
cursor.execute(sql_select)
|
||||
result = cursor.fetchall()
|
||||
return result
|
||||
|
||||
|
||||
COMBINE_ALPHABET = "abcdefghijklmnopqrstuvwxyz"
|
||||
def _combine_results(results:list) -> dict:
|
||||
'''
|
||||
e.g.
|
||||
input: [
|
||||
[("x", 12), ("y", 13)],
|
||||
[("y", 10), ("z", 42)]
|
||||
]
|
||||
output: {
|
||||
"x": {"a": 12},
|
||||
"y": {"a": 13, "b": 10},
|
||||
"z": {"b": 42}
|
||||
}
|
||||
'''
|
||||
result = {}
|
||||
for i, d in enumerate(results):
|
||||
a = COMBINE_ALPHABET[i]
|
||||
for r in d:
|
||||
r_0 = r[0]
|
||||
if r_0 not in result:
|
||||
result[r_0] = {}
|
||||
result[r_0][a] = r[1]
|
||||
return result
|
||||
|
||||
|
||||
def select_history(user, language_code="en") -> list:
|
||||
# select order history and deposits
|
||||
user_id = user.pk
|
||||
result = _db_select(f"""
|
||||
select
|
||||
concat(
|
||||
product_name, ' (',
|
||||
content_litres::real, -- converting to real removes trailing zeros
|
||||
'l) x ', amount, ' - ', price_sum, '{settings.CURRENCY_SUFFIX}') as "text",
|
||||
datetime
|
||||
from app_order
|
||||
where user_id = {user_id}
|
||||
|
||||
union
|
||||
|
||||
select
|
||||
concat('Deposit: +', transaction_sum, '{settings.CURRENCY_SUFFIX}') as "text",
|
||||
datetime
|
||||
from app_userdeposits_view
|
||||
where user_id = {user_id}
|
||||
|
||||
order by datetime desc
|
||||
fetch first 30 rows only;
|
||||
""")
|
||||
result = [list(row) for row in result]
|
||||
if language_code == "de": # reformat for german translation
|
||||
for row in result:
|
||||
row[0] = row[0].replace(".", ",")
|
||||
return result
|
||||
|
||||
|
||||
def orders_per_month(user) -> list:
|
||||
# number of orders per month (last 12 months)
|
||||
result_user = _db_select(f"""
|
||||
select
|
||||
to_char(date_trunc('month', datetime), 'YYYY-MM') as "month",
|
||||
sum(amount) as "count"
|
||||
from app_order
|
||||
where user_id = {user.pk}
|
||||
and date_trunc('month', datetime) > date_trunc('month', now() - '12 months'::interval)
|
||||
group by "month"
|
||||
order by "month" desc;
|
||||
""")
|
||||
result_all = _db_select(f"""
|
||||
select
|
||||
to_char(date_trunc('month', datetime), 'YYYY-MM') as "month",
|
||||
sum(amount) as "count"
|
||||
from app_order
|
||||
where date_trunc('month', datetime) > date_trunc('month', now() - '12 months'::interval)
|
||||
group by "month"
|
||||
order by "month" desc;
|
||||
""")
|
||||
return _combine_results([result_user, result_all])
|
||||
|
||||
|
||||
def orders_per_weekday(user) -> list:
|
||||
# number of orders per weekday (all time)
|
||||
result_user = _db_select(f"""
|
||||
select
|
||||
to_char(datetime, 'Day') as "day",
|
||||
sum(amount) as "count"
|
||||
from app_order
|
||||
where user_id = {user.pk}
|
||||
group by "day"
|
||||
order by "count" desc;
|
||||
""")
|
||||
result_all = _db_select(f"""
|
||||
select
|
||||
to_char(datetime, 'Day') as "day",
|
||||
sum(amount) as "count"
|
||||
from app_order
|
||||
group by "day"
|
||||
order by "count" desc;
|
||||
""")
|
||||
return _combine_results([result_user, result_all])
|
||||
|
||||
|
||||
def orders_per_drink(user) -> list:
|
||||
# number of orders per drink (all time)
|
||||
result_user = _db_select(f"""
|
||||
select
|
||||
d.product_name as "label",
|
||||
sum(o.amount) as "data"
|
||||
from app_drink d
|
||||
join app_order o on (d.id = o.drink_id)
|
||||
where o.user_id = {user.pk}
|
||||
group by d.product_name
|
||||
order by "data" desc;
|
||||
""")
|
||||
result_all = _db_select(f"""
|
||||
select
|
||||
d.product_name as "label",
|
||||
sum(o.amount) as "data"
|
||||
from app_drink d
|
||||
join app_order o on (d.id = o.drink_id)
|
||||
group by d.product_name
|
||||
order by "data" desc;
|
||||
""")
|
||||
return _combine_results([result_user, result_all])
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
#from datetime import datetime
|
||||
|
||||
from django.conf import settings
|
||||
from django.db import connection
|
||||
|
||||
|
||||
def _select_from_db(sql_select:str):
|
||||
result = None
|
||||
with connection.cursor() as cursor:
|
||||
cursor.execute(sql_select)
|
||||
result = cursor.fetchall()
|
||||
return result
|
||||
|
||||
|
||||
def select_history(user, language_code="en") -> list:
|
||||
# select order history and deposits
|
||||
user_id = user.pk
|
||||
result = _select_from_db(f"""
|
||||
select
|
||||
concat(
|
||||
product_name, ' (',
|
||||
content_litres::real, -- converting to real removes trailing zeros
|
||||
'l) x ', amount, ' - ', price_sum, '{settings.CURRENCY_SUFFIX}') as "text",
|
||||
datetime
|
||||
from app_order
|
||||
where user_id = {user_id}
|
||||
|
||||
union
|
||||
|
||||
select
|
||||
concat('Deposit: +', transaction_sum, '{settings.CURRENCY_SUFFIX}') as "text",
|
||||
datetime
|
||||
from app_userdeposits_view
|
||||
where user_id = {user_id}
|
||||
|
||||
order by datetime desc
|
||||
fetch first 30 rows only;
|
||||
""")
|
||||
result = [list(row) for row in result]
|
||||
if language_code == "de": # reformat for german translation
|
||||
for row in result:
|
||||
row[0] = row[0].replace(".", ",")
|
||||
return result
|
||||
|
||||
|
||||
def select_yopml12m(user) -> list:
|
||||
# number of orders per month (last 12 months)
|
||||
# only for the specified user
|
||||
user_id = user.pk
|
||||
result = _select_from_db(f"""
|
||||
-- select the count of the orders per month (last 12 days)
|
||||
select
|
||||
to_char(date_trunc('month', datetime), 'YYYY-MM') as "month",
|
||||
sum(amount) as "count"
|
||||
from app_order
|
||||
where user_id = {user_id}
|
||||
and date_trunc('month', datetime) > date_trunc('month', now() - '12 months'::interval)
|
||||
group by "month"
|
||||
order by "month" desc;
|
||||
""")
|
||||
return [list(row) for row in result]
|
||||
|
||||
|
||||
def select_aopml12m() -> list:
|
||||
# number of orders per month (last 12 months)
|
||||
result = _select_from_db(f"""
|
||||
-- select the count of the orders per month (last 12 days)
|
||||
select
|
||||
to_char(date_trunc('month', datetime), 'YYYY-MM') as "month",
|
||||
sum(amount) as "count"
|
||||
from app_order
|
||||
where date_trunc('month', datetime) > date_trunc('month', now() - '12 months'::interval)
|
||||
group by "month"
|
||||
order by "month" desc;
|
||||
""")
|
||||
return [list(row) for row in result]
|
||||
|
||||
|
||||
def select_yopwd(user) -> list:
|
||||
# number of orders per weekday (all time)
|
||||
# only for the specified user
|
||||
user_id = user.pk
|
||||
result = _select_from_db(f"""
|
||||
-- select the count of the orders per weekday (all time)
|
||||
select
|
||||
to_char(datetime, 'Day') as "day",
|
||||
sum(amount) as "count"
|
||||
from app_order
|
||||
where user_id = {user_id}
|
||||
group by "day"
|
||||
order by "count" desc;
|
||||
""")
|
||||
return [list(row) for row in result]
|
||||
return []
|
||||
|
||||
|
||||
def select_aopwd() -> list:
|
||||
# number of orders per weekday (all time)
|
||||
result = _select_from_db(f"""
|
||||
-- select the count of the orders per weekday (all time)
|
||||
select
|
||||
to_char(datetime, 'Day') as "day",
|
||||
sum(amount) as "count"
|
||||
from app_order
|
||||
group by "day"
|
||||
order by "count" desc;
|
||||
""")
|
||||
return [list(row) for row in result]
|
||||
return []
|
||||
|
||||
|
||||
def select_noyopd(user) -> list:
|
||||
# number of orders per drink (all time)
|
||||
# only for specified user
|
||||
user_id = user.pk
|
||||
result = _select_from_db(f"""
|
||||
select
|
||||
d.product_name as "label",
|
||||
sum(o.amount) as "data"
|
||||
from app_drink d
|
||||
join app_order o on (d.id = o.drink_id)
|
||||
where o.user_id = {user_id}
|
||||
group by d.product_name
|
||||
order by "data" desc;
|
||||
""")
|
||||
return [list(row) for row in result]
|
||||
|
||||
|
||||
def select_noaopd() -> list:
|
||||
# number of orders per drink (all time)
|
||||
result = _select_from_db(f"""
|
||||
select
|
||||
d.product_name as "label",
|
||||
sum(o.amount) as "data"
|
||||
from app_drink d
|
||||
join app_order o on (d.id = o.drink_id)
|
||||
group by d.product_name
|
||||
order by "data" desc;
|
||||
""")
|
||||
return [list(row) for row in result]
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
.appform {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: max-content;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.appform > .forminfo {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: .4rem 0;
|
||||
}
|
||||
.forminfo > span:first-child {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.forminfo > span:last-child {
|
||||
float: right;
|
||||
}
|
||||
.appform > .forminput {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: .8rem 0;
|
||||
gap: 1rem;
|
||||
}
|
||||
.appform > .statusinfo {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
.appform > .formbuttons {
|
||||
border-top: 1px solid var(--glass-border-color);
|
||||
padding-top: 1rem;
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.formbuttons button, .formbuttons .button {
|
||||
box-sizing: content-box;
|
||||
font-size: 1rem;
|
||||
width: fit-content;
|
||||
}
|
||||
.formheading {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
@media only screen and (max-width: 700px) {
|
||||
.appform > .forminput {
|
||||
flex-direction: column;
|
||||
gap: .5rem;
|
||||
}
|
||||
.formheading {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
/* custom number input */
|
||||
.customnumberinput {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 2.2rem;
|
||||
}
|
||||
.customnumberinput button {
|
||||
min-width: 2.5rem !important;
|
||||
width: 2.5rem !important;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.customnumberinput-minus {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.customnumberinput-plus {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.customnumberinput input[type="number"] {
|
||||
max-height: 100%;
|
||||
width: 4rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: .9rem;
|
||||
color: var(--color);
|
||||
text-align: center;
|
||||
background: var(--glass-bg-color2);
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 0 !important;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.history {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 40%;
|
||||
min-width: 30rem;
|
||||
}
|
||||
.history td {
|
||||
padding-top: .4rem !important;
|
||||
padding-bottom: .4rem !important;
|
||||
font-size: .95rem;
|
||||
}
|
||||
.history .historydate {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
font-size: .8rem !important;
|
||||
}
|
||||
/* mobile devices */
|
||||
@media only screen and (max-width: 700px) {
|
||||
.history {
|
||||
width: 90%;
|
||||
min-width: 90%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
.availabledrinkslist {
|
||||
width: 50%;
|
||||
max-width: 45rem;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
.availabledrinkslist li {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
margin-bottom: .6rem;
|
||||
}
|
||||
.availabledrinkslist li a {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
color: var(--color);
|
||||
padding: .8rem 1.1rem;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.availabledrinkslist li a span:first-child {
|
||||
margin-right: 1rem !important;
|
||||
text-align: left;
|
||||
}
|
||||
.availabledrinkslist li a span:last-child {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
font-size: 1rem;
|
||||
}
|
||||
/* mobile devices */
|
||||
@media only screen and (max-width: 700px) {
|
||||
.availabledrinkslist {
|
||||
width: 95%;
|
||||
}
|
||||
.availabledrinkslist li a {
|
||||
width: calc(100vw - (2 * .8rem)) !important;
|
||||
padding: .8rem !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
/* login page */
|
||||
main {
|
||||
margin-top: 2vh;
|
||||
}
|
||||
main > h1 {
|
||||
display: none;
|
||||
}
|
||||
.userlistcontainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
}
|
||||
.userlist {
|
||||
width: 50vw;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.userlist > li {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: .5rem;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
.userlist > li > img {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
.userlist > li > div {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: .8rem 1.1rem;
|
||||
}
|
||||
.userlistbutton {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.passwordoverlaycontainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
background: var(--page-background);
|
||||
z-index: 40;
|
||||
}
|
||||
.passwordoverlay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
.passwordoverlay > form {
|
||||
min-width: unset;
|
||||
width: fit-content;
|
||||
}
|
||||
.passwordoverlay > form > h1 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
/* loginform */
|
||||
.loginform {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.loginform input[type="password"], form input[type="text"] {
|
||||
width: 94%;
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
font-size: 1rem;
|
||||
margin: .1rem 0;
|
||||
}
|
||||
.loginform .horizontalbuttonlist {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.horizontalbuttonlist .button, .horizontalbuttonlist button {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@media only screen and (max-width: 700px) {
|
||||
.userlistcontainer {
|
||||
width: 95vw;
|
||||
}
|
||||
.userlist {
|
||||
width: 100%;
|
||||
}
|
||||
.pinpad table tr td button {
|
||||
height: 4.2rem;
|
||||
width: 4.2rem;
|
||||
font-size: 1.16rem;
|
||||
margin: .2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,242 +1,258 @@
|
|||
/* VARIABLES */
|
||||
/* Variables */
|
||||
|
||||
:root {
|
||||
/** FONT **/
|
||||
--font-family: 'Liberation Sans', sans-serif;
|
||||
/** colors **/
|
||||
--color: #fafafa;
|
||||
--color-error: rgb(255, 70, 70);
|
||||
/** glass **/
|
||||
--glass-bg-dropdown: #3a3b44ef;
|
||||
--glass-bg-dropdown-hover: #55565efa;
|
||||
--glass-bg-color1: #ffffff31;
|
||||
--glass-bg-color2: #ffffff1a;
|
||||
--glass-bg-hover-color1: #ffffff46;
|
||||
--glass-bg-hover-color2: #ffffff1a;
|
||||
--glass-blur: none;
|
||||
--glass-border-color: #ffffff77;
|
||||
--glass-bg: linear-gradient(var(--glass-bg-color1), var(--glass-bg-color2));
|
||||
--glass-bg-hover: linear-gradient(var(--glass-bg-hover-color1), var(--glass-bg-hover-color2));
|
||||
--glass-corner-radius: .5rem;
|
||||
/** page background **/
|
||||
--page-background-color1: #131d25;
|
||||
--page-background-color2: #311d30;
|
||||
--page-background: linear-gradient(-190deg, var(--page-background-color1), var(--page-background-color2));
|
||||
/** global message banner **/
|
||||
--bg-globalmessage: linear-gradient(135deg, #4b351c, #411d52, #1c404b);
|
||||
--color-error: #ff682c;
|
||||
--bg-page-color: #222222;
|
||||
--bg-color: #4e4e4e;
|
||||
--bg-hover-color: #636363;
|
||||
--bg-color2: #383838;
|
||||
--bg-hover-color2: #4a4a4a;
|
||||
--border-color: #808080;
|
||||
--bg-globalmessage: #161616;
|
||||
--border-radius: .5rem;
|
||||
}
|
||||
@supports(backdrop-filter: blur(10px)) {
|
||||
:root {
|
||||
--glass-bg-dropdown: #ffffff1a;
|
||||
--glass-bg-dropdown-hover: #ffffff46;
|
||||
--glass-blur: blur(18px);
|
||||
}
|
||||
}
|
||||
/* BASE LAYOUT */
|
||||
|
||||
/* General */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-family);
|
||||
background: var(--page-background);
|
||||
background: var(--bg-page-color);
|
||||
color: var(--color);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: 8rem;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"], input[type="number"] {
|
||||
padding: .6rem .8rem;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
color: var(--color);
|
||||
border: none;
|
||||
outline: none;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
text-align: left;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
tr {
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
tr:nth-child(2n+2) {
|
||||
background: var(--bg-color2);
|
||||
}
|
||||
|
||||
/*
|
||||
Rounded corners on table cells apparently don't work with
|
||||
Firefox, so Firefox users won't have rounded corners
|
||||
on tables. Can't fix that by myself.
|
||||
*/
|
||||
|
||||
table tr:first-child th:first-child {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
table tr:first-child th:last-child {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
table tr:last-child td:first-child {
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
table tr:last-child td:last-child {
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: .5rem .8rem;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Basic Layout */
|
||||
|
||||
.baselayout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
.userpanel {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
font-size: 1rem;
|
||||
width: 94%;
|
||||
}
|
||||
.userinfo > span {
|
||||
font-size: 1.1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.userinfo > img {
|
||||
vertical-align: middle;
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
margin: .5rem;
|
||||
}
|
||||
.userpanel > .horizontalbuttonlist {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
.userbalancewarn {
|
||||
color: var(--color-error);
|
||||
font-weight: bold;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.globalmessage {
|
||||
width: 100vw;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--bg-globalmessage);
|
||||
padding: .3rem 0;
|
||||
}
|
||||
.globalmessage div {
|
||||
|
||||
.globalmessage > div {
|
||||
width: 96%;
|
||||
text-align: center;
|
||||
word-break: keep-all;
|
||||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* DROP DOWN MENUS */
|
||||
.dropdownmenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.userpanel {
|
||||
flex-direction: row;
|
||||
margin-top: 1rem;
|
||||
width: 94%;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.userinfo {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.userinfo > span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.userinfo > img {
|
||||
vertical-align: middle;
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
.userpanel-buttons {
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.userbalancewarn {
|
||||
color: var(--color-error);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-radius: var(--glass-corner-radius);
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.dropdownbutton {
|
||||
width: fit-content;
|
||||
z-index: 190;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
.content {
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
.dropdownbutton, .dropdownchoice {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.dropdownlist {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
pointer-events: none;
|
||||
border-radius: var(--glass-corner-radius) !important;
|
||||
backdrop-filter: var(--glass-blur);
|
||||
z-index: 200;
|
||||
margin-top: 3.2rem;
|
||||
opacity: 0%;
|
||||
transition: opacity 100ms;
|
||||
}
|
||||
.dropdownchoice {
|
||||
border-radius: 0 !important;
|
||||
margin: 0;
|
||||
margin-top: -1px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
background: var(--glass-bg-dropdown) !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
.dropdownchoice:hover {
|
||||
background: var(--glass-bg-dropdown-hover) !important;
|
||||
}
|
||||
.dropdownlist :first-child {
|
||||
border-top-left-radius: var(--glass-corner-radius) !important;
|
||||
border-top-right-radius: var(--glass-corner-radius) !important;
|
||||
}
|
||||
.dropdownlist :last-child {
|
||||
border-bottom-left-radius: var(--glass-corner-radius) !important;
|
||||
border-bottom-right-radius: var(--glass-corner-radius) !important;
|
||||
}
|
||||
.dropdownvisible .dropdownlist {
|
||||
opacity: 100%;
|
||||
visibility: visible;
|
||||
pointer-events: visible;
|
||||
}
|
||||
/* FOOTER */
|
||||
|
||||
.footer-container {
|
||||
z-index: 900;
|
||||
margin-top: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 3rem;
|
||||
margin-top: 1.5rem;
|
||||
padding-bottom: .3rem;
|
||||
text-align: center;
|
||||
pointer-events: initial;
|
||||
}
|
||||
.footer div {
|
||||
|
||||
.footer > div {
|
||||
font-size: .95rem;
|
||||
margin-top: .15rem;
|
||||
margin-bottom: .15rem;
|
||||
}
|
||||
.footer div::after {
|
||||
|
||||
.footer > div::after {
|
||||
margin-left: .5rem;
|
||||
content: "-";
|
||||
margin-right: .5rem;
|
||||
}
|
||||
.footer div:last-child::after {
|
||||
|
||||
.footer > div:last-child::after {
|
||||
content: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
/* TABLES */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
text-align: left;
|
||||
border-radius: var(--glass-corner-radius);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
|
||||
/* Common */
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
tr {
|
||||
background: var(--glass-bg-color1);
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
tr:nth-child(2n+2) {
|
||||
background: var(--glass-bg-color2);
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
/*
|
||||
Rounded corners on table cells apparently don't work with
|
||||
Firefox, so Firefox users won't have rounded corners
|
||||
on tables. Can't fix that by myself.
|
||||
*/
|
||||
table tr:first-child th:first-child {
|
||||
border-top-left-radius: var(--glass-corner-radius);
|
||||
|
||||
.flex-center {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
table tr:first-child th:last-child {
|
||||
border-top-right-radius: var(--glass-corner-radius);
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
table tr:last-child td:first-child {
|
||||
border-bottom-left-radius: var(--glass-corner-radius);
|
||||
|
||||
.gap-1rem {
|
||||
gap: 1rem;
|
||||
}
|
||||
table tr:last-child td:last-child {
|
||||
border-bottom-right-radius: var(--glass-corner-radius);
|
||||
|
||||
.fill {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
/* - */
|
||||
td, th {
|
||||
padding: .5rem .8rem;
|
||||
|
||||
.fill-vertical {
|
||||
height: 100%;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--color);
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
}
|
||||
/* BUTTONS & OTHER INPUT ELEMENTS */
|
||||
|
||||
.button, button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -244,100 +260,248 @@ th {
|
|||
font-family: var(--font-family);
|
||||
text-decoration: none;
|
||||
text-align: center !important;
|
||||
background: var(--glass-bg);
|
||||
background: var(--bg-color);
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
padding: .6rem .8rem;
|
||||
outline: none;
|
||||
border: 1px solid var(--glass-border-color);
|
||||
border-radius: var(--glass-corner-radius);
|
||||
/*backdrop-filter: var(--glass-blur); disabled for performance reasons*/
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
box-sizing: content-box;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.button:hover, button:hover, .button:active, button:active {
|
||||
background: var(--glass-bg-hover);
|
||||
background: var(--bg-hover-color);
|
||||
}
|
||||
|
||||
.button:disabled, button:disabled {
|
||||
opacity: 40%;
|
||||
}
|
||||
a {
|
||||
color: var(--color);
|
||||
|
||||
.appform > .forminfo {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
}
|
||||
input[type="number"] {
|
||||
|
||||
.forminfo > span:last-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.appform > .forminput {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.appform > .statusinfo {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.dropdownmenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.dropdownbutton {
|
||||
width: fit-content;
|
||||
z-index: 190;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dropdownlist {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
pointer-events: none;
|
||||
border-radius: var(--border-radius) !important;
|
||||
z-index: 200;
|
||||
margin-top: 3.2rem;
|
||||
opacity: 0%;
|
||||
transition: opacity 100ms;
|
||||
}
|
||||
|
||||
.dropdownchoice {
|
||||
border-radius: 0 !important;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-color2) !important;
|
||||
backdrop-filter: none !important;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.dropdownchoice:hover {
|
||||
background: var(--bg-hover-color2) !important;
|
||||
}
|
||||
|
||||
.dropdownlist :first-child {
|
||||
border-top-left-radius: var(--border-radius) !important;
|
||||
border-top-right-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.dropdownlist :last-child {
|
||||
border-bottom-left-radius: var(--border-radius) !important;
|
||||
border-bottom-right-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.dropdownvisible .dropdownlist {
|
||||
opacity: 100%;
|
||||
visibility: visible;
|
||||
pointer-events: visible;
|
||||
}
|
||||
|
||||
.customnumberinput {
|
||||
height: 2.2rem;
|
||||
}
|
||||
|
||||
.customnumberinput button {
|
||||
min-width: 2.5rem !important;
|
||||
width: 2.5rem !important;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.customnumberinput-minus {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.customnumberinput-plus {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.customnumberinput input[type="number"] {
|
||||
height: 100%;
|
||||
width: 4rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: var(--bg-color2);
|
||||
border-radius: 0 !important;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
input[type="number"]::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
input[type="text"], input[type="password"], input[type="number"] {
|
||||
background: var(--glass-bg-color2);
|
||||
outline: none;
|
||||
padding: .4rem .6rem;
|
||||
font-size: .9rem;
|
||||
color: var(--color);
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: var(--glass-corner-radius);
|
||||
}
|
||||
/**** OTHER CLASSES ****/
|
||||
.centeringflex {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.horizontalbuttonlist {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.horizontalbuttonlist > .button, .horizontalbuttonlist > button, .horizontalbuttonlist > div {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
.errortext {
|
||||
margin-top: 1rem;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.nodisplay {
|
||||
display: none !important;
|
||||
}
|
||||
.heading {
|
||||
|
||||
/* Login */
|
||||
|
||||
.userlist {
|
||||
width: 60%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.userlist > li {
|
||||
margin-bottom: .5rem;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.userlist > li > img {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.userlist > li > div {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
padding: .8rem 1.1rem;
|
||||
}
|
||||
|
||||
.loginform {
|
||||
gap: 1rem;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.loginform > .buttons {
|
||||
margin-top: 0;
|
||||
}
|
||||
/* MISC / GENERAL */
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
|
||||
/* Drinks List */
|
||||
|
||||
.drinks-list {
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
padding: 0;
|
||||
width: 60%;
|
||||
}
|
||||
/* MOBILE OPTIMIZATIONS */
|
||||
@media only screen and (max-width: 700px) {
|
||||
main {
|
||||
margin-top: 2rem;
|
||||
|
||||
.drinks-list > li {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.drinks-list > li > .button {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding: .8rem 1.1rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.userlist {
|
||||
width: 75%;
|
||||
}
|
||||
.globalmessage span {
|
||||
.drinks-list {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.userlist {
|
||||
width: 90%;
|
||||
}
|
||||
.userpanel {
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
.userpanel > .horizontalbuttonlist {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-top: .5rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.userpanel > .horizontalbuttonlist > .button,
|
||||
.userpanel > .horizontalbuttonlist > .dropdownmenu {
|
||||
margin: 0.25rem;
|
||||
.drinks-list {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.userpanel {
|
||||
flex-direction: column;
|
||||
}
|
||||
.userlist {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.userlist > li {
|
||||
width: 100%;
|
||||
}
|
||||
.userlist > li > div {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
.loginform {
|
||||
flex-direction: column;
|
||||
}
|
||||
.drinks-list {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
.simple-keyboard.darkTheme {
|
||||
width: 50rem;
|
||||
max-width: 100%;
|
||||
margin-top: 2rem;
|
||||
background: transparent;
|
||||
}
|
||||
.simple-keyboard.darkTheme .hg-button {
|
||||
|
|
@ -12,13 +11,13 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--glass-bg);
|
||||
background: var(--bg-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--glass-border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.simple-keyboard.darkTheme .hg-button:active,
|
||||
.simple-keyboard.darkTheme .hg-button:hover {
|
||||
color: white;
|
||||
background: var(--glass-bg-hover);
|
||||
background: var(--bg-hover-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
.maincontainer {
|
||||
min-width: 70vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
}
|
||||
.tablescontainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
width: 95%;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.statisticstable {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.statisticstable h1 {
|
||||
margin-top: 0;
|
||||
font-size: 1.2rem;
|
||||
text-align: left;
|
||||
min-width: 10rem;
|
||||
text-align: center;
|
||||
}
|
||||
.statisticstable table {
|
||||
min-width: 20vw;
|
||||
width: fit-content;
|
||||
}
|
||||
.statisticstable th:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
.statisticstable td:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
@media only screen and (max-width: 700px) {
|
||||
.statisticstable h1 {
|
||||
min-width: 90vw;
|
||||
}
|
||||
.statisticstable table {
|
||||
min-width: 80vw;
|
||||
}
|
||||
.statisticstable {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
{
|
||||
|
||||
(() => {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// get all customnumberinput Elements
|
||||
let customNumberInputElements = document.getElementsByClassName("customnumberinput");
|
||||
|
|
@ -8,16 +7,11 @@
|
|||
// number input
|
||||
let numberFieldElement = element.getElementsByClassName("customnumberinput-field")[0];
|
||||
// minus button
|
||||
element.getElementsByClassName("customnumberinput-minus")[0].addEventListener("click", () => {
|
||||
alterCustomNumberField(numberFieldElement, -1)
|
||||
});
|
||||
element.getElementsByClassName("customnumberinput-minus")[0].addEventListener("click", () => alterCustomNumberField(numberFieldElement, -1));
|
||||
// plus button
|
||||
element.getElementsByClassName("customnumberinput-plus")[0].addEventListener("click", () => {
|
||||
alterCustomNumberField(numberFieldElement, +1)
|
||||
});
|
||||
element.getElementsByClassName("customnumberinput-plus")[0].addEventListener("click", () => alterCustomNumberField(numberFieldElement, +1));
|
||||
})
|
||||
})
|
||||
|
||||
function alterCustomNumberField(numberFieldElement, n) {
|
||||
numberFieldElement.value = Math.min(
|
||||
Math.max(
|
||||
|
|
@ -26,5 +20,4 @@
|
|||
numberFieldElement.max || Number.MAX_VALUE
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,28 +1,18 @@
|
|||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
// elements
|
||||
|
||||
let depositForm = document.getElementById("depositform");
|
||||
let statusInfo = document.getElementById("statusinfo");
|
||||
let depositSubmitButton = document.getElementById("depositsubmitbtn");
|
||||
|
||||
// event listener for deposit form
|
||||
// this implements a custom submit method
|
||||
|
||||
depositForm.addEventListener("submit", (event) => {
|
||||
|
||||
depositSubmitButton.disabled = true;
|
||||
|
||||
event.preventDefault(); // Don't do the default submit action!
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
let formData = new FormData(depositForm);
|
||||
|
||||
xhr.addEventListener("load", (event) => {
|
||||
|
||||
status_ = event.target.status;
|
||||
response_ = event.target.responseText;
|
||||
|
||||
if (status_ == 200 && response_ == "success") {
|
||||
statusInfo.innerText = "Success. Redirecting soon.";
|
||||
window.location.replace("/");
|
||||
|
|
@ -32,18 +22,13 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
statusInfo.innerText = "An error occured. Redirecting in 5 seconds...";
|
||||
window.setTimeout(() => { window.location.replace("/") }, 5000);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
xhr.addEventListener("error", (event) => {
|
||||
statusInfo.classList.add("errortext");
|
||||
statusInfo.innerText = "An error occured. Redirecting in 5 seconds...";
|
||||
window.setTimeout(() => { window.location.replace("/") }, 5000);
|
||||
})
|
||||
|
||||
xhr.open("POST", "/api/deposit");
|
||||
xhr.send(formData);
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
(() => {
|
||||
|
||||
// Define variables
|
||||
let usernameInputElement;
|
||||
let passwordInputElement;
|
||||
|
|
@ -9,14 +8,13 @@
|
|||
let userlistButtons;
|
||||
let pinpadButtons;
|
||||
let userlistContainerElement;
|
||||
|
||||
// Add event listeners after DOM Content loaded
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// elements
|
||||
usernameInputElement = document.getElementById("id_username");
|
||||
passwordInputElement = document.getElementById("id_password");
|
||||
submitButton = document.getElementById("submit_login");
|
||||
passwordOverlayElement = document.getElementById("passwordoverlaycontainer");
|
||||
passwordOverlayElement = document.getElementById("passwordoverlay-container");
|
||||
pwOverlayCancelButton = document.getElementById("pwocancel");
|
||||
userlistContainerElement = document.getElementById("userlistcontainer");
|
||||
userlistButtons = document.getElementsByClassName("userlistbutton");
|
||||
|
|
@ -32,21 +30,15 @@
|
|||
hide_password_overlay();
|
||||
});
|
||||
})
|
||||
|
||||
function set_username(username) {
|
||||
usernameInputElement.value = username;
|
||||
}
|
||||
|
||||
function show_password_overlay() {
|
||||
window.scrollTo(0, 0);
|
||||
passwordOverlayElement.classList.remove("nodisplay");
|
||||
userlistContainerElement.classList.add("nodisplay");
|
||||
}
|
||||
|
||||
function hide_password_overlay() {
|
||||
passwordOverlayElement.classList.add("nodisplay");
|
||||
userlistContainerElement.classList.remove("nodisplay");
|
||||
passwordInputElement.value = "";
|
||||
}
|
||||
|
||||
})()
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,21 +1,14 @@
|
|||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
let dropdownmenuElement = document.getElementById("dropdownmenu");
|
||||
let dropdownmenuButtonElement = document.getElementById("dropdownmenu-button");
|
||||
|
||||
if (dropdownmenuButtonElement != null) {
|
||||
|
||||
dropdownmenuButtonElement.addEventListener("click", () => {
|
||||
|
||||
if (dropdownmenuElement.classList.contains("dropdownvisible")) {
|
||||
dropdownmenuElement.classList.remove("dropdownvisible");
|
||||
}
|
||||
else {
|
||||
dropdownmenuElement.classList.add("dropdownvisible");
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,61 +1,39 @@
|
|||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
// elements
|
||||
|
||||
let orderNumberofdrinksInput = document.getElementById("numberofdrinks");
|
||||
let orderNumberofdrinksBtnA = document.getElementById("numberofdrinks-btn-minus");
|
||||
let orderNumberofdrinksBtnB = document.getElementById("numberofdrinks-btn-plus");
|
||||
let orderSumElement = document.getElementById("ordercalculatedsum");
|
||||
|
||||
let orderFormElement = document.getElementById("orderform");
|
||||
let statusInfoElement = document.getElementById("statusinfo");
|
||||
let orderSubmitButton = document.getElementById("ordersubmitbtn");
|
||||
|
||||
|
||||
// calculate & display sum
|
||||
|
||||
let orderPricePerDrink = parseFloat(document.getElementById("priceperdrink").dataset.drinkPrice);
|
||||
|
||||
function calculateAndDisplaySum() {
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
let numberOfDrinks = parseFloat(orderNumberofdrinksInput.value);
|
||||
if (isNaN(numberOfDrinks)) {
|
||||
numberOfDrinks = 1;
|
||||
}
|
||||
let calculated_sum = orderPricePerDrink * numberOfDrinks;
|
||||
orderSumElement.innerText = new Intl.NumberFormat(undefined, {minimumFractionDigits: 2}).format(calculated_sum);
|
||||
|
||||
}, 25);
|
||||
|
||||
}
|
||||
|
||||
orderNumberofdrinksInput.addEventListener("input", calculateAndDisplaySum);
|
||||
orderNumberofdrinksBtnA.addEventListener("click", calculateAndDisplaySum);
|
||||
orderNumberofdrinksBtnB.addEventListener("click", calculateAndDisplaySum);
|
||||
|
||||
|
||||
// custom submit method
|
||||
|
||||
orderFormElement.addEventListener("submit", (event) => {
|
||||
|
||||
orderSubmitButton.disabled = true;
|
||||
|
||||
event.preventDefault(); // Don't do the default submit action!
|
||||
|
||||
if (isNaN(parseFloat(orderNumberofdrinksInput.value))) {
|
||||
orderNumberofdrinksInput.value = 1;
|
||||
}
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
let formData = new FormData(orderFormElement);
|
||||
|
||||
xhr.addEventListener("load", (event) => {
|
||||
|
||||
status_ = event.target.status;
|
||||
response_ = event.target.responseText;
|
||||
|
||||
if (status_ == 200 && response_ == "success") {
|
||||
statusInfoElement.innerText = "Success.";
|
||||
window.location.replace("/");
|
||||
|
|
@ -65,18 +43,13 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
statusInfoElement.innerText = "An error occured.";
|
||||
window.setTimeout(() => { window.location.reload() }, 5000);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
xhr.addEventListener("error", (event) => {
|
||||
statusInfoElement.classList.add("errortext");
|
||||
statusInfoElement.innerText = "An error occured.";
|
||||
window.setTimeout(() => { window.location.reload() }, 5000);
|
||||
})
|
||||
|
||||
xhr.open("POST", "/api/order-drink");
|
||||
xhr.send(formData);
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@
|
|||
}
|
||||
// Check if on smartphone
|
||||
let onSmartphone = navigator.userAgent.toLowerCase().match(/android|webos|iphone|ipod|blackberry/i) != null;
|
||||
console.log(onSmartphone)
|
||||
// Configure keyboard when all DOM content has loaded
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
if (!onSmartphone) {
|
||||
|
|
@ -97,4 +96,4 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
})()
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,35 +1,23 @@
|
|||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
// elements
|
||||
|
||||
let supplyDescriptionElement = document.getElementById("supplydescription");
|
||||
let supplyPriceElement = document.getElementById("supplyprice");
|
||||
|
||||
let supplyFormElement = document.getElementById("supplyform");
|
||||
let statusInfoElement = document.getElementById("statusinfo");
|
||||
let supplySubmitButton = document.getElementById("supplysubmitbtn");
|
||||
|
||||
// custom submit method
|
||||
|
||||
supplyFormElement.addEventListener("submit", (event) => {
|
||||
|
||||
supplySubmitButton.disabled = true;
|
||||
|
||||
event.preventDefault(); // Don't do the default submit action!
|
||||
|
||||
if (isNaN(parseFloat(supplyPriceElement.value)) || supplyDescriptionElement.value == "") {
|
||||
statusInfoElement.innerText = "Please enter a description and price."
|
||||
supplySubmitButton.disabled = false;
|
||||
}
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
let formData = new FormData(supplyFormElement);
|
||||
|
||||
xhr.addEventListener("load", (event) => {
|
||||
|
||||
status_ = event.target.status;
|
||||
response_ = event.target.responseText;
|
||||
|
||||
if (status_ == 200 && response_ == "success") {
|
||||
statusInfoElement.innerText = "Success.";
|
||||
window.location.replace("/");
|
||||
|
|
@ -39,18 +27,13 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
statusInfoElement.innerText = "An error occured.";
|
||||
window.setTimeout(() => { window.location.reload() }, 5000);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
xhr.addEventListener("error", (event) => {
|
||||
statusInfoElement.classList.add("errortext");
|
||||
statusInfoElement.innerText = "An error occured.";
|
||||
window.setTimeout(() => { window.location.reload() }, 5000);
|
||||
})
|
||||
|
||||
xhr.open("POST", "/api/supply");
|
||||
xhr.send(formData);
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
{% load i18n %}
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
|
@ -13,44 +10,27 @@
|
|||
<title>{% block title %}{% endblock %}</title>
|
||||
{% block headAdditional %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="baselayout">
|
||||
|
||||
<div class="baselayout flex flex-column">
|
||||
{% include "globalmessage.html" %}
|
||||
|
||||
{% if user.is_authenticated %}
|
||||
|
||||
{% include "userpanel.html" %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
<main>
|
||||
|
||||
<main class="flex flex-column">
|
||||
{% if user.is_authenticated or "accounts/login/" in request.path or "accounts/logout/" in request.path or "admin/logout/" in request.path %}
|
||||
|
||||
<div class="content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<div class="content flex flex-column">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
<div class="centeringflex">
|
||||
{% translate "An error occured. Please log out and log in again." %}
|
||||
<br>
|
||||
<a href="/accounts/logout">log out</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-center">
|
||||
{% translate "An error occured. Please log out and log in again." %}
|
||||
<br>
|
||||
<a href="/accounts/logout">log out</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</main>
|
||||
|
||||
{% include "footer.html" %}
|
||||
|
||||
</div>
|
||||
|
||||
<script src="/static/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,45 +3,34 @@
|
|||
{% load i18n %}
|
||||
|
||||
{% block title %}
|
||||
{% translate "Drinks - Deposit" %}
|
||||
{% translate "Drinks - Deposit" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block headAdditional %}
|
||||
<link rel="stylesheet" href="/static/css/appform.css">
|
||||
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
|
||||
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
|
||||
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
|
||||
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
<form id="depositform" class="appform">
|
||||
{% csrf_token %}
|
||||
|
||||
<h1 class="formheading">{% translate "Deposit" %}</h1>
|
||||
|
||||
<div class="forminput">
|
||||
<span>{% translate "Amount" %} {{ currency_suffix }}:</span>
|
||||
<span>
|
||||
<input type="number" name="depositamount" id="depositamount" class="keyboard-input" max="9999.99" min="1.00" step="0.01" autofocus>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="statusinfo"></div>
|
||||
|
||||
<div class="formbuttons">
|
||||
<a href="/" class="button">{% translate "cancel" %}</a>
|
||||
<input type="submit" id="depositsubmitbtn" class="button" value='{% translate "confirm" %}'>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<form id="depositform" class="flex flex-column flex-center appform gap-1rem">
|
||||
{% csrf_token %}
|
||||
<h1 class="formheading">{% translate "Deposit" %}</h1>
|
||||
<div class="flex forminput">
|
||||
<span>{% translate "Amount" %} {{ currency_suffix }}:</span>
|
||||
<span>
|
||||
<input type="number" name="depositamount" id="depositamount" class="keyboard-input" max="9999.99" min="1.00" step="0.01" autofocus>
|
||||
</span>
|
||||
</div>
|
||||
<div id="statusinfo"></div>
|
||||
<!-- Virtual Keyboard -->
|
||||
<div id="keyboard" class="simple-keyboard" data-layout="numeric"></div>
|
||||
<script src="/static/js/simple-keyboard.js"></script>
|
||||
<script src="/static/js/simple-keyboard_configure.js"></script>
|
||||
|
||||
<script src="/static/js/deposit.js"></script>
|
||||
<script src="/static/js/autoreload.js"></script>
|
||||
|
||||
<div class="flex-center buttons">
|
||||
<a href="/" class="button">{% translate "cancel" %}</a>
|
||||
<input type="submit" id="depositsubmitbtn" class="button" value='{% translate "confirm" %}'>
|
||||
</div>
|
||||
</form>
|
||||
<script src="/static/js/deposit.js"></script>
|
||||
<script src="/static/js/autoreload.js"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
{% load i18n %}
|
||||
|
||||
<footer class="footer-container">
|
||||
<div class="footer">
|
||||
<div class="flex flex-row flex-center flex-wrap footer">
|
||||
<div>Version {{ app_version }}</div>
|
||||
<div>Copyright (C) 2021, Julian Müller (ChaoticByte)</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% if global_message != "" %}
|
||||
<div class="globalmessage">
|
||||
<div class="flex flex-center globalmessage">
|
||||
<div>{{ global_message }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -3,35 +3,26 @@
|
|||
{% load i18n %}
|
||||
|
||||
{% block title %}
|
||||
{% translate "Drinks - History" %}
|
||||
{% translate "Drinks - History" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block headAdditional %}
|
||||
<link rel="stylesheet" href="/static/css/history.css">
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h1 class="heading">{% translate "History" %}</h1>
|
||||
|
||||
{% if history %}
|
||||
<table class="history">
|
||||
<tr>
|
||||
<th>{% translate "last 30 actions" %}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
{% for h in history %}
|
||||
<tr>
|
||||
<td>{{ h.0 }}</td>
|
||||
<td class="historydate">{{ h.1 }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
{% else %}
|
||||
{% translate "No history." %}
|
||||
{% endif %}
|
||||
|
||||
<script src="/static/js/autoreload.js"></script>
|
||||
|
||||
<h1>{% translate "History" %}</h1>
|
||||
{% if history %}
|
||||
<table class="history">
|
||||
<tr>
|
||||
<th>{% translate "last 30 actions" %}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
{% for h in history %}
|
||||
<tr>
|
||||
<td>{{ h.0 }}</td>
|
||||
<td class="historydate">{{ h.1 }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
{% else %}
|
||||
{% translate "No history." %}
|
||||
{% endif %}
|
||||
<script src="/static/js/autoreload.js"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -3,45 +3,33 @@
|
|||
{% load i18n %}
|
||||
|
||||
{% block title %}
|
||||
{% translate "Drinks - Home" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block headAdditional %}
|
||||
<link rel="stylesheet" href="/static/css/index.css">
|
||||
{% translate "Drinks - Home" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h1 class="heading">{% translate "Available Drinks" %}</h1>
|
||||
|
||||
{% if available_drinks %}
|
||||
|
||||
<ul class="availabledrinkslist">
|
||||
{% for drink in available_drinks %}
|
||||
{% if drink.do_not_count %}
|
||||
<li>
|
||||
<a class="button" href="/order/{{ drink.id }}">
|
||||
<span>{{ drink }}</span>
|
||||
<span>{% translate "available" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li>
|
||||
<a class="button" href="/order/{{ drink.id }}">
|
||||
<span>{{ drink }}</span>
|
||||
<span>{{ drink.available }} {% translate "available" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<h1>{% translate "Available Drinks" %}</h1>
|
||||
{% if available_drinks %}
|
||||
<ul class="flex flex-row flex-wrap gap-1rem drinks-list">
|
||||
{% for drink in available_drinks %}
|
||||
{% if drink.do_not_count %}
|
||||
<li class="flex">
|
||||
<a class="button flex flex-row flex-center gap-1rem" href="/order/{{ drink.id }}">
|
||||
<span>{{ drink }}</span>
|
||||
<span>{% translate "available" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
|
||||
{% translate "No drinks available." %}
|
||||
|
||||
<li class="flex">
|
||||
<a class="button flex flex-row flex-center gap-1rem" href="/order/{{ drink.id }}">
|
||||
<span>{{ drink }}</span>
|
||||
<span>{{ drink.available }} {% translate "available" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<script src="/static/js/autoreload.js"></script>
|
||||
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
{% translate "No drinks available." %}
|
||||
{% endif %}
|
||||
<script src="/static/js/autoreload.js"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -7,94 +7,68 @@
|
|||
{% translate "Drinks - Order" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block headAdditional %}
|
||||
<link rel="stylesheet" href="/static/css/appform.css">
|
||||
<link rel="stylesheet" href="/static/css/custom_number_input.css">
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% if drink and drink.available > 0 and not drink.deleted %}
|
||||
|
||||
{% if user.balance > 0 or user.allow_order_with_negative_balance %}
|
||||
|
||||
<form id="orderform" class="appform">
|
||||
{% csrf_token %}
|
||||
|
||||
<h1 class="formheading">{% translate "Order" %}</h1>
|
||||
|
||||
<div class="forminfo">
|
||||
<span>{% translate "Drink" %}:</span>
|
||||
<span>{{ drink.product_name }}</span>
|
||||
</div>
|
||||
<div class="forminfo">
|
||||
<span>{% translate "Price per Item" %} ({{ currency_suffix }}):</span>
|
||||
<span id="priceperdrink" data-drink-price="{% localize off %}{{ drink.price }}{% endlocalize %}">
|
||||
{{ drink.price }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{% if not drink.do_not_count %}
|
||||
<div class="forminfo">
|
||||
<span>{% translate "Available" %}:</span>
|
||||
<span>{{ drink.available }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="forminfo">
|
||||
<span>{% translate "Sum" %} ({{ currency_suffix }}):</span>
|
||||
<span id="ordercalculatedsum">{{ drink.price }}</span>
|
||||
</div>
|
||||
|
||||
<div class="forminput">
|
||||
<span>{% translate "Count" %}:</span>
|
||||
<span class="customnumberinput">
|
||||
<button type="button" class="customnumberinput-minus" id="numberofdrinks-btn-minus">-</button>
|
||||
{% if drink.do_not_count %}
|
||||
<input type="number" class="customnumberinput-field" name="numberofdrinks" id="numberofdrinks"
|
||||
min="1" max="100" value="1">
|
||||
{% else %}
|
||||
<input type="number" class="customnumberinput-field" name="numberofdrinks" id="numberofdrinks"
|
||||
max="{{ drink.available }}" min="1" max="100" value="1">
|
||||
{% endif %}
|
||||
<button type="button" class="customnumberinput-plus" id="numberofdrinks-btn-plus">+</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="statusinfo"></div>
|
||||
|
||||
<input type="hidden" name="drinkid" id="drinkid" value="{{ drink.id }}">
|
||||
|
||||
<div class="formbuttons">
|
||||
<a href="/" class="button">{% translate "cancel" %}</a>
|
||||
<input type="submit" id="ordersubmitbtn" class="button" value='{% translate "order" %}'>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<script src="/static/js/order.js"></script>
|
||||
<script src="/static/js/custom_number_input.js"></script>
|
||||
|
||||
{% else %}
|
||||
|
||||
<div class="centeringflex">
|
||||
<p>{% translate "Your balance is too low to order a drink." %}</p>
|
||||
<a href="/">{% translate "back" %}</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column flex-center">
|
||||
{% if drink and drink.available > 0 and not drink.deleted %}
|
||||
{% if user.balance > 0 or user.allow_order_with_negative_balance %}
|
||||
<form id="orderform" class="flex flex-column flex-center appform gap-1rem">
|
||||
{% csrf_token %}
|
||||
<h1 class="formheading">{% translate "Order" %}</h1>
|
||||
<div class="forminfo">
|
||||
<span>{% translate "Drink" %}:</span>
|
||||
<span>{{ drink.product_name }}</span>
|
||||
</div>
|
||||
<div class="forminfo">
|
||||
<span>{% translate "Price per Item" %} ({{ currency_suffix }}):</span>
|
||||
<span id="priceperdrink" data-drink-price="{% localize off %}{{ drink.price }}{% endlocalize %}">
|
||||
{{ drink.price }}
|
||||
</span>
|
||||
</div>
|
||||
{% if not drink.do_not_count %}
|
||||
<div class="forminfo">
|
||||
<span>{% translate "Available" %}:</span>
|
||||
<span>{{ drink.available }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
|
||||
<div class="centeringflex">
|
||||
<div class="forminfo">
|
||||
<span>{% translate "Sum" %} ({{ currency_suffix }}):</span>
|
||||
<span id="ordercalculatedsum">{{ drink.price }}</span>
|
||||
</div>
|
||||
<div class="flex forminput">
|
||||
<span>{% translate "Count" %}:</span>
|
||||
<span class="flex flex-row customnumberinput">
|
||||
<button type="button" class="customnumberinput-minus" id="numberofdrinks-btn-minus">-</button>
|
||||
{% if drink.do_not_count %}
|
||||
<input type="number" class="customnumberinput-field" name="numberofdrinks" id="numberofdrinks"
|
||||
min="1" max="100" value="1">
|
||||
{% else %}
|
||||
<input type="number" class="customnumberinput-field" name="numberofdrinks" id="numberofdrinks"
|
||||
max="{{ drink.available }}" min="1" max="100" value="1">
|
||||
{% endif %}
|
||||
<button type="button" class="customnumberinput-plus" id="numberofdrinks-btn-plus">+</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="statusinfo"></div>
|
||||
<input type="hidden" name="drinkid" id="drinkid" value="{{ drink.id }}">
|
||||
<div class="buttons">
|
||||
<a href="/" class="button">{% translate "cancel" %}</a>
|
||||
<input type="submit" id="ordersubmitbtn" class="button" value='{% translate "order" %}'>
|
||||
</div>
|
||||
</form>
|
||||
<script src="/static/js/order.js"></script>
|
||||
<script src="/static/js/custom_number_input.js"></script>
|
||||
{% else %}
|
||||
<div class="flex flex-center">
|
||||
<p>{% translate "Your balance is too low to order a drink." %}</p>
|
||||
<a href="/">{% translate "back" %}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="flex flex-center">
|
||||
<p>{% translate "This drink is not available." %}</p>
|
||||
<a href="/">{% translate "back" %}</a>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
<script src="/static/js/autoreload.js"></script>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,24 +1,19 @@
|
|||
|
||||
{% extends "baselayout.html" %}
|
||||
|
||||
{% load i18n %}
|
||||
|
||||
{% block title %}
|
||||
{% translate "Drinks - Logged Out" %}
|
||||
{% translate "Drinks - Logged Out" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block headAdditional %}
|
||||
<link rel="stylesheet" href="/static/css/login.css">
|
||||
<link rel="stylesheet" href="/static/css/login.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="centeringflex">
|
||||
{% translate "Logged out! You will be redirected shortly." %}
|
||||
<br><br>
|
||||
<a href="/">{% translate "Click here if automatic redirection does not work." %}</a>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/logged_out.js"></script>
|
||||
|
||||
<div class="flex flex-center flex-column gap-1rem">
|
||||
{% translate "Logged out! You will be redirected shortly." %}
|
||||
<a href="/">{% translate "Click here if automatic redirection does not work." %}</a>
|
||||
</div>
|
||||
<script src="/static/js/logged_out.js"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -5,66 +5,56 @@
|
|||
{% load static %}
|
||||
|
||||
{% block title %}
|
||||
{% translate "Drinks - Login" %}
|
||||
{% translate "Drinks - Login" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block headAdditional %}
|
||||
<link rel="stylesheet" href="/static/css/login.css">
|
||||
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
|
||||
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
|
||||
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
|
||||
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% if error_message %}
|
||||
<p class="errortext">{{ error_message }}</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="passwordoverlaycontainer nodisplay" id="passwordoverlaycontainer">
|
||||
<div class="passwordoverlay">
|
||||
<form method="post" action="{% url 'login' %}" class="loginform">
|
||||
{% csrf_token %}
|
||||
<h1>{% translate "Log in" %}</h1>
|
||||
<input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" maxlength="150" required="" id="id_username">
|
||||
<input type="password" name="password" autocomplete="current-password" required="" id="id_password" class="keyboard-input" placeholder='{% translate "Password/PIN" %}'>
|
||||
<div class="horizontalbuttonlist">
|
||||
<button type="button" id="pwocancel">{% translate "cancel" %}</button>
|
||||
<input class="button" id="submit_login" type="submit" value='{% translate "login" %}' />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Virtual Keyboard -->
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
<div id="keyboard" class="simple-keyboard" data-layout="{{LANGUAGE_CODE}}"></div>
|
||||
<script src="/static/js/simple-keyboard.js"></script>
|
||||
<script src="/static/js/simple-keyboard_configure.js"></script>
|
||||
{% if error_message %}
|
||||
<p class="errortext">{{ error_message }}</p>
|
||||
{% endif %}
|
||||
<div class="flex flex-column gap-1rem nodisplay" id="passwordoverlay-container">
|
||||
<div class="passwordoverlay">
|
||||
<h1>{% translate "Log in" %}</h1>
|
||||
<form method="post" action="{% url 'login' %}" class="flex flex-center loginform">
|
||||
{% csrf_token %}
|
||||
<input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" maxlength="150" required="" id="id_username">
|
||||
<input type="password" name="password" autocomplete="current-password" required="" id="id_password" class="keyboard-input" placeholder='{% translate "Password/PIN" %}'>
|
||||
<div class="buttons">
|
||||
<button type="button" id="pwocancel">{% translate "cancel" %}</button>
|
||||
<input class="button" id="submit_login" type="submit" value='{% translate "login" %}' />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Virtual Keyboard -->
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
<div id="keyboard" class="simple-keyboard" data-layout="{{LANGUAGE_CODE}}"></div>
|
||||
<script src="/static/js/simple-keyboard.js"></script>
|
||||
<script src="/static/js/simple-keyboard_configure.js"></script>
|
||||
</div>
|
||||
<div class="flex flex-column flex-center">
|
||||
<h1>{% translate "Choose your account" %}</h1>
|
||||
|
||||
<div class="userlistcontainer" id="userlistcontainer">
|
||||
<ul class="userlist">
|
||||
{% for user_ in user_list %}
|
||||
<li class="userlistbutton button" data-username="{{ user_.username }}">
|
||||
<img src="/profilepictures/{{ user_.profile_picture_filename|urlencode }}">
|
||||
<div>
|
||||
{% if user_.first_name %}
|
||||
|
||||
{% if user_.last_name %}
|
||||
{{ user_.last_name }},
|
||||
{% endif %}
|
||||
|
||||
{{ user_.first_name }}
|
||||
|
||||
{% else %}
|
||||
{{ user_.username }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/login.js"></script>
|
||||
|
||||
<ul class="flex flex-center flex-wrap userlist">
|
||||
{% for user_ in user_list %}
|
||||
<li class="flex flex-center userlistbutton button" data-username="{{ user_.username }}">
|
||||
<img src="/profilepictures/{{ user_.profile_picture_filename|urlencode }}">
|
||||
<div class="flex flex-center">
|
||||
{% if user_.first_name %}
|
||||
{% if user_.last_name %}
|
||||
{{ user_.last_name }},
|
||||
{% endif %}
|
||||
{{ user_.first_name }}
|
||||
{% else %}
|
||||
{{ user_.username }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<script src="/static/js/login.js"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -3,146 +3,62 @@
|
|||
{% load i18n %}
|
||||
|
||||
{% block title %}
|
||||
{% translate "Drinks - Statistics" %}
|
||||
{% translate "Drinks - Statistics" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block headAdditional %}
|
||||
<link rel="stylesheet" href="/static/css/statistics.css">
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h1 class="heading">{% translate "Statistics" %}</h1>
|
||||
|
||||
<div class="maincontainer">
|
||||
|
||||
<div class="tablescontainer">
|
||||
|
||||
<div id="noyopd" class="statisticstable">
|
||||
<h1>{% translate "Your orders per drink" %}</h1>
|
||||
{% if noyopd %}
|
||||
<table>
|
||||
<tr>
|
||||
<th>{% translate "drink" %}</th>
|
||||
<th>{% translate "count" %}</th>
|
||||
</tr>
|
||||
{% for row in noyopd %}
|
||||
<tr>
|
||||
<td>{{ row.0 }}</td>
|
||||
<td>{{ row.1 }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
{% else %}
|
||||
<div>{% translate "No history." %}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="noaopd" class="statisticstable">
|
||||
<h1>{% translate "All orders per drink" %}</h1>
|
||||
{% if noaopd %}
|
||||
<table>
|
||||
<tr>
|
||||
<th>{% translate "drink" %}</th>
|
||||
<th>{% translate "count" %}</th>
|
||||
</tr>
|
||||
{% for row in noaopd %}
|
||||
<tr>
|
||||
<td>{{ row.0 }}</td>
|
||||
<td>{{ row.1 }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
{% else %}
|
||||
<div>{% translate "No history." %}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="yopml12m" class="statisticstable">
|
||||
<h1>{% translate "Your orders per month (last 12 months)" %}</h1>
|
||||
{% if yopml12m %}
|
||||
<table>
|
||||
<tr>
|
||||
<th>{% translate "month" %}</th>
|
||||
<th>{% translate "count" %}</th>
|
||||
</tr>
|
||||
{% for row in yopml12m %}
|
||||
<tr>
|
||||
<td>{{ row.0 }}</td>
|
||||
<td>{{ row.1 }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
{% else %}
|
||||
<div>{% translate "No history." %}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="aopml12m" class="statisticstable">
|
||||
<h1>{% translate "All orders per month (last 12 months)" %}</h1>
|
||||
{% if aopml12m %}
|
||||
<table>
|
||||
<tr>
|
||||
<th>{% translate "month" %}</th>
|
||||
<th>{% translate "count" %}</th>
|
||||
</tr>
|
||||
{% for row in aopml12m %}
|
||||
<tr>
|
||||
<td>{{ row.0 }}</td>
|
||||
<td>{{ row.1 }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
{% else %}
|
||||
<div>{% translate "No history." %}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="yopwd" class="statisticstable">
|
||||
<h1>{% translate "Your orders per weekday" %}</h1>
|
||||
{% if yopwd %}
|
||||
<table>
|
||||
<tr>
|
||||
<th>{% translate "day" %}</th>
|
||||
<th>{% translate "count" %}</th>
|
||||
</tr>
|
||||
{% for row in yopwd %}
|
||||
<tr>
|
||||
<td>{{ row.0 }}</td>
|
||||
<td>{{ row.1 }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
{% else %}
|
||||
<div>{% translate "No history." %}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="aopwd" class="statisticstable">
|
||||
<h1>{% translate "All orders per weekday" %}</h1>
|
||||
{% if aopwd %}
|
||||
<table>
|
||||
<tr>
|
||||
<th>{% translate "day" %}</th>
|
||||
<th>{% translate "count" %}</th>
|
||||
</tr>
|
||||
{% for row in aopwd %}
|
||||
<tr>
|
||||
<td>{{ row.0 }}</td>
|
||||
<td>{{ row.1 }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
{% else %}
|
||||
<div>{% translate "No history." %}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>{% translate "Statistics" %}</h1>
|
||||
<div>
|
||||
<div class="flex flex-column flex-center">
|
||||
<h3>{% translate "Orders per drink" %}</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>{% translate "drink" %}</th>
|
||||
<th>{% translate "you" %}</th>
|
||||
<th>{% translate "all" %}</th>
|
||||
</tr>
|
||||
{% for key, values in orders_per_drink.items %}
|
||||
<tr>
|
||||
<td>{{ key }}</td>
|
||||
<td>{{ values.a|default:"0" }}</td>
|
||||
<td>{{ values.b|default:"0" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/autoreload.js"></script>
|
||||
|
||||
<div class="flex flex-column flex-center">
|
||||
<h3>{% translate "Orders per month (last 12 months)" %}</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>{% translate "month" %}</th>
|
||||
<th>{% translate "you" %}</th>
|
||||
<th>{% translate "all" %}</th>
|
||||
</tr>
|
||||
{% for key, values in orders_per_month.items %}
|
||||
<tr>
|
||||
<td>{{ key }}</td>
|
||||
<td>{{ values.a|default:"0" }}</td>
|
||||
<td>{{ values.b|default:"0" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex flex-column flex-center">
|
||||
<h3>{% translate "Orders per weekday" %}</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>{% translate "day" %}</th>
|
||||
<th>{% translate "you" %}</th>
|
||||
<th>{% translate "all" %}</th>
|
||||
</tr>
|
||||
{% for key, values in orders_per_weekday.items %}
|
||||
<tr>
|
||||
<td>{{ key }}</td>
|
||||
<td>{{ values.a|default:"0" }}</td>
|
||||
<td>{{ values.b|default:"0" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
<script src="/static/js/autoreload.js"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -7,56 +7,36 @@
|
|||
{% translate "Drinks - Supply" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block headAdditional %}
|
||||
<link rel="stylesheet" href="/static/css/appform.css">
|
||||
<link rel="stylesheet" href="/static/css/custom_number_input.css">
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% if user.is_superuser or user.allowed_to_supply %}
|
||||
|
||||
<form id="supplyform" class="appform">
|
||||
{% csrf_token %}
|
||||
|
||||
<h1 class="formheading">{% translate "Supply" %}</h1>
|
||||
|
||||
<div class="forminput">
|
||||
<span>{% translate "Description" %}:</span>
|
||||
<span>
|
||||
<input type="text" name="supplydescription" id="supplydescription" autofocus>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="forminput">
|
||||
<span>{% translate "Price" %} ({{ currency_suffix }}):</span>
|
||||
<span>
|
||||
<input type="number" name="supplyprice" id="supplyprice" max="9999.99" min="1.00" step="0.01">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="statusinfo"></div>
|
||||
|
||||
<div class="formbuttons">
|
||||
<a href="/" class="button">{% translate "cancel" %}</a>
|
||||
<input type="submit" id="supplysubmitbtn" class="button" value='{% translate "submit" %}'>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<script src="/static/js/supply.js"></script>
|
||||
<script src="/static/js/custom_number_input.js"></script>
|
||||
|
||||
{% else %}
|
||||
|
||||
<div class="centeringflex">
|
||||
<p>{% translate "You are not allowed to view this site." %}</p>
|
||||
<a href="/">{% translate "back" %}</a>
|
||||
{% if user.is_superuser or user.allowed_to_supply %}
|
||||
<form id="supplyform" class="flex flex-column flex-center appform gap-1rem">
|
||||
{% csrf_token %}
|
||||
<h1 class="formheading">{% translate "Supply" %}</h1>
|
||||
<div class="flex forminput">
|
||||
<span>{% translate "Description" %}:</span>
|
||||
<span>
|
||||
<input type="text" name="supplydescription" id="supplydescription" autofocus>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
<script src="/static/js/autoreload.js"></script>
|
||||
|
||||
<div class="flex forminput">
|
||||
<span>{% translate "Price" %} ({{ currency_suffix }}):</span>
|
||||
<span>
|
||||
<input type="number" name="supplyprice" id="supplyprice" max="9999.99" min="1.00" step="0.01">
|
||||
</span>
|
||||
</div>
|
||||
<div id="statusinfo"></div>
|
||||
<div class="buttons">
|
||||
<a href="/" class="button">{% translate "cancel" %}</a>
|
||||
<input type="submit" id="supplysubmitbtn" class="button" value='{% translate "submit" %}'>
|
||||
</div>
|
||||
</form>
|
||||
<script src="/static/js/supply.js"></script>
|
||||
<script src="/static/js/custom_number_input.js"></script>
|
||||
{% else %}
|
||||
<div class="flex flex-center">
|
||||
<p>{% translate "You are not allowed to view this site." %}</p>
|
||||
<a href="/">{% translate "back" %}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<script src="/static/js/autoreload.js"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -1,24 +1,24 @@
|
|||
{% load i18n %}
|
||||
{% load static %}
|
||||
|
||||
<div class="userpanel">
|
||||
<div class="flex flex-center userpanel">
|
||||
<div class="userinfo">
|
||||
<img src="/profilepictures/{{ user.profile_picture_filename|urlencode }}">
|
||||
<span>
|
||||
{% if user.first_name != "" %}
|
||||
{% translate "User" %}: {{ user.first_name }} {{ user.last_name }} ({{ user.username }})
|
||||
{% translate "User" %}: {{ user.first_name }} {{ user.last_name }} ({{ user.username }})
|
||||
{% else %}
|
||||
{% translate "User" %}: {{ user.username }}
|
||||
{% translate "User" %}: {{ user.username }}
|
||||
{% endif %}
|
||||
-
|
||||
{% if user.balance < 0.01 %}
|
||||
<span class="userbalancewarn">{% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }}</span>
|
||||
<span class="userbalancewarn">{% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }}</span>
|
||||
{% else %}
|
||||
<span>{% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }}</span>
|
||||
<span>{% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="horizontalbuttonlist">
|
||||
<div class="flex flex-row flex-center flex-wrap userpanel-buttons">
|
||||
<a class="button" href="/">Home</a>
|
||||
<a class="button" href="/deposit">{% translate "Deposit" %}</a>
|
||||
<a class="button" href="/accounts/logout">{% translate "Logout" %}</a>
|
||||
|
|
@ -30,10 +30,10 @@
|
|||
<a class="button dropdownchoice" href="/history">{% translate "History" %}</a>
|
||||
<a class="button dropdownchoice" href="/statistics">{% translate "Statistics" %}</a>
|
||||
{% if user.is_superuser or user.is_staff %}
|
||||
<a class="button dropdownchoice" href="/admin/">Admin Panel</a>
|
||||
<a class="button dropdownchoice" href="/admin/">Admin Panel</a>
|
||||
{% endif %}
|
||||
{% if user.is_superuser or user.allowed_to_supply %}
|
||||
<a class="button dropdownchoice" href="/supply/">{% translate "Supply" %}</a>
|
||||
<a class="button dropdownchoice" href="/supply/">{% translate "Supply" %}</a>
|
||||
{% endif %}
|
||||
<a class="button dropdownchoice" href="/accounts/password_change/">{% translate "Change Password" %}</a>
|
||||
</div>
|
||||
|
|
|
|||
13
app/views.py
13
app/views.py
|
|
@ -17,7 +17,7 @@ from django.shortcuts import render
|
|||
from django.utils.translation import gettext as _
|
||||
from django.utils.formats import decimal
|
||||
|
||||
from . import sql_queries
|
||||
from . import db_queries
|
||||
|
||||
from .models import Drink
|
||||
from .models import Order
|
||||
|
|
@ -62,7 +62,7 @@ def index(request):
|
|||
@login_required
|
||||
def history(request):
|
||||
context = {
|
||||
"history": sql_queries.select_history(request.user, language_code=request.LANGUAGE_CODE),
|
||||
"history": db_queries.select_history(request.user, language_code=request.LANGUAGE_CODE),
|
||||
}
|
||||
return render(request, "history.html", context)
|
||||
|
||||
|
|
@ -85,12 +85,9 @@ def deposit(request):
|
|||
@login_required
|
||||
def statistics(request):
|
||||
context = {
|
||||
"yopml12m": sql_queries.select_yopml12m(request.user),
|
||||
"aopml12m": sql_queries.select_aopml12m(),
|
||||
"yopwd": sql_queries.select_yopwd(request.user),
|
||||
"aopwd": sql_queries.select_aopwd(),
|
||||
"noyopd": sql_queries.select_noyopd(request.user),
|
||||
"noaopd": sql_queries.select_noaopd()
|
||||
"orders_per_month": db_queries.orders_per_month(request.user),
|
||||
"orders_per_weekday": db_queries.orders_per_weekday(request.user),
|
||||
"orders_per_drink": db_queries.orders_per_drink(request.user),
|
||||
}
|
||||
return render(request, "statistics.html", context)
|
||||
|
||||
|
|
|
|||
|
|
@ -119,7 +119,6 @@ if __name__ == "__main__":
|
|||
environment_caddy = os.environ
|
||||
environment_caddy["DATADIR"] = str(data_directory.absolute())
|
||||
environment_caddy["CADDY_HOSTS"] = ", ".join(config["caddy"]["hosts"])
|
||||
print(environment_caddy["CADDY_HOSTS"])
|
||||
environment_caddy["HTTP_PORT"] = str(config["caddy"]["http_port"])
|
||||
environment_caddy["HTTPS_PORT"] = str(config["caddy"]["https_port"])
|
||||
environment_caddy["APPLICATION_PORT"] = str(config["app"]["application_port"])
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue