<template>
    <div class="d-flex justify-content-center">
        <loading v-if="isLoading"></loading>

        <table>
            <tr>
                <td colspan="2">Select file with traces to upload:</td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="custom-file">
                        <input class="custom-file-input" type="file" name="fileToUpload" ref="file" id="fileToUpload" v-on:change="handleFileUpload()" />
                        <label class="custom-file-label" for="fileToUpload">{{file.name}}</label>
                    </div>
                </td>
            </tr>
            <tr v-if="extension == 'csv'">
                <td>Separator for .csv:</td>
                <td  class="d-flex justify-content-start">
                    <input class="form-control" type="text" v-model="sep" ref="sep" minlength="1" maxlength="1" size="1" v-on:change="handleSeparator()" required />
                </td>
            </tr>
            <tr class="d-flex justify-content-center">
                <td><input type="button" value="Upload" name="submit" @click.self="isLoading = true;" v-on:click="submit" class="btn btn-success"/></td>
            </tr>
        </table>
    </div>
</template>

<style>
    table {
        margin-top: 50px;
    }

    td {
        padding: 10px;
        text-align: center;
    }
</style>

<script>
    import axios from "axios";
    import Request from '../components/request/request.js';
    import Loading from "../components/loading/pageLoading.vue";

    export default {
        name: "home",
        data: function () {
            return {
                file: '',
                extension: '',
                sep: ',',
                isLoading: false,
            }
        },

        components: {
            Loading,
        },

        methods: {
            handleSeparator(){
                this.sep = this.$refs.sep.value;
            },
            handleFileUpload(){
                this.file = this.$refs.file.files[0];
                this.extension = this.file.name.split('.').pop();
            },

            submit() {
                this.isLoading = true;
                let formData = new FormData();

                formData.append('file', this.file);

                let header = axios.create({headers: { 'Content-Type': 'multipart/form-data'}});

                Request.getAxios().post(
                    this.$hostname + "/upload/",
                    formData,
                    header
                ).then((response) => {
                    this.isLoading = false;
                    this.$router.push({name: this.extension, params: {
                                                                    token: response.data.content[0],
                                                                    sep: this.sep
                                                                }});
                })
            }
        }
    }
</script>