diff --git a/src/components/Content.vue b/src/components/Content.vue index 054a793..6ed85ef 100644 --- a/src/components/Content.vue +++ b/src/components/Content.vue @@ -44,11 +44,20 @@ export default { '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}`, { - fetchLatest: true, + fetchLatest: false, direction: 'ASC', - startingFrom: this.packets.length, - pageSize: 50, + startingFrom: startsFrom, + pageSize: parseInt(this.$store.state.pageSize), }).then(response => { const data = response.data; if (data.length === 0) return $state.complete(); diff --git a/src/components/Packet.vue b/src/components/Packet.vue index da4ce8d..a211642 100644 --- a/src/components/Packet.vue +++ b/src/components/Packet.vue @@ -13,13 +13,14 @@ export default { name: 'Packet', props: ['id', 'content', 'timestamp',], methods: { - hexdump(buffer, blockSize) { + hexdump(buffer, blockSize, lineNumberBase) { blockSize = parseInt(blockSize, 10) || 16; + lineNumberBase = parseInt(lineNumberBase, 10) || 10; let lines = []; const hex = "0123456789ABCDEF"; for (let b = 0; b < buffer.length; b += blockSize) { let block = buffer.slice(b, Math.min(b + blockSize, buffer.length)); - let addr = ("0000000000" + b.toString(10)).slice(-10); + let addr = ("0000000000" + b.toString(lineNumberBase)).slice(-10); let codes = block.split('').map(ch => { let code = ch.charCodeAt(0); return " " + hex[(0xF0 & code) >> 4] + hex[0x0F & code]; @@ -37,7 +38,7 @@ export default { hexdata() { // const dataString = decodeURIComponent(escape(atob(this.$props.content))); const dataString = atob(this.$props.content); - return this.hexdump(dataString, this.$store.state.hexdumpBlockSize); + return this.hexdump(dataString, this.$store.state.hexdumpBlockSize, this.$store.state.hexdumpLineNumberBase); }, }, } diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index 72fc046..52fa217 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -7,18 +7,37 @@ -
- - + +
+
+ + +
+
+ + +
-
- - + +
+
+ + +
+
+ + +
+
- - + +
+ @@ -77,6 +96,22 @@ export default { this.$store.commit('setHexdumpBlockSize', value); }, }, + hexdumpLineNumberBase: { + get() { + return this.$store.state.hexdumpLineNumberBase; + }, + set(value) { + this.$store.commit('setHexdumpLineNumberBase', value); + }, + }, + pageSize: { + get() { + return this.$store.state.pageSize; + }, + set(value) { + this.$store.commit('setPageSize', value); + }, + }, }, } @@ -100,7 +135,7 @@ export default { } .modal-container { - width: 300px; + width: 500px; margin: 0 auto; padding: 20px 30px; background-color: #fff; diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index efdba4e..0713e6e 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -48,11 +48,20 @@ export default { 'Content-Type': 'application/json', }, }); + + const streams = this.streams; + let startsFrom; + if (streams && streams.length && streams[streams.length - 1]) { + startsFrom = streams[streams.length - 1].id; + } else { + startsFrom = Number.MAX_SAFE_INTEGER; // FIXME -_- + } + instance.post(`/stream/${this.$props.servicePort || 'all'}`, { - fetchLatest: true, + fetchLatest: false, direction: 'DESC', - startingFrom: this.streams.length, - pageSize: 50, + startingFrom: startsFrom, + pageSize: parseInt(this.$store.state.pageSize), }).then(response => { const data = response.data; if (data.length === 0) return $state.complete(); diff --git a/src/store.js b/src/store.js index 6ff1a39..5dd8873 100644 --- a/src/store.js +++ b/src/store.js @@ -10,12 +10,16 @@ export default new Vuex.Store({ apiLogin: 'BinaryBears', apiPassword: '123456', hexdumpBlockSize: 16, + hexdumpLineNumberBase: 10, + pageSize: 50, }, mutations: { setApiUrl: (state, payload) => state.apiUrl = payload, setApiLogin: (state, payload) => state.apiLogin = payload, setApiPassword: (state, payload) => state.apiPassword = payload, setHexdumpBlockSize: (state, payload) => state.hexdumpBlockSize = payload, + setHexdumpLineNumberBase: (state, payload) => state.hexdumpLineNumberBase = payload, + setPageSize: (state, payload) => state.pageSize = payload, }, plugins: [createPersistedState(),], })