anna/remote-party-finder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: update data centre filter correctly

Browse Source
This commit is contained in:
Anna 2021-10-05 15:02:38 -04:00
parent 331af9a0b3
commit b1360c0439
Signed by: anna
GPG Key ID: 0B391D8F06FCD9E0
2 changed files with 81 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
assets/listings.js
View File

@ -120,19 +120,30 @@
function setUpDataCentreFilter() { function setUpDataCentreFilter() {
let select = document.getElementById('data-centre-filter'); let select = document.getElementById('data-centre-filter');
let data_centres = []; let dataCentres = {};
for (let elem of document.querySelectorAll('#listings > .listing')) { for (let elem of document.querySelectorAll('#listings > .listing')) {
let centre = elem.dataset['centre']; let centre = elem.dataset['centre'];
if (!data_centres.includes(centre)) { if (!dataCentres.hasOwnProperty(centre)) {
data_centres.push(centre); dataCentres[centre] = 0;
} }
dataCentres[centre] += 1;
} }
data_centres.sort(); for (let opt of select.options) {
for (let centre of data_centres) { let centre = opt.value;
let opt = document.createElement('option');
opt.innerText = centre; let count = 0;
select.appendChild(opt);
if (dataCentres.hasOwnProperty(centre)) {
count = dataCentres[centre];
}
if (centre === 'All') {
count = Object.values(dataCentres).reduce((a, b) => a + b);
}
opt.innerText += ` (${count})`;
} }
select.addEventListener('change', () => { select.addEventListener('change', () => {

107
templates/listings.html
View File

@ -5,9 +5,9 @@ Remote Party Finder
{%- endblock %} {%- endblock %}
{% block head %} {% block head %}
<link rel="stylesheet" href="/assets/listings.css"/> <link rel="stylesheet" href="/assets/listings.css"/>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
<script defer src="/assets/listings.js"></script> <script defer src="/assets/listings.js"></script>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
@ -15,7 +15,24 @@ Remote Party Finder
<div class="requires-js"> <div class="requires-js">
<input type="search" class="search" placeholder="Search"/> <input type="search" class="search" placeholder="Search"/>
<select id="data-centre-filter"> <select id="data-centre-filter">
<option>All</option> <option value="All">All</option>
<optgroup label="North America">
<option value="Aether">Aether</option>
<option value="Crystal">Crystal</option>
<option value="Primal">Primal</option>
</optgroup>
<optgroup label="Europe">
<option value="Chaos">Chaos</option>
<option value="Light">Light</option>
</optgroup>
<optgroup label="Japan">
<option value="Elemental">Elemental</option>
<option value="Gaia">Gaia</option>
<option value="Mana">Mana</option>
</optgroup>
<optgroup label="Oceania">
<option disabled value="">Not yet lmao</option>
</optgroup>
</select> </select>
<details class="filter-controls"> <details class="filter-controls">
<summary>Advanced</summary> <summary>Advanced</summary>
@ -52,60 +69,60 @@ Remote Party Finder
{%- for container in containers %} {%- for container in containers %}
{%- let listing = container.listing.borrow() %} {%- let listing = container.listing.borrow() %}
<div <div
class="listing" class="listing"
data-id="{{ listing.id }}" data-id="{{ listing.id }}"
data-centre="{{ listing.data_centre_name().unwrap_or_default() }}" data-centre="{{ listing.data_centre_name().unwrap_or_default() }}"
data-type="{{ listing.duty_type.as_u8() }}" data-type="{{ listing.duty_type.as_u8() }}"
data-category="{{ listing.category.as_u32() }}" data-category="{{ listing.category.as_u32() }}"
data-high-end="{{ listing.high_end() }}" data-high-end="{{ listing.high_end() }}"
data-content-kind={{ listing.content_kind() }}> data-content-kind={{ listing.content_kind() }}>
<div class="left"> <div class="left">
{%- let duty_class %} {%- let duty_class %}
{%- if listing.is_cross_world() %} {%- if listing.is_cross_world() %}
{%- let duty_class = " cross" %} {%- let duty_class = " cross" %}
{%- else %} {%- else %}
{%- let duty_class = " local" %} {%- let duty_class = " local" %}
{%- endif %} {%- endif %}
<div class="duty{{ duty_class }}">{{ listing.duty_name() }}</div> <div class="duty{{ duty_class }}">{{ listing.duty_name() }}</div>
<div class="description"> <div class="description">
{%- let desc = listing.description.full_text() %} {%- let desc = listing.description.full_text() %}
{%- if desc.trim().is_empty() -%} {%- if desc.trim().is_empty() -%}
<em>None</em> <em>None</em>
{%- else -%} {%- else -%}
{%- let (colour_class, prepend_flags) = listing.prepend_flags() -%} {%- let (colour_class, prepend_flags) = listing.prepend_flags() -%}
{%- if !prepend_flags.is_empty() -%} {%- if !prepend_flags.is_empty() -%}
<span class="{{ colour_class }}">{{ prepend_flags }} </span> <span class="{{ colour_class }}">{{ prepend_flags }} </span>
{%- endif -%} {%- endif -%}
{{- desc.trim() }} {{- desc.trim() }}
{%- endif -%} {%- endif -%}
</div> </div>
<div class="party"> <div class="party">
{%- for slot in listing.slots() %} {%- for slot in listing.slots() %}
{%- let filled %} {%- let filled %}
{%- let title %} {%- let title %}
{%- let role_class %} {%- let role_class %}
{%- match slot %} {%- match slot %}
{%- when Ok with (slot) %} {%- when Ok with (slot) %}
{%- let filled = " filled" %} {%- let filled = " filled" %}
{%- match slot.role() %} {%- match slot.role() %}
{%- when Some with (role) %} {%- when Some with (role) %}
{%- let role_class = " {}"|format(role.as_str().to_lowercase()) %} {%- let role_class = " {}"|format(role.as_str().to_lowercase()) %}
{%- when None %} {%- when None %}
{%- let role_class = "".to_string() %} {%- let role_class = "".to_string() %}
{%- endmatch %} {%- endmatch %}
{%- let title = slot.code().to_string() %} {%- let title = slot.code().to_string() %}
{%- when Err with (tuple) %} {%- when Err with (tuple) %}
{%- let filled = "" %} {%- let filled = "" %}
{%- let title = tuple.1.clone() %} {%- let title = tuple.1.clone() %}
{%- let role_class = " {}"|format(tuple.0) %} {%- let role_class = " {}"|format(tuple.0) %}
{%- endmatch %} {%- endmatch %}
<div class="slot{{ filled }}{{ role_class }}" title="{{ title }}"> <div class="slot{{ filled }}{{ role_class }}" title="{{ title }}">
{%- if !filled.is_empty() %} {%- if !filled.is_empty() %}
<svg viewBox="0 0 32 32"> <svg viewBox="0 0 32 32">
<use href="/assets/icons.svg#{{ title }}"></use> <use href="/assets/icons.svg#{{ title }}"></use>
</svg> </svg>
{%- endif %} {%- endif %}
</div> </div>
{%- endfor %} {%- endfor %}
<div class="total">{{ listing.slots_filled() }}/{{ listing.slots_available }}</div> <div class="total">{{ listing.slots_filled() }}/{{ listing.slots_available }}</div>
</div> </div>
@ -151,7 +168,7 @@ Remote Party Finder
</div> </div>
</div> </div>
</div> </div>
{%- endfor %} {%- endfor %}
</div> </div>
</div> </div>
{% endblock %} {% endblock %}