feat: Add highlight for frames position in the hexdump (#80)

feat: Add highlight for frames position in the hexdump

src/components/Display.vue

@@ -122,6 +122,15 @@
                 <code>{{ data.repr }}</code>
               </li>
             </ul>
+
+            <!-- Location in the hexdump -->
+            <br />
+            <h4>Position in the hexdump</h4>
+            <v-divider> </v-divider>
+            <HighligtedHex
+              :partlyHex="data.hex_one"
+              :entireHex="entireHex"
+            ></HighligtedHex>
           </ul>
         </v-card-text>
       </v-expansion-panel-content>
@@ -130,12 +139,13 @@
 </template>
 
 <script>
-import DropDown from "./DropDown.vue";
 import Protocols from "../services/protocols.js";
+import DropDown from "./DropDown.vue";
+import HighligtedHex from "./HighligtedHex.vue";
 
 export default {
-  props: ["data"],
-  components: { DropDown },
+  props: ["data", "entireHex"],
+  components: { DropDown, HighligtedHex },
   data() {
     return {
       items: [],

src/components/HighligtedHex.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="wrapper">
+    <div v-html="highlight()"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class HighligtedHex extends Vue {
+  @Prop() entireHex: string | undefined;
+  @Prop() partlyHex: string | undefined;
+
+  highlight(): string {
+    const NOT_FOUND = "Not found";
+    if (this.entireHex === undefined || this.partlyHex === undefined) {
+      return NOT_FOUND;
+    }
+
+    const entire = this.entireHex.replace(/\s/g, "").toUpperCase();
+    const part = this.partlyHex.replace(/\s/g, "").toUpperCase();
+    const matchStartingPoint = entire.indexOf(part);
+    if (matchStartingPoint === -1) {
+      return NOT_FOUND;
+    }
+
+    const startCell = matchStartingPoint / 2;
+    const endCell = startCell + part.length / 2 - 1;
+
+    let separatedHex = this.split(entire);
+    if (separatedHex === null) {
+      return NOT_FOUND;
+    }
+
+    separatedHex[
+      startCell
+    ] = `<span class="highlightText">${separatedHex[startCell]}`;
+    separatedHex[endCell] = `${separatedHex[endCell]}</span>`;
+
+    if (!this.partlyHex) {
+      return this.entireHex;
+    }
+
+    for (let i = 1; i <= separatedHex?.length; ++i) {
+      if (i % 16 === 0) {
+        separatedHex[i - 1] = `${separatedHex[i - 1]}<br />`;
+      }
+    }
+    return separatedHex.join(" ");
+  }
+
+  split(splitted: string): RegExpMatchArray | null {
+    if (splitted === undefined) {
+      return null;
+    }
+
+    return splitted.match(/.{1,2}/g);
+  }
+}
+</script>
+
+<style>
+.highlightText {
+  background: rgb(255, 255, 0);
+}
+</style>

src/interfaces/packet.ts

@@ -2,3 +2,22 @@ export default interface Packet {
   name: string;
   scapy_name: string;
 }
+
+export interface StructureChksumStatus {
+  chksum: string;
+  chksum_calculated: string;
+  status: boolean | null;
+}
+
+export interface Structure {
+  name: string;
+  bytes: string;
+  hex: string;
+  hex_one: string;
+  length: number;
+  repr: string;
+  repr_full: string;
+  tshark_name: string;
+  tshart_raw_summary: string[];
+  chksum_status: StructureChksumStatus;
+}

src/views/pages/MainPage.vue

@@ -114,6 +114,7 @@
               :key="index + 1"
               :data="s"
               :data-index="index + 1"
+              :entireHex="hexValue"
               @warning="handleWarning"
             ></Display>
           </transition-group>
@@ -149,27 +150,30 @@
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 
-import MessageService from "@/services/apiService";
 import Display from "@/components/Display.vue";
+import HighligtedHex from "@/components/HighligtedHex.vue";
 import ShareButton from "@/components/ShareButton.vue";
+import { Structure } from "@/interfaces/packet";
+import MessageService from "@/services/apiService";
 import gsap from "gsap";
 
 @Component({
   components: {
     Display,
     ShareButton,
+    HighligtedHex,
   },
 })
 export default class LandingPage extends Vue {
   hexValue: any;
   decode = false;
   loading = false;
-  structure: Array<any> = [];
-  summary: Array<any> = [];
-  header: Array<any> = [];
+  structure: Array<Structure> = [];
+  summary: Array<unknown> = [];
+  header: Array<unknown> = [];
   alert = false;
   warning = false;
-  panel: Array<any> = [];
+  panel: Array<unknown> = [];
   isExpanded = false;
   expandOnLoad = true;
 
@@ -244,7 +248,7 @@ export default class LandingPage extends Vue {
   }
   packData(): void {
     this.header = [];
-    this.structure.forEach((packet) => {
+    this.structure.forEach((packet: Structure) => {
       this.header.push(packet["name"]);
     });
   }