index.html

{% extends 'layout.html' %}

{% block content %}

<header>
    <hgroup class="container hero">
        <h1>Pynance Parser</h1>
        <p>Manage Bankaccounts like a Boss !</p>    
    </hgroup>
</header>

<main class="container">

    <section>
        <p>
            Importiere neue Kontoumsätze oder wähle die Übersicht aus, an der du weiterarbeiten möchtest.
        </p>
    </section>

    <section class="grid m-12 l-6-6 xxl-8-4 margin">

        <article>
            <header>
                <strong>Konten</strong>
            </header>
            <div class="grid m-6-6 xxl-6-6 margin">
                {% if ibans %}
                {% for iban in ibans %}
                <button class="outline contrast" data-target="add-iban" data-iban="{{iban}}" onclick="toggleModal(event)">&#128212; {{iban}}</button>
                {% endfor %}
                {% endif %}
                <button class="outline" data-target="add-iban" onclick="toggleModal(event)"><b>+</b></button>
            </div>
        </article>

        <article>
            <header>
                <strong>Gruppen</strong>
            </header>
            <div class="grid m-6-6 xl-12 margin">
                {% if groups %}
                {% for group in groups %}
                <button class="outline contrast" data-target="add-group" data-group="{{group}}" onclick="toggleModal(event)">&#128218; {{group}}</button>
                {% endfor %}
                {% endif %}
                {% if ibans %}
                <button class="outline" data-target="add-group" onclick="toggleModal(event)"><b>+</b></button>
                {% else %}
                <small><i>Es existiert noch kein Konto für eine Gruppe.</i></small>
                {% endif %}
            </div>
        </article>

    </section>

    <section>
        <p>Das Konto wird bei einem Import automatisch erstellt.</p>
        <p><a href="/logout" role="button" class="secondary margin-top">Logout</a></p>
    </section>

</main>

<footer>
    <section class="bottom-fixed right">
        <button class="secondary outline" data-target="settings-popup" onclick="toggleModal(event)">⚙️</button>
    </section>
</footer>

<!-- PopUps -->
<dialog id="add-iban">
    <article>
        <header>
            <button aria-label="Close" rel="prev" data-target="add-iban" onclick="toggleModal(event)"></button>
            <h2>Konten verwalten</h2>
        </header>
        <p>Importiere Kontoumsätze in folgendem Konto:</p>
        <div role="group">
            <input type="text" name="iban-input" id="iban-input" placeholder="DE XXXXXXXXXXXXX" list="iban-list" 
                oninput="this.value = this.value.replace(/\s+/g, '')">
            <datalist id="iban-list">
                {% for iban in ibans %}
                <option value="{{iban}}"></option>
                {% endfor %}
            </datalist>
            <button class="outline delete" onclick="deleteDB()">Löschen</button>
        </div>
        <p id="iban-stats">
            Aktuell <b>? Transaktionen</b> im Zeitraum vom <b>?</b> bis zum <b>?</b>.
        </p>
        <p>
            <select id="bank-type">
                <option value="Generic">Standardimport</option>
                <option>Comdirect</option>
                <option>Commerzbank</option>
                <option>Volksbank Mittelhessen</option>
            </select>
            <small>
                Nicht ünterstützte Banken können als CSV mit
                <span class="long-tooltip" data-tooltip="Spalten: Buchungstag, Valuta, Art, Buchungstext, Betrag, Währung, Gegenkonto (optional) | Trenner ';'">
                    vorgegebenem Format
                </span>
                Über den Standardimport eingelesen werden.
            </small>
        </p>
        <div role="group">
            <div id="file-drop-area">
                <span id="file-label">PDF / CSV / HTML</span>
                <input type="file" id="file-input" name="file-input" accept=".csv,.pdf,.html" multiple style="display: none;">
            </div>
            <button onclick="uploadIban()" class="contrast">Import</button>
        </div>
        <details>
            <summary>
                Transaktionen neu parsen.
            </summary>
            <p>
                Aller Transaktionen dieser IBAN werden mit den aktuellen Parsing-Mustern eingelesen und <i>(nur)</i> die Ergebnisse des Parsings überschrieben.
            </p>
            <p class="center">
                <a role="button" class="delete outline" href="javascript:reParse()">Erneut parsen</a>
            </p>
        </details>
        <footer>
            <a role="button" href="">Öffnen</a>
        </footer>
    </article>
