12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <!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">
- <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: [],
- },
- created: function () {
- setInterval(this.update, 330);
- },
- watch: {},
- methods: {
- 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>
|