Filter results

This commit is contained in:
Claude Brisson
2024-01-30 17:47:38 +01:00
parent 08d572db7b
commit 41e1b49bd7
4 changed files with 60 additions and 38 deletions

View File

@@ -425,6 +425,45 @@
color: darkgray; color: darkgray;
} }
.toggle {
display: inline-block;
cursor: pointer;
text-align: center;
input {
display: none !important;
}
label {
display: inline-block;
text-align: center;
cursor: pointer;
}
.checkbox {
width: 50px;
height: 26px;
border-radius: 18px;
background-color: #F7D6A3;
display: inline-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:checked + .checkbox {
background-color: rgb(218, 114, 80);
.circle {
transform: translateX(20px);
}
}
}
@media print { @media print {
body { body {

View File

@@ -91,43 +91,6 @@
} }
#search-form { #search-form {
position: relative; position: relative;
.toggle {
cursor: pointer;
text-align: center;
input {
display: none;
}
label {
display: block;
text-align: center;
cursor: pointer;
}
.checkbox {
width: 50px;
height: 26px;
border-radius: 18px;
background-color: #F7D6A3;
display: inline-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:checked + .checkbox {
background-color: rgb(218, 114, 80);
.circle {
transform: translateX(20px);
}
}
}
} }
#search-result { #search-result {
position: absolute; position: absolute;
@@ -310,7 +273,7 @@
#results-list { #results-list {
text-align: center; text-align: center;
.player, .result { .player, .result {
background-color: white; background-color: unset;
color: black; color: black;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@@ -326,6 +289,11 @@
font-style: italic; font-style: italic;
} }
} }
#results-table {
tr.filtered {
display: none;
}
}
} }
/* standings section */ /* standings section */

View File

@@ -53,4 +53,12 @@ onLoad(()=>{
let newResult = results[(index + 1)%results.length]; let newResult = results[(index + 1)%results.length];
setResult(gameId, newResult, oldResult); setResult(gameId, newResult, oldResult);
}); });
$('#filter').on('click', e=>{
let filter = $('#filter-results')[0].checked;
if (filter) {
$('#results-table tr').filter(':not(:has(td.result[data-result="?"]))').addClass('filtered');
} else {
$('#results-table tr').removeClass('filtered');
}
});
}); });

View File

@@ -6,6 +6,13 @@
<button class="ui floating choose-round next-round button">&raquo;</button> <button class="ui floating choose-round next-round button">&raquo;</button>
#set($stats = $utils.getResultsStats($games)) #set($stats = $utils.getResultsStats($games))
<span class="norbeak">( <span id="known">$stats.known</span> / $stats.total )</span> <span class="norbeak">( <span id="known">$stats.known</span> / $stats.total )</span>
<div id="filter" class="toggle">
<input id="filter-results" type="checkbox" value="true"/>
<div class="filter-results checkbox">
<div class="circle"></div>
</div>
<label>Filter</label>
</div>
</div> </div>
<div id="results-list" class="roundbox"> <div id="results-list" class="roundbox">
<table id="results-table" class="ui celled striped table"> <table id="results-table" class="ui celled striped table">