nikola/pairgoth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

New player dialog and bugfixes

Browse Source
This commit is contained in:
Claude Brisson
2023-12-03 15:05:27 +01:00
parent 188d0e27eb
commit 8510bb69ec
11 changed files with 179 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
view-webapp/src/main/sass/main.scss
View File

@@ -93,7 +93,7 @@
background-color: black; background-color: black;
opacity: 0; opacity: 0;
transition: opacity 0.5s; transition: opacity 0.5s;
z-index: 1000; z-index: 50;
pointer-events: none; pointer-events: none;
} }
@@ -268,17 +268,20 @@
color: red; color: red;
} }
body.initial {
.popup-body {
transition: initial;
}
}
.popup { .popup {
/* display: none; */
position: fixed; position: fixed;
top: 50%; top: 10vh;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, 0px);
max-width: max(90vw, 800px); max-width: max(90vw, 800px);
max-height: 90vh; max-height: 80vh;
margin: auto; margin: auto;
z-index: 100; z-index: 100;
border-radius: 3px;
pointer-events: none; pointer-events: none;
div.close { div.close {
position: absolute; position: absolute;
@@ -293,23 +296,25 @@
} }
} }
.popup-body { .popup-body {
max-height: 70vh; max-height: 80vh;
max-width: 100vw; max-width: 80vw;
transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg);
transition: transform 1s cubic-bezier(0.500, 0.250, 0.300, 1.650);
background-color: white;
padding: 1em;
border-radius: 5px;
overflow-x: hidden;
overflow-y: auto;
.popup-content { .popup-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: stretch;
justify-content: start; justify-content: start;
padding: 2em;
text-align: justify; text-align: justify;
max-height: inherit; max-height: inherit;
overflow: auto;
} }
.popup-footer { .popup-footer {
position: relative; position: relative;
color: rgba(255, 255, 255, 0.6);
padding: 2em;
text-align: justify; text-align: justify;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@@ -319,6 +324,7 @@
} }
} }
&.shown { &.shown {
pointer-events: initial;
transition: transform 1s cubic-bezier(0.500, 0.250, 0.300, 1.650); transition: transform 1s cubic-bezier(0.500, 0.250, 0.300, 1.650);
display: block; display: block;
.popup-body { .popup-body {
@@ -326,4 +332,33 @@
} }
} }
} }
.checkbox {
width: 50px;
height: 26px;
border-radius: 18px;
background-color: #F7D6A3;
display: flex;
align-items: center;
padding-left: 5px;
padding-right: 5px;
cursor: pointer;
.circle {
background-color: #6B5E8A;
transform: translateX(0px);
border-radius: 50%;
width: 20px;
height: 20px;
transition: 300ms;
}
input {
display: none;
}
&.active {
background-color: rgb(218, 114, 80);
.circle {
transform: translateX(20px);
}
}
}
} }

4
view-webapp/src/main/sass/tour.scss
View File

@@ -18,7 +18,7 @@
display: none; display: none;
} }
&.edit { &.edit {
input, select, .edit { input:not(.hidden), select:not(.hidden), .edit:not(.hidden) {
display: initial; display: initial;
} }
.info, #edit { .info, #edit {
@@ -29,7 +29,7 @@
div.field:not(.hidden) { div.field:not(.hidden) {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: space-between; justify-content: space-around;
margin: 1px; margin: 1px;
background-color: #eeeeee; background-color: #eeeeee;
} }

7
view-webapp/src/main/webapp/WEB-INF/layouts/standard.html
View File

@@ -20,7 +20,7 @@
// ]]# // ]]#
</script> </script>
</head> </head>
<body class="vert flex"> <body class="vert flex initial">
#* Debugging code to list all web context properties #* Debugging code to list all web context properties
<blockquote> <blockquote>
#foreach($attr in $application.getAttributeNames()) #foreach($attr in $application.getAttributeNames())
@@ -58,7 +58,7 @@
<div id="success" class="hidden"></div> <div id="success" class="hidden"></div>
<div id="error" class="hidden"></div> <div id="error" class="hidden"></div>
</div> </div>
<div id="backdrop"> <div id="backdrop"></div>
<div id="dimmer"></div> <div id="dimmer"></div>
<script type="text/javascript" src="/lib/store2-2.14.2.min.js"></script> <script type="text/javascript" src="/lib/store2-2.14.2.min.js"></script>
<script type="text/javascript" src="/lib/tablesort-5.4.0.min.js"></script> <script type="text/javascript" src="/lib/tablesort-5.4.0.min.js"></script>
@@ -76,6 +76,7 @@
const locale = '${request.locale}'; const locale = '${request.locale}';
// #[[ // #[[
onLoad(() => { onLoad(() => {
$('body').removeClass('initial');
$('#lang').on('click', e => { $('#lang').on('click', e => {
$('#lang-list').toggleClass('shown'); $('#lang-list').toggleClass('shown');
}); });
@@ -90,10 +91,10 @@
} }
}); });
$('.popup .close').on('click', e => { $('.popup .close').on('click', e => {
console.log('click');
let popup = e.target.closest('.popup'); let popup = e.target.closest('.popup');
if (popup) { if (popup) {
popup.classList.remove('shown'); popup.classList.remove('shown');
$('body').removeClass('dimmed');
} }
}); });

