96 lines
4.4 KiB
HTML
96 lines
4.4 KiB
HTML
|
{% extends "layouts/default.html" %}
|
||
|
|
{% block title %}{_ "Select Card Sets" _}{% endblock %}
|
||
|
|
{% block content %}
|
||
|
|
|
||
|
|
<!-- I seem to have found a bug with HTMX + Caveman2 array parsing: if
|
||
|
|
hx-post is used to send a field like cards[][set-id] and
|
||
|
|
cards[][variant-id], the arrays are being destructured by HTMX
|
||
|
|
during the POST construction. Specifying the ACTION in the FORM
|
||
|
|
with METHOD seems to solve the issue. The form must be submitted
|
||
|
|
via caveman2 and not HTMX. -->
|
||
|
|
<form id="card-select-form" name="card-select-form" action="/construct/{{ deck-id }}/select-sets" method="post">
|
||
|
|
{{ token | safe }}
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<div class="columns is-multiline">
|
||
|
|
{% for card-sets in sets %}
|
||
|
|
<div class="column is-full">
|
||
|
|
<div class="box">
|
||
|
|
<div class="media">
|
||
|
|
<div class="media-left">
|
||
|
|
<p class="image is-3x4">
|
||
|
|
<a href="/cards/by-passcode/{{ card-sets.0.passcode.id }}" target="_blank">
|
||
|
|
<img src="/public/ygoprodeck/{{ card-sets.0.passcode.id }}.jpg" style="max-height:150px">
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="media-content">
|
||
|
|
<div class="content">
|
||
|
|
<div class="field is-grouped">
|
||
|
|
<div class="field-body">
|
||
|
|
<div class="field is-narrow">
|
||
|
|
<label class="label" for="set-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}">
|
||
|
|
{{ card-sets.0.passcode.name }}
|
||
|
|
</label>
|
||
|
|
<div class="control">
|
||
|
|
<div class="select is-fullwidth">
|
||
|
|
<select id="set-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}"
|
||
|
|
form="card-select-form"
|
||
|
|
name="cards[][set-id]"
|
||
|
|
hx-get="/construct/ygo-set-item"
|
||
|
|
hx-include="[id='set-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}'],[id='condition-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}']"
|
||
|
|
hx-target="#results-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}"
|
||
|
|
hx-trigger="change, load">
|
||
|
|
{% for set in card-sets %}
|
||
|
|
<option value="{{ set.id }}">{{ set.name.name }} - {{ set.code.name }} - {{ set.rarity.name }} - {{ set.edition.name }} - {{ set.price }}</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field is-narrow">
|
||
|
|
<label class="label" for="condition-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}">
|
||
|
|
Condition
|
||
|
|
</label>
|
||
|
|
<div class="control">
|
||
|
|
<div class="select is-fullwidth">
|
||
|
|
<select id="condition-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}"
|
||
|
|
form="card-select-form"
|
||
|
|
name="cards[][variant-id]"
|
||
|
|
hx-get="/construct/ygo-set-item"
|
||
|
|
hx-include="[id='set-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}'],[id='condition-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}']"
|
||
|
|
hx-target="#results-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}"
|
||
|
|
hx-trigger="change, load">
|
||
|
|
{% for variant in variants %}
|
||
|
|
<option value="{{ variant.id }}">{{ variant.name }}</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="results-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
<div class="column is-full">
|
||
|
|
<div class="box">
|
||
|
|
<button class="button"
|
||
|
|
type="submit"
|
||
|
|
form="card-select-form"
|
||
|
|
hx-target="#select-results">
|
||
|
|
<!-- hx-include="[name='card-select-form']"-->
|
||
|
|
Submit
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|