mirror of
https://github.com/Av0idD4rk/packmate.git
synced 2026-10-23 21:42:06 +00:00
90 lines
2.4 KiB
Vue
90 lines
2.4 KiB
Vue
<template>
|
|
<main class="col-md-9 ml-sm-auto col-lg-10 px-4">
|
|
<p>
|
|
<span style="background: rgba(224, 246, 255, 0.4); box-shadow: 0 0 5px 5px rgba(224, 246, 255, 0.4);">Outgoing</span>, <span style="background: rgba(251, 233, 231, 0.4); box-shadow: 0 0 5px 5px rgba(251, 233, 231, 0.4);">incoming</span>.
|
|
</p>
|
|
<Packet v-for="packet in packets"
|
|
:key="packet.id"
|
|
:id="packet.id"
|
|
:content="packet.content"
|
|
:timestamp="packet.timestamp"
|
|
:isIncoming="packet.incoming"></Packet>
|
|
<infinite-loading @infinite="infiniteHandler" spinner="waveDots" ref="infiniteLoading"></infinite-loading>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
import Packet from "@/components/Packet.vue";
|
|
import InfiniteLoading from "vue-infinite-loading";
|
|
import axios from "axios";
|
|
|
|
export default {
|
|
name: 'Content',
|
|
props: ['servicePort', 'streamId',],
|
|
data: function () {
|
|
return {
|
|
packets: [],
|
|
}
|
|
},
|
|
watch: {
|
|
'streamId': function (streamId) {
|
|
console.debug('Content.vue: streamId changed! new:', streamId);
|
|
this.packets = [];
|
|
this.$refs.infiniteLoading.stateChanger.reset();
|
|
},
|
|
},
|
|
methods: {
|
|
infiniteHandler($state) {
|
|
if (!this.streamId) return $state.complete();
|
|
console.debug('getting next portion of packets...');
|
|
const instance = axios.create({
|
|
baseURL: this.$store.state.apiUrl,
|
|
auth: {
|
|
username: this.$store.state.apiLogin,
|
|
password: this.$store.state.apiPassword,
|
|
},
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
},
|
|
});
|
|
|
|
const packets = this.packets;
|
|
let startsFrom;
|
|
if (packets && packets.length && packets[packets.length - 1]) {
|
|
startsFrom = packets[packets.length - 1].id;
|
|
} else {
|
|
startsFrom = 0;
|
|
}
|
|
|
|
instance.post(`/packet/${this.streamId}`, {
|
|
direction: 'ASC',
|
|
startingFrom: startsFrom,
|
|
pageSize: parseInt(this.$store.state.pageSize),
|
|
}).then(response => {
|
|
const data = response.data;
|
|
if (data.length === 0) return $state.complete();
|
|
if (data[0] && this.packets[0] && data[0].id === this.packets[0].id) {
|
|
$state.complete();
|
|
} else {
|
|
this.packets.push(...data);
|
|
$state.loaded();
|
|
}
|
|
}).catch(error => {
|
|
console.error('Failed to load new portion of packets', error);
|
|
return $state.error();
|
|
})
|
|
},
|
|
},
|
|
components: {Packet, InfiniteLoading,},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
main {
|
|
padding-top: 50px; /* Space for fixed navbar */
|
|
max-width: 80%;
|
|
margin-left: auto !important;
|
|
}
|
|
</style>
|