55
view-webapp/src/main/webapp/index.html
View File

@@ -13,58 +13,3 @@
</a> </a>
</div> </div>
#end #end
##
## New Tournament dialog
##
<div id="new-tournament" class="ui fullscreen modal">
<i class="close icon"></i>
<div class="horz flex header">
<span>New tournament</span>
<div class="ui ordered unstackable steps">
<div class="active step">
<div class="content">
<div class="title">Infos</div>
<div class="description">name, place and date</div>
</div>
</div>
<div class="step">
<div class="content">
<div class="title">Type</div>
<div class="description">teams or players, rounds</div>
</div>
</div>
<div class="step">
<div class="content">
<div class="title">Pairing</div>
<div class="description">pairing system</div>
</div>
</div>
</div>
</div>
<div class="scrolling content">
#translate('tournament-form.inc.html')
</div>
<div class="actions">
<button class="ui cancel black floating button">Cancel</button>
<button class="ui next green right labeled icon floating button">
<i class="checkmark icon"></i>
Next
</button>
</div></div>
<script type="text/javascript">
// #[[
onLoad(() => {
$('#new').on('click', e => {
$('#new-tournament').modal(true);
});
/*
new DateRangePicker($('#date-range')[0], {
language: lang
});
*/
$('#new-tournament .tab.segment:first-child').addClass('active');
});
// ]]#
</script>

16
view-webapp/src/main/webapp/js/domhelper.js
View File

@@ -49,7 +49,7 @@ Element.prototype.toggleClass = function(className) {
NodeList.prototype.hasClass = function(className) { NodeList.prototype.hasClass = function(className) {
return this.item(0).classList.contains(className); return this.item(0).classList.contains(className);
} }
Element.prototype.toggleClass = function(className) { Element.prototype.hasClass = function(className) {
this.classList.contains(className); this.classList.contains(className);
} }
Node.prototype.offset = function() { Node.prototype.offset = function() {
@@ -102,3 +102,17 @@ Element.prototype.text = function(txt) {
this.textContent = txt; this.textContent = txt;
} }
} }
NodeList.prototype.item = function (i) {
return this[+i || 0];
};
NodeList.prototype.find = function(selector) {
let result = [];
this.forEach(function (elem, i) {
let partial = elem.find(selector);
result = result.concat([...partial]);
});
return Reflect.construct(Array, result, NodeList);
}
Element.prototype.find = function (selector) {
return this.querySelectorAll(':scope ' + selector);
}

32
view-webapp/src/main/webapp/js/main.js
View File

@@ -136,19 +136,27 @@ function spinner(show) {
else $('#backdrop').removeClass('active'); else $('#backdrop').removeClass('active');
} }
function modal(id) {
$('body').addClass('dimmed');
$(`#${id}.popup`).addClass('shown');
}
onLoad(() => { onLoad(() => {
/* $('button.close').on('click', e => {
document.on('click', e => { let modal = e.target.closest('.popup');
if (!e.target.closest('.modal')) $('.modal').hide(); if (modal) {
}) modal.removeClass('shown');
$('body').removeClass('dimmed');
}
});
$('.checkbox').on('click', e => {
let chk = e.target.closest('.checkbox');
chk.toggleClass('active');
let checkbox = chk.find('input')[0];
checkbox.checked = !checkbox.checked;
});
/* commented for now - do we want this?
$('#dimmer').on('click', e => $('.popup').removeClass('shown');
*/ */
$('i.close.icon').on('click', e => {
let modal = e.target.closest('.modal');
if (modal) modal.modal(false);
});
$('.modal .actions .cancel').on('click', e => {
e.target.closest('.modal').modal(false);
});
$('#dimmer').on('click', e => $('.modal').modal(false));
}); });

2
view-webapp/src/main/webapp/js/tour-information.inc.js
View File

