remote-party-finder/templates/listings.html

{% extends "_frame.html" %}

{% block title -%}
Remote Party Finder
{%- endblock %}

{% block head %}
    <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="/assets/listings.js"></script>
{% endblock %}

{% block body %}
<div id="container">
    <div class="requires-js">
        <input type="search" class="search" placeholder="Search"/>
        <select id="data-centre-filter">
            <option>All</option>
        </select>
        <details class="filter-controls">
            <summary>Advanced</summary>
            <div>
                <div class="control">
                    <label>
                        Categories
                        <select multiple id="category-filter">
                            <option>None</option>
                            <option data-type="1">Duty Roulette</option>
                            <option data-type="2" data-content-kind="2">Dungeons</option>
                            <option data-type="2" data-content-kind="3">Guildhests</option>
                            <option data-type="2" data-content-kind="4">Trials</option>
                            <option data-type="2" data-content-kind="5">Raids</option>
                            <option data-type="2" data-high-end="true">High-end Duty</option>
                            <option data-type="2" data-content-kind="6">PvP</option>
                            <option data-category="1">Quest Battles</option>
                            <option data-category="2">FATEs</option>
                            <option data-category="4">Treasure Hunt</option>
                            <option data-category="8">The Hunt</option>
                            <option data-type="2" data-category="16">Gathering Forays</option>
                            <option data-type="2" data-category="32">Deep Dungeons</option>
                            <option data-type="2" data-category="64">Adventuring Forays</option>
                        </select>
                    </label>
                </div>
            </div>
        </details>
    </div>
    <div id="listings" class="list">
        {%- if containers.is_empty() %}
        <em class="no-listings">No listings - download the plugin to help contribute!</em>
        {%- endif %}
        {%- for container in containers %}
        {%- let listing = container.listing.borrow() %}
        <div
            class="listing"
            data-id="{{ listing.id }}"
            data-centre="{{ listing.data_centre_name().unwrap_or_default() }}"
            data-type="{{ listing.duty_type.as_u8() }}"
            data-category="{{ listing.category.as_u32() }}"
            data-high-end="{{ listing.high_end() }}"
            data-content-kind={{ listing.content_kind() }}>
            <div class="left">
                {%- let duty_class %}
                {%- if listing.is_cross_world() %}
                    {%- let duty_class = " cross" %}
                {%- else %}
                    {%- let duty_class = " local" %}
                {%- endif %}
                <div class="duty{{ duty_class }}">{{ listing.duty_name() }}</div>
                <div class="description">
                    {%- let desc = listing.description.full_text() %}
                    {%- if desc.trim().is_empty() -%}
                        <em>None</em>
                    {%- else -%}
                        {%- let (colour_class, prepend_flags) = listing.prepend_flags() -%}
                        {%- if !prepend_flags.is_empty() -%}
                        <span class="{{ colour_class }}">{{ prepend_flags }} </span>
                        {%- endif -%}
                        {{- desc.trim() }}
                    {%- endif -%}
                </div>
                <div class="party">
                    {%- for slot in listing.slots() %}
                        {%- let filled %}
                        {%- let title %}
                        {%- let role_class %}
                        {%- match slot %}
                            {%- when Ok with (slot) %}
                                {%- let filled = " filled" %}
                                {%- match slot.role() %}
                                    {%- when Some with (role) %}
                                        {%- let role_class = " {}"|format(role.as_str().to_lowercase()) %}
                                    {%- when None %}
                                        {%- let role_class = "".to_string() %}
                                {%- endmatch %}
                                {%- let title = slot.code().to_string() %}
                            {%- when Err with (tuple) %}
                                {%- let filled = "" %}
                                {%- let title = tuple.1.clone() %}
                                {%- let role_class = " {}"|format(tuple.0) %}
                        {%- endmatch %}
                        <div class="slot{{ filled }}{{ role_class }}" title="{{ title }}">
                            {%- if !filled.is_empty() %}
                            <svg viewBox="0 0 32 32">
                                <use href="/assets/icons.svg#{{ title }}"></use>
                            </svg>
                            {%- endif %}
                        </div>
                    {%- endfor %}
                    <div class="total">{{ listing.slots_filled() }}/{{ listing.slots_available }}</div>
                </div>
            </div>
            <div class="middle">
                <div class="stat">
                    <div class="name">Min IL</div>
                    <div class="value">{{ listing.min_item_level }}</div>
                </div>
            </div>
            <div class="right meta">
                <div class="item creator">
                    <span class="text">{{ listing.name.full_text() }} @ {{ listing.home_world_string() }}</span>
                    <span title="Creator">
                        <svg class="icon" viewBox="0 0 32 32">
                            <use href="/assets/icons.svg#user"></use>
                        </svg>
                    </span>
                </div>
                <div class="item world">
                    <span class="text">{{ listing.created_world_string() }}</span>
                    <span title="Created on">
                        <svg class="icon" viewBox="0 0 32 32">
                            <use href="/assets/icons.svg#sphere"></use>
                        </svg>
                    </span>
                </div>
                <div class="item expires">
                    <span class="text">{{ container.human_time_left() }}</span>
                    <span title="Expires">
                        <svg class="icon" viewBox="0 0 32 32">
                            <use href="/assets/icons.svg#stopwatch"></use>
                        </svg>
                    </span>
                </div>
                <div class="item updated">
                    <span class="text">{{ container.human_since_updated() }}</span>
                    <span title="Updated">
                        <svg class="icon" viewBox="0 0 32 32">
                            <use href="/assets/icons.svg#clock"></use>
                        </svg>
                    </span>
                </div>
            </div>
        </div>
    {%- endfor %}
    </div>
</div>
{% endblock %}