Convert statement import and import preview to Tailwind CSS

This commit is contained in:
RunasSudo 2024-04-04 19:36:30 +11:00
parent c7ab25b203
commit 823447135c
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
2 changed files with 48 additions and 40 deletions

View File

@ -1,5 +1,5 @@
{# DrCr: Web-based double-entry bookkeeping framework {# DrCr: Web-based double-entry bookkeeping framework
Copyright (C) 2022–2023 Lee Yingtong Li (RunasSudo) Copyright (C) 2022–2024 Lee Yingtong Li (RunasSudo)
This program is free software: you can redistribute it and/or modify This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by it under the terms of the GNU Affero General Public License as published by
@ -15,48 +15,56 @@
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
#} #}
{% extends 'base.html' %} {% extends 'base_tailwind.html' %}
{% block title %}Import statement{% endblock %} {% block title %}Import statement{% endblock %}
{% block content %} {% block content %}
<h1 class="h2 my-4">Import statement</h1> <h1 class="text-3xl text-gray-900 mb-4">
Import statement
</h1>
<h2 class="h3">OFX 1.x</h2> <h2 class="text-xl text-gray-900 font-semibold mb-1">OFX 1.x</h2>
<form method="POST" enctype="multipart/form-data"> <form method="POST" enctype="multipart/form-data">
<input type="hidden" name="format" value="ofx1"> <input type="hidden" name="format" value="ofx1">
<div class="d-flex"> <div class="flex">
<div class="flex-grow-1 me-2"> <div class="grow mr-2">
<input class="form-control" name="source-account" placeholder="Source account"> <input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="source-account" placeholder="Source account">
</div> </div>
<div class="flex-grow-1"> <div class="flex">
<input class="form-control" type="file" name="file" accept=".ofx"> </div>
<div class="flex grow mr-2">
<label for="file_ofx1" class="bg-gray-600 px-3 py-1 text-white shadow-sm hover:bg-gray-700">Browse</label>
<input type="file" class="file:hidden block w-full border-0 py-1 px-2 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300" name="file" id="file_ofx1" accept=".ofx">
</div>
<div class="mr-2">
<button type="submit" name="action" value="preview" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">Preview</button>
</div> </div>
<div> <div>
<button type="submit" name="action" value="preview" class="btn btn-secondary ms-2">Preview</button> <button type="submit" name="action" value="import" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Import</button>
</div>
<div>
<button type="submit" name="action" value="import" class="btn btn-primary ms-2">Import</button>
</div> </div>
</div> </div>
</form> </form>
<h2 class="h3 mt-4">OFX 2.x</h2> <h2 class="text-xl text-gray-900 font-semibold mt-4 mb-1">OFX 2.x</h2>
<form method="POST" enctype="multipart/form-data"> <form method="POST" enctype="multipart/form-data">
<input type="hidden" name="format" value="ofx2"> <input type="hidden" name="format" value="ofx2">
<div class="d-flex"> <div class="flex">
<div class="flex-grow-1 me-2"> <div class="grow mr-2">
<input class="form-control" name="source-account" placeholder="Source account"> <input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="source-account" placeholder="Source account">
</div> </div>
<div class="flex-grow-1"> <div class="flex">
<input class="form-control" type="file" name="file" accept=".ofx"> </div>
<div class="flex grow mr-2">
<label for="file_ofx2" class="bg-gray-600 px-3 py-1 text-white shadow-sm hover:bg-gray-700">Browse</label>
<input type="file" class="file:hidden block w-full border-0 py-1 px-2 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300" name="file" id="file_ofx2" accept=".ofx">
</div>
<div class="mr-2">
<button type="submit" name="action" value="preview" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">Preview</button>
</div> </div>
<div> <div>
<button type="submit" name="action" value="preview" class="btn btn-secondary ms-2">Preview</button> <button type="submit" name="action" value="import" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Import</button>
</div>
<div>
<button type="submit" name="action" value="import" class="btn btn-primary ms-2">Import</button>
</div> </div>
</div> </div>
</form> </form>

View File

@ -1,5 +1,5 @@
{# DrCr: Web-based double-entry bookkeeping framework {# DrCr: Web-based double-entry bookkeeping framework
Copyright (C) 2022–2023 Lee Yingtong Li (RunasSudo) Copyright (C) 2022–2024 Lee Yingtong Li (RunasSudo)
This program is free software: you can redistribute it and/or modify This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by it under the terms of the GNU Affero General Public License as published by
@ -15,32 +15,32 @@
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
#} #}
{% extends 'base.html' %} {% extends 'base_tailwind.html' %}
{% block title %}Import statement preview{% endblock %} {% block title %}Import statement preview{% endblock %}
{% block content %} {% block content %}
<h1 class="h2 my-4">Import statement preview</h1> <h1 class="text-3xl text-gray-900 mb-4">
Import statement preview
</h1>
<h2 class="h3 mb-4">Imported statement lines</h2> <table class="min-w-full">
<table class="table">
<thead> <thead>
<tr> <tr class="border-b border-gray-300">
<th>Date</th> <th class="py-0.5 text-gray-900 font-semibold text-start">Date</th>
<th>Description</th> <th class="py-0.5 text-gray-900 font-semibold text-start">Description</th>
<th class="text-end">Dr</th> <th class="py-0.5 text-gray-900 font-semibold text-end">Dr</th>
<th class="text-end">Cr</th> <th class="py-0.5 text-gray-900 font-semibold text-end">Cr</th>
<th class="text-end">Balance</th> <th class="py-0.5 text-gray-900 font-semibold text-end">Balance</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for line in statement_lines %} {% for line in statement_lines %}
<tr> <tr>
<td>{{ line.dt.strftime('%Y-%m-%d') }}</td> <td class="py-0.5 text-gray-900">{{ line.dt.strftime('%Y-%m-%d') }}</td>
<td>{{ line.description }}</td> <td class="py-0.5 text-gray-900">{{ line.description }}</td>
<td class="text-end">{{ line.amount().format() if line.quantity >= 0 else '' }}</td> <td class="py-0.5 text-gray-900 text-end">{{ line.amount().format() if line.quantity >= 0 else '' }}</td>
<td class="text-end">{{ (line.amount()|abs).format() if line.quantity < 0 else '' }}</td> <td class="py-0.5 text-gray-900 text-end">{{ (line.amount()|abs).format() if line.quantity < 0 else '' }}</td>
<td class="text-end">{{ line.balance or '' }}</td> <td class="py-0.5 text-gray-900 text-end">{{ line.balance or '' }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>