@@ -7,7 +7,7 @@ onLoad(() => {
$('#cancel, #close').on('click', e => { $('#cancel, #close').on('click', e => {
e.preventDefault(); e.preventDefault();
if ($('#tournament-infos').hasClass('edit')) { if ($('#tournament-infos').hasClass('edit') && typeof(tour_id) !== 'undefined') {
$('#tournament-infos').removeClass('edit') $('#tournament-infos').removeClass('edit')
} else { } else {
document.location.href = '/index'; document.location.href = '/index';

9
view-webapp/src/main/webapp/js/tour-registration.inc.js Normal file
View File

@@ -0,0 +1,9 @@
onLoad(() => {
$('input.numeric').imask({
mask: Number,
scale: 0,
min: 0,
max: 4000
});
//$('')
});

2
view-webapp/src/main/webapp/tour-information.inc.html
View File

@@ -1,4 +1,4 @@
<div id="information" class="tab-content"> <div id="information" #if($tour)class="tab-content"#end>
<form id="tournament-infos" class="ui form #if(!$tour)edit#end"> <form id="tournament-infos" class="ui form #if(!$tour)edit#end">
<div class="roundbox"> <div class="roundbox">
<div class="two stackable fields"> <div class="two stackable fields">

85
view-webapp/src/main/webapp/tour-registration.inc.html
View File

@@ -14,31 +14,100 @@ $parts
</div> </div>
<div id="player" class="popup"> <div id="player" class="popup">
<div class="popup-body"> <div class="popup-body">
<div class="close">
<i class="ui circular times icon"></i>
</div>
<div class="popup-content"> <div class="popup-content">
<form id="player-form" class="edit"> <form id="player-form" class="ui form edit">
<div class="two fields"> <div class="four stackable fields">
<div class="field"> <div class="twelve wide field">
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
</div>
<div class="two wide field">
<div class="active checkbox">
<div class="circle"></div>
<input type="checkbox" class="hidden" checked/>
</div>
AGA
</div>
<div class="two wide field">
<div class="active checkbox">
<div class="circle"></div>
<input type="checkbox" class="hidden" checked/>
</div>
EGF
</div>
<div class="two wide field">
<div class="active checkbox">
<div class="circle"></div>
<input type="checkbox" class="hidden" checked/>
</div>
FFG
</div>
</div>
<div class="two stackable fields">
<div class="eight wide field">
<label>Family name</label> <label>Family name</label>
<span class="info"></span> <span class="info"></span>
<input type="text" name="name" placeholder="last name"/> <input type="text" name="name" placeholder="last name"/>
</div> </div>
<div class="field"> <div class="eight wide field">
<label>Given name</label> <label>Given name</label>
<span class="info"></span> <span class="info"></span>
<input type="text" name="name" placeholder="first name"/> <input type="text" name="name" placeholder="first name"/>
</div> </div>
</div> </div>
<div class="two stackable fields">
<div class="eight wide field">
<label>Country</label>
<span class="info"></span>
<select name="country">
<option></option>
#set($defaultCountry = $translate.defaultCountry[$request.lang])
#foreach($country in $countries.countries)
<option value="$country.key">$country.value</option>
#end
</select>
</div>
<div class="eight wide field">
<label>Club</label>
<span class="info"></span>
<input type="text" name="name" placeholder="club"/>
</div>
</div>
<div class="two stackable fields">
<div class="eight wide field">
<label>Rank</label>
<span class="info"></span>
<select name="rank">
<option></option>
#levels()
</select>
</div>
<div class="eight wide field">
<label>Rating</label>
<span class="info"></span>
<input name="rating" type="text" class="numeric"/>
</div>
</div>
</form> </form>
</div> </div>
<div class="popup-footer">
<button class="ui gray right labeled icon floating close button">
<i class="times icon"></i>
Cancel
</button>
<button class="ui green right labeled icon floating add button">
<i class="plus icon"></i>
Register
</button>
</div>
</div> </div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
onLoad(() => { onLoad(() => {
$('#add').on('click', e => { $('#add').on('click', e => {
$('#player').addClass('shown'); modal('player');
}); });
}); });
</script> </script>

3
view-webapp/src/main/webapp/tour.html
View File

@@ -126,9 +126,10 @@
}); });
// ]]# // ]]#
#include('/js/tour-information.inc.js') #include('/js/tour-information.inc.js')
#include('/js/tour-registration.inc.js')
</script> </script>
<div id="invalid_character" class="hidden">Invalid character</div> <div id="invalid_character" class="hidden">Invalid character</div>
<script type="text/javascript" src="/lib/datepicker-1.3.4/datepicker-full#*.min*#.js"></script> <script type="text/javascript" src="/lib/datepicker-1.3.4/datepicker-full.min.js"></script>
#if($datepickerLocale != 'en') #if($datepickerLocale != 'en')
<script type="text/javascript" src="/lib/datepicker-1.3.4/locales/${datepickerLocale}.js"></script> <script type="text/javascript" src="/lib/datepicker-1.3.4/locales/${datepickerLocale}.js"></script>
#end #end