74 lines
2.1 KiB
Plaintext
74 lines
2.1 KiB
Plaintext
{% extends "base" %} {% block head %}
|
|
<title>Add Receipt</title>
|
|
<style></style>
|
|
{% endblock %} {% block main %}
|
|
<h1>Add Receipt</h1>
|
|
<nav>
|
|
<sl-button href="/receipts">
|
|
<sl-icon slot="prefix" name="chevron-left"></sl-icon>Receipts
|
|
</sl-button>
|
|
</nav>
|
|
<article>
|
|
<form>
|
|
<p>
|
|
<sl-select
|
|
id="transactions"
|
|
name="transaction"
|
|
placeholder="Loading transactions …"
|
|
help-text="Select an existing transaction to auto fill fields"
|
|
clearable
|
|
>
|
|
<sl-spinner slot="suffix"></sl-spinner>
|
|
<sl-option value="new">New Gas Station Transaction …</sl-option>
|
|
<sl-option value="deposit">New Refund/Deposit Transaction …</sl-option>
|
|
</sl-select>
|
|
</p>
|
|
<p>
|
|
<sl-input
|
|
name="vendor"
|
|
label="Vendor"
|
|
placeholder="Vendor"
|
|
list="vendors"
|
|
required
|
|
></sl-input>
|
|
</p>
|
|
<p>
|
|
<sl-input type="date" name="date" label="Date" required></sl-input>
|
|
</p>
|
|
<p>
|
|
<sl-input
|
|
type="number"
|
|
min="0.01"
|
|
step="0.01"
|
|
label="Amount"
|
|
name="amount"
|
|
required
|
|
></sl-input>
|
|
</p>
|
|
<p><sl-textarea label="Notes" name="notes"></sl-textarea></p>
|
|
<sl-details summary="Take Photo" id="photo-box">
|
|
<camera-input>Your browser does not support taking photos.</camera-input>
|
|
</sl-details>
|
|
<sl-details summary="Upload Photo" style="text-align: center">
|
|
<p>
|
|
<img id="upload-preview" style="max-height: 400px" />
|
|
</p>
|
|
<p>
|
|
<input name="photo" type="file" style="display: none" />
|
|
<sl-button size="large" variant="primary" class="choose-file">
|
|
<sl-icon slot="prefix" name="image" label="Choose File"></sl-icon>
|
|
Choose File
|
|
</sl-button>
|
|
</p>
|
|
</sl-details>
|
|
<footer class="table-actions">
|
|
<sl-button type="reset">Reset</sl-button>
|
|
<sl-button type="submit" variant="primary" disabled>Submit</sl-button>
|
|
</footer>
|
|
</form>
|
|
</article>
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
<script src="/static/receipt-form.js"></script>
|
|
{% endblock %}
|