miniBase/flask_to_docker/templates/index.html

{% extends "base.html" %}

{% block title %}Index Page{% endblock %}

{% block content %}
    <h1>Hellooo</h1>
    <form method="POST" action="{{ url_for('index') }}">
        <input type="text" name="username" placeholder="Username"><br>
        <input type="text" name="password" placeholder="Password"><br>
        <input type="submit" value="login">
    </form>
    
    <h1>File Upload</h1>
    <form method="POST" action="{{ url_for('file_upload') }}" enctype="multipart/form-data">
        <input type="file" name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" ><br>
        <input type="submit" value="upload File">
    </form>
    
    <h1>Convert To CSV</h1>
    <form method="POST" action="{{ url_for('convert_csv') }}" enctype="multipart/form-data">
        <input type="file" name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" ><br>
        <input type="submit" value="upload File">
    </form>
    
    <h1>Convert To CSV Two</h1>
    <form method="POST" action="{{ url_for('convert_csv_two') }}" enctype="multipart/form-data">
        <input type="file" name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" ><br>
        <input type="submit" value="upload File">
    </form>
   
    <h1>JS JSON request</h1>
    <button id="post_button"> Send Post </button>

    <script type="text/javascript">
        const postButton = document.getElementById('post_button');
        const jsonData = {name : 'Mike', greeting: 'Hello'} 

        postButton.addEventListener('click', () => {
            fetch('{{ url_for("handle_post") }}', {
                method: 'POST', 
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                },
                body: JSON.stringify(jsonData)
            })
                .then(response => response.json())
                .then(data => console.log('Success:', data))
                .catch((error) => {
                    console.error('Error', error)
                });
        });
    </script>
{% endblock %}