</dialog>

<dialog id="upload-list">
    <article>
        <header>
            <button aria-label="Close" rel="prev" data-target="upload-list" onclick="toggleModal(event)"></button>
            <h2>Import</h2>
        </header>

        <table>
        </table>

        <footer>
            <a role="button" href="">Öffnen</a>
        </footer>
    </article>
</dialog>

<dialog id="reparse-iban">
    <article>
        <header>
            <button aria-label="Close" rel="prev" data-target="upload-list" onclick="toggleModal(event)"></button>
            <h2>Erneutes Parsing</h2>
        </header>

        <p>Geänderte Datensätze: <span>0</span></p>
        <p><progress value="0" max="1" /></p>

        <footer>
            <a role="button" class="primary" href="/">OK</a>
        </footer>
    </article>
</dialog>


<dialog id="add-group">
    <article>
        <header>
            <button aria-label="Close" rel="prev" data-target="add-group" onclick="toggleModal(event)"></button>
            <h2>Gruppen verwalten</h2>
        </header>
        <p>Du kannst eine Gruppe hier ohne Änderungen öffnen, sie löschen, oder neue Konten zuordnen.</p>
        <fieldset>
            {% for iban in ibans %}
            <label>
                <input type="checkbox" name="iban-checkbox" role="switch" value="{{iban}}">
                {{iban}}
            </label>
            {% endfor %}
        </fieldset>
        <div role="group">
            <input type="text" name="group-input" id="group-input" placeholder="Gruppenname" list="group-list">
            <datalist id="group-list">
                {% for group in groups %}
                <option value="{{group}}"></option>
                {% endfor %}
            </datalist>
            <button class="delete outline" onclick="deleteDB(true)">Löschen</button>
        </div>
        <footer>
            <button onclick="saveGroup()">Speichern</button>
            <a role="button" href="" class="contrast">Öffnen</a>
        </footer>
    </article>
</dialog>


<dialog id="settings-popup">
    <article>
        <header>
            <button aria-label="Close" rel="prev" data-target='settings-popup' onclick="toggleModal(event)"></button>
            <h2>Settings</h2>
        </header>
        <p>Einstellungen können hier als <kbd>json</kbd> Datei hochgeladen oder über ein Eingabefeld geändert werden.</p>
        <details>
            <summary>
                Import einer Datei in die Datenbank:
            </summary>
            <p>
                <select id="settings-type">
                    <option value="rule">Regel</option>
                    <option value="parser">Parsing-Anweisung</option>
                    <option value="config">Einstellungen</option>
                </select>
            </p>
            <div role="group">
                <div id="settings-drop-area">
                    <span id="settings-label">.json</span>
                    <input type="file" id="settings-input" name="settings-input" accept=".json" style="display: none;">
                </div>
                <button onclick="importSettings()">Importieren</button>
            </div>
            <small>Diese Datei kann auch im Server-Backend abgelegt werden, um für alle verfügbar zu sein.</small>
        </details>

        <details>
            <summary>
                Abfragen oder Editieren von Werten:
            </summary>
            <p>
                <select id="read-setting">
                    {% for m in meta %}
                    <option value="{{m.uuid}}">{{m.metatype}} "{{m.name}}" ({{m.uuid}})</option>
                    {% endfor %}
                </select>
                <textarea id="set-setting" placeholder="Setting Wert" rows="10" cols="15"></textarea>
            </p>
            <p>
                <small>Settings ohne <i>uuid</i> werden als neuer Eintrag erstellt.</small>
            </p>
            <footer dir="rtl">
                <button class="secondary" onclick="loadSetting()">Laden</button>
                <button onclick="saveSetting()">Speichern</button>
                <button class="delete" onclick="deleteSetting()">Löschen</button>
            </footer>
        </details>
    </article>
</dialog>

<script src="{{ url_for('static', filename='js/index.js') }}"></script>

{% endblock %}