<template>
  <div>
    <div v-if="getPortDiff(newScan, oldScan).length + getPortDiff(oldScan, newScan).length == 0">
      <h4>No Differences Found</h4>
    </div>
    <div v-if="getPortDiff(newScan, oldScan).length > 0">
      <h4 style="text-decoration: underline;">
        New Ports
      </h4>
      <PortList
        :ports="getPortDiff(newScan, oldScan)"
        item-width="70px"
      />
    </div>
    <div v-if="getPortDiff(oldScan, newScan).length > 0">
      <h4 style="text-decoration: underline;">
        Removed Ports
      </h4>
      <PortList
        :ports="getPortDiff(oldScan, newScan)"
        item-width="70px"
      />
    </div>
  </div>
</template>

<script>
import PortList from '../components/PortList.vue'

export default {
    name: 'ScanCompare',
    components: {
        PortList,
    },
    props: {
        newScan: {
            type: Object,
            required: true
        },
        oldScan: {
            type: Object,
            required: true
        }
    },
    methods: {
        /**
         * Returns left outer join between s1 scan, and s2 scan. We use this
         * to figure out what ports have been add / removed between the two
         * reference scans.
         **/
        getPortDiff(s1, s2) {
            return s1.results
                .filter(p => !s2.results.includes(p));
        },
    }
}
</script>

<style scoped>
h4 {
    margin: 10px 0px;
    text-align: center;
}
</style>
