mkunz
/
transceivr


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
							<!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>Transceivr</title>
    <script src="js/vue.js"></script>
    <script src="js/moment.js"></script>
</head>
<body>
<div id="app">
    <input v-model="from" placeholder="from" size="80" v-if="type == 'xfer'">
    <textarea v-model="body" placeholder="{[]}" v-if="type == 'send'"></textarea>
    <br>
    <input v-model="to" placeholder="to" size="80"><br>
    <select v-model="type">
        <option value="xfer">xfer</option>
        <option value="send">send</option>
    </select>
    <select v-model="toMethod">
        <option value="POST">POST</option>
        <option value="PUT">PUT</option>
    </select>
    <button @click="send">Send</button>
    <a href="#" @click="example1">example1</a>
    <a href="#" @click="example2">example2</a>
    <table>
        <template v-for="(item, index) in transfers">
            <tr>
                <td> {{ item.id }}</td>
                <td style="width:200px;" colspan="2">
                    <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><button @click="cancel(item.id)">cancel</button>
    </td><td>
<pre>id: {{ item.id}}
from: {{ item.from}}
to: {{ item.to}}
contentLength: {{ item.contentLength }}
bytesRead: {{ item.bytesRead}}
downloadError: {{ item.downloadError}}
downloadCode: {{ item.downloadCode}}
downloadDone: {{ item.downloadDone}}
finished: {{ item.finished}}
finishedAT: {{ item.finishedAT}}
</pre>
</td>
<td><pre>rate: {{ item.rate}}k/s
toMethod: {{ item.toMethod}}
uploadError: {{ item.uploadError}}
uploadCode: {{ item.uploadCode}}
uploadResponseBody: {{ item.uploadResponseBody}}
uploadDone: {{ item.uploadDone}}
cpeeCallbackResult: {{ item.cpeeCallbackResult}}
cpeeCallbackCode: {{ item.cpeeCallbackCode}}
cpeeCallbackMessage: {{ item.cpeeCallbackMessage}}
cpeeCallbackError: {{ item.cpeeCallbackError}}
</pre></td>
</tr>
</template>
</table>
</div>

<script type="application/javascript">
    new Vue({
        el: '#app',
        data: {
            input: '',
            transfers: [],
            from: '',
            to: '',
            toMethod: 'POST',
            type: 'xfer'
        },
        created: function () {
            setInterval(this.update, 330);
        },
        watch: {},
        methods: {
            example1: function () {
                this.$data.from='http://localhost:8082/zero?length=1000000';
                this.$data.to='http://localhost:8082/null';
            },
            example2: function () {
                this.$data.from='http://ftp.debian.org/debian/ls-lR.gz';
                this.$data.to='http://localhost:8082/null';
            },
            send: function (ts) {
                let data = new URLSearchParams();
                data.append('from', this.from);
                data.append('to', this.to);
                data.append('toMethod', this.toMethod);
                data.append('body', this.body);
                ep=this.$data.type;
                fetch('/' + ep, {
                    method: "POST",
                    body: data
                }).then(response => {
                    console.log(response);
                })
                .catch(error => {
                    this.$data.log = [];
                    console.log(error)
                });
            },
            cancel: function (id) {
                let data = new URLSearchParams();
                data.append('id', id);
                fetch('/cancel', {
                    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>