data-importer/resources/views/index.twig

{% extends "./layout/default" %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col-lg-10 offset-lg-1">
                <h1>Firefly III Data Import Tool, v{{ version }}</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-10 offset-lg-1">
                <div class="card">
                    <div class="card-header">
                        Firefly III Data Import Tool, v{{ version }}
                    </div>
                    <div class="card-body">
                        <p class="card-text">
                            Welcome! This tool will help you import data into Firefly III.
                        </p>
                        <p>
                            All are instructions in the <a href="https://docs.firefly-iii.org/" target="_blank">
                                TODO documentation</a>. Any links you see to the docs will open in a new window or tab.
                        </p>
                        <p>
                            To import data, you need to authenticate with Firefly III, and optionally with one of the
                            data sources this importer supports.
                        </p>
                        {% if pat %}
                            <p id="firefly_expl">
                                You're using a Personal Access Token to <span
                                    class="text-info">authenticate</span> to Firefly III.
                            </p>
                        {% endif %}
                        {% if clientIdWithURL %}
                            <p id="firefly_expl">
                                You're using a fixed Client ID and a fixed Firefly III URL to <span
                                    class="text-info">authenticate</span> to Firefly III.
                            </p>
                        {% endif %}
                        {% if URLonly %}
                            <p id="firefly_expl">
                                You're using a Client ID and a fixed Firefly III URL to <span
                                    class="text-info">authenticate</span> to Firefly III.
                            </p>
                        {% endif %}
                        {% if flexible %}
                            <p id="firefly_expl">
                                You're using a self-submitted Client ID and Firefly III URL to <span
                                    class="text-info">authenticate</span> to Firefly III.
                            </p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:1em;display: none;" id="error_explain">
            <div class="col-lg-10 offset-lg-1">
                <div class="card">
                    <div class="card-header">
                        Configuration / connection error :(
                    </div>
                    <div class="card-body">
                        <p>The importer could not connect to Firefly III.
                            Please remedy the error below first, and check out the <a
                                href="https://docs.firefly-iii.org/" target="_blank">
                                documentation</a> if necessary.</p>
                        <p id="error_txt" class="text-danger"></p>
                    </div>
                </div>
            </div>
        </div>

        <form action="{{ route('index.post') }}" method="post">
            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
            <div class="row" style="margin-top:1em;" id="importers">
                <div class="col-lg-10 offset-lg-1">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-header">
                                    Import from CSV file
                                </div>
                                <div class="card-body">
                                    <button class="btn btn-info disabled" value="csv" name="flow" disabled="disabled"
                                            id="csv_button"><span class="fas fa-cog fa-spin"></span></button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-header">
                                    Import from Nordigen
                                </div>
                                <div class="card-body">
                                    <p id="nordigen_result" style="display: none;"></p>
                                    <button class="btn btn-info disabled" value="nordigen" name="flow" disabled="disabled" id="nordigen_button"><span class="fas fa-cog fa-spin"></span></button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-header">
                                    Import from Spectre
                                </div>
                                <div class="card-body">
                                    <p id="spectre_result" style="display: none;"></p>
                                    <button class="btn btn-info disabled" value="spectre" name="flow" disabled="disabled" id="spectre_button"><span class="fas fa-cog fa-spin"></span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="row" style="margin-top:1em;" id="importers">
            <div class="col-lg-10 offset-lg-1">
                <div class="card">
                    <div class="card-header">
                        Extra buttons!
                    </div>
                    <div class="card-body">
                        <p>
                            <a class="btn btn-danger btn-sm" href="{{ route('flush') }}" data-bs-toggle="tooltip" data-bs-placement="top" title="This button resets your progress">Start over</a>
                            <a class="btn btn-danger btn-sm" href="{{ route('reset') }}" data-bs-toggle="tooltip" data-bs-placement="top" title="This button tries to connect to Firefly III again">Reauthenticate</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}
{% block scripts %}
    <script type="text/javascript">
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })


        var url = '{{ route('token.validate') }}';
        var tokenPageUrl = '{{ route('token.index') }}';
        $.getJSON(url).done(function (data) {
            if ('OK' === data.result) {
                $('#csv_button').removeClass('disabled').text('Import CSV file').removeAttr('disabled');
            } else {

                $('#importers').hide();
                $('#error_explain').show();
                $('#firefly_expl').hide();
                $('#error_txt').text(data.message);
                // window.location = tokenPageUrl;
            }
        }).fail(function () {
            $('#importers').hide();
            $('#error_explain').show();
            $('#firefly_expl').hide();
            $('#error_txt').show().text(data.message);
            // window.location = tokenPageUrl;
        });

        // validate Spectre information:
        url = '{{ route('validate.spectre') }}';
        $.getJSON(url).done(function (data) {
            if ('OK' === data.result) {
                $('#spectre_result').hide();
                $('#spectre_button').removeClass('disabled').text('Import from Spectre').removeAttr('disabled');
            }
            if ('NODATA' === data.result) {
                $('#spectre_button').removeClass('disabled').text('Import from Spectre').removeAttr('disabled');
            }
        }).fail(function () {
            $('#spectre_result').show().text('The Spectre / Salt Edge API is configured incorrectly and cannot be used to import data.');
            $('#spectre_button').hide();
        });

        // validate Nordigen information
        url = '{{ route('validate.nordigen') }}';
        $.getJSON(url).done(function (data) {
            if ('OK' === data.result) {
                $('#nordigen_result').hide();
                $('#nordigen_button').removeClass('disabled').text('Import from Nordigen').removeAttr('disabled');
            }
            if ('NODATA' === data.result) {
                $('#nordigen_button').removeClass('disabled').text('Import from Nordigen').removeAttr('disabled');
            }
        }).fail(function () {
            $('#nordigen_result').show().text('The Nordigen API is configured incorrectly and cannot be used to import data.');
            $('#nordigen_button').hide();
        });


    </script>
{% endblock %}