index.html

{% extends "base.html" %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{url_for('static', filename = 'css/index.css')}}">
<script src="{{url_for('static', filename = 'js/index.js')}}"></script>
{% endblock %}

{% block content %}

<div class="container">
    <div class="starter-template">
    <div class="starter-template">
        <h1>Spreadsheet Template Generator</h1>
        <p class="lead">Import, upload, generate and migrate YAML files and spreadsheets</p>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert {{category}}">
                        <b>{{ message }}</b>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <div class="grid-container">
            <!--Button to load full list of all schemas -->
            <div class="grid-item">
               <form  action="load_all" method="GET" enctype="multipart/form-data">
                    <div class="form-group">
                         <label for="allSchemas">Load all schemas</label>
                    </div>
                    <button type="submit" class="btn btn-primary" id="allSchemas">All schemas</button>
               </form>
            </div>
            <!--Button to preselect some schemas before loading full list -->
             <div class="grid-item">
               <form  action="load_select" method="GET" enctype="multipart/form-data">
                    <div class="form-group">
                         <label for="allSchemas">Pre-select schemas</label>
                    </div>
                    <button type="submit" class="btn btn-primary" id="selectSchemas">Select schemas</button>
               </form>
            </div>
        </div>
        <div class="upload-grid-container">
            <!--Button to upload YAML file for editing-->
             <div class="grid-item">
               <form  action="upload" method="POST" enctype="multipart/form-data">
                   <div class="custom-file">
                        <input type="file" accept=".yaml,.yml" name="yamlfile" class="custom-file-input" id="yamlUpload">
                    </div>
                    <button type="submit" class="btn btn-primary" id="uploadYaml">Upload YAML to edit</button>
               </form>
            </div>
            <!--Button to upload YAML file for immediate conversion to spreadsheet-->
             <div class="grid-item">
               <form  action="upload_yaml_to_xls" method="POST" enctype="multipart/form-data">
                   <div class="custom-file">
                        <input type="file" accept=".yaml,.yml" name="yamlfile" class="custom-file-input" id="yamlFile">
                    </div>
                    <button type="submit" class="btn btn-primary" id="uploadYamlToXls">YAML to spreadsheet</button>
               </form>
            </div>
            <!--Button to upload spreadsheet for migration-->
            <div class="grid-item">
               <form  action="upload_xls" method="POST" enctype="multipart/form-data">
                   <div class="custom-file">
                        <input type="file" accept=".xlsx,.xls" name="xlsfile" class="custom-file-input" id="spreadsheetUpload">
                    </div>
                    <button type="submit" class="btn btn-primary" id="uploadSpreadsheet">Migrate spreadsheet</button>
               </form>
            </div>
        </div>
        <hr/>
    </div>
</div>


{% endblock %}