mkunz
/
transceivr


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
							<!DOCTYPE html>
<html lang="en">
<style>
    #myProgress {
        width: 100%;
        background-color: #ddd;
    }

    #myBar {
        width: 1%;
        height: 30px;
        background-color: #4CAF50;
    }
</style>
<head>
    <meta charset="utf-8">
    <title>Transloadr</title>
    <script src="js/vue.js"></script>
    <script src="js/moment.js"></script>

</head>
<body>

<div id="app">
    <input v-model="from" placeholder="from">
    <input v-model="to" placeholder="to">
    <button @click="send">Send</button>


    <table>
        <template v-for="(item, index) in transfers">
            <tr>
                <td> {{ item.id }}</td>
                <td style="width:200px;">
                    <div id="myProgress">
                        <div id="myBar" :style="{width: item.progress + '%'}">{{ item.progress }}</div>
                    </div>
                </td>
                <td style="width:200px;">
                    <pre></pre>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
<pre>id: {{ item.id}}
from: {{ item.from}}
to: {{ item.to}}
bytesRead: {{ item.bytesRead}}
uploadError: {{ item.uploadError}}
uploadCode: {{ item.uploadCode}}
uploadResponseBody: {{ item.uploadResponseBody}}
uploadDone: {{ item.uploadDone}}
downloadDone: {{ item.downloadDone}}
rate: {{ item.rate}}k/s

</pre>
                </td>
                <td></td>
            </tr>
        </template>
    </table>
</div>

<script type="application/javascript">
    new Vue({
        el: '#app',
        data: {
            input: '',
            transfers: [],
            from: '',
            to: ''
        },
        created: function () {
            setInterval(this.update, 330);
        },
        watch: {},
        methods: {
            send: function (ts) {
                let data = new URLSearchParams();
                data.append('from', this.from);
                data.append('to', this.to);
                fetch('/xfer', {
                    method: "POST",
                    body: data
                }).then(response => {
                    console.log(response);
                })
                .catch(error => {
                    this.$data.log = [];
                    console.log(error)
                });

            },
            ts2txt: function (ts) {
                return moment(ts).format('YYYY-MM-DD hh:mm ss.SSS ')
            },
            handleErrors: function (response) {
                if (!response.ok) throw Error(response.statusText);
                return response;
            },
            update: function (event) {
                fetch('/status', {method: "GET"})
                    .then(this.handleErrors)
                    .then(response => {
                        return response.json();
                    })
                    .then(myJson => {
                        this.$data.transfers = myJson;
                    })
                    .catch(error => {
                        this.$data.log = [];
                        console.log(error)
                    });
            }
        }
    })
</script>
</body>
</html>