123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- <!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>
- <select v-model="toMime">
- <option value="application/json">application/json</option>
- <option value="text/plain">text/plain</option>
- <option value="application/octet-stream">application/octet-stream</option>
- </select>
- <button @click="send">Send</button>
- <a href="#" @click="example1">example1</a>
- <a href="#" @click="example2">example2</a>
- <a href="#" @click="example3">example3</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',
- toMime: 'application/octet-stream',
- type: 'xfer',
- body: ''
- },
- 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';
- this.$data.type='xfer';
- this.$data.toMethod='POST';
- this.$data.toMime='application/octet-stream';
- },
- example2: function () {
- this.$data.from='http://ftp.debian.org/debian/ls-lR.gz';
- this.$data.to='http://localhost:8082/null';
- this.$data.type='xfer';
- this.$data.toMethod='POST';
- this.$data.toMime='application/octet-stream';
- },
- example3: function () {
- this.$data.body='[{}]';
- this.$data.to='http://localhost:8082/null';
- this.$data.toMethod='POST';
- this.$data.type='send';
- this.$data.toMime='application/json';
- },
- 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);
- data.append('toMime', this.toMime);
- 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>
|