TAT-138 create calculator pages (#11)

* feat(TAT-138): overall page structure

* feat(TAT-138): get filter section scaffolded out

* feat(TAT-138): reorganize files

* feat(TAT-138): add system config section

* feat(TAT-138): fine tune responsive design

* feat(TAT-138): finalize changes

* feat(TAT-124):  foundation for top ten list page

* fix (TAT-124): refactor to move calculator code into components and add mobile view

* style(TAT-124): added formatting for calculator accordion headers

* refactor(TAT-138): integrate two calculator screens and link between them

* style(TAT-124): format section selections on calculator page so user can see what they selected

* feat(TAT-124): add markdown library for technique descriptions

* refactor(TAT-124): reorganize css into component files

* refactor(TAT-138): pull in changes from homepage

* refactor(TAT-138): lint fix

* refactor(TAT-124): download technique list, persist filter selections, open markdown links in new tab

* refactor(TAT-124): clean up css and unused code

* refactor(TAT-138): requested wording fixes, remove logs, styling fix

---------

Co-authored-by: arobbins <arobbins@mitre.org>

package.json

@@ -10,7 +10,10 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "downloadjs": "^1.4.7",
+    "marked": "^12.0.1",
     "pinia": "^2.0.29",
+    "primeicons": "^7.0.0",
     "primevue": "^3.49.1",
     "vue": "^3.2.37",
     "vue-router": "^4.1.6"

src/App.vue

@@ -5,6 +5,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import 'primeicons/primeicons.css'
 import NavigationMenu from "@/components/NavigationMenu.vue";
 
 export default defineComponent({

src/components/CalculatorFilters.vue

@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <Accordion>
+            <AccordionTab v-for="group in calculatorStore.filterProperties" :key="group.id" :header="group.label">
+                <div v-for="option in group.options" :key="option.id" class="checkbox-group">
+                    <Checkbox :input-id="option.id" :value="option.name" v-model="this.filters[group.id]"
+                        class="my-auto" />
+                    <label class="my-auto">{{ option.name }}</label>
+                </div>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import Accordion from "primevue/accordion";
+import AccordionTab from "primevue/accordiontab";
+import Checkbox from "primevue/checkbox";
+import { useCalculatorStore } from "../stores/calculator.store";
+
+export default defineComponent({
+    components: { Accordion, AccordionTab, Checkbox },
+    data() {
+        return {
+            calculatorStore: useCalculatorStore(),
+        };
+    },
+    computed: {
+        filters() {
+            return this.calculatorStore.activeFilters
+        },
+    },
+    methods: {
+        saveNewFilterValues() {
+            this.calculatorStore.updateActiveFilters(this.filters)
+        },
+    }
+});
+</script>
+
+<style scoped></style>

src/components/CalculatorSystem.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div v-for="monitoringType of Object.keys(this.calculatorStore.systemScore)" :key="monitoringType"
+            class=" 2xl:flex lg:block md:flex my-4">
+            <h3 class="uppercase font-semibold text-xl my-auto">{{ monitoringType }} Monitoring Components</h3>
+            <select-button v-model="this.systemScores[monitoringType]" :options="this.options" optionLabel="label"
+                dataKey="value" class="my-auto ml-auto"></select-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useCalculatorStore } from "../stores/calculator.store";
+import SelectButton from "primevue/selectbutton";
+
+export default defineComponent({
+    components: { SelectButton },
+    data() {
+        return {
+            calculatorStore: useCalculatorStore(),
+            selectedValue: 0,
+            options: [
+                { label: "None", value: 1 },
+                { label: "Low", value: 0.6666666666667 },
+                { label: "Medium", value: 0.33333333333 },
+                { label: "High", value: 0 },
+            ]
+        };
+    },
+    computed: {
+        systemScores() {
+            return this.calculatorStore.systemScore
+        },
+    },
+    methods: {
+        saveNewScores() {
+            this.calculatorStore.updateSystemScores(this.systemScores)
+        },
+    }
+});
+</script>
+
+<style scoped></style>

src/components/NavigationMenu.vue

@@ -54,7 +54,7 @@ export default defineComponent({
     getActiveIndex() {
       const route = this.$route.path;
       return this.items.findIndex(function (item) {
-        return item.route === route;
+        return item.route.split("/")[1] === route.split("/")[1];
       });
     },
   },

src/components/SystemScoreSection.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="lg:hidden flex px-4 py-2">
+        <h2 class="uppercase font-bold text-xl">Your System:</h2>
+        <button class=" ml-auto" @click="editSelections()">
+            <i class="pi pi-cog"
+                v-tooltip="'Edit your filters and components to fine tune your top ten techniques'"></i>
+        </button>
+    </div>
+    <div class="system-score-row">
+        <div v-for="monitoringType of Object.keys(this.calculatorStore.systemScore)" :key="monitoringType"
+            class="w-max inline-block mr-4">
+            <span class="highlight">{{ getScoreText(monitoringType) }}</span>
+            {{ monitoringType }} Monitoring
+        </div>
+        <div v-for="filter of Object.keys(this.calculatorStore.activeFilters)" :key="filter" class="inline-block">
+            <span class="mr-4 w-max inline-block" v-if="this.calculatorStore.activeFilters[filter].length > 0">
+                {{ filter }}:
+                <span class="highlight">{{ this.calculatorStore.activeFilters[filter].join(", ") }}</span>
+            </span>
+        </div>
+        <div class="lg:inline-block hidden cursor-pointer" @click="editSelections()"
+            v-tooltip.top="'Edit your filters and components to fine tune your top ten techniques'">
+            <i class="pi pi-cog mr-2 mt-auto"></i>
+            <span class="my-auto xl:inline xl:w-0 lg:hidden ">Edit Selection</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useCalculatorStore } from "../stores/calculator.store";
+import { router } from "../router";
+import Tooltip from 'primevue/tooltip';
+
+export default defineComponent({
+    data() {
+        return {
+            calculatorStore: useCalculatorStore(),
+            activeItemId: 1,
+        };
+    },
+    methods: {
+        getScoreText(key) {
+            if (this.calculatorStore.systemScore[key].label === "None") { return "No" }
+            return this.calculatorStore.systemScore[key].label
+        },
+        editSelections() {
+            router.push({ path: '/calculator' })
+        },
+    },
+    directives: {
+        Tooltip
+    }
+});
+</script>
+
+<style scoped>
+.system-score-row {
+    font-family: "Fira Sans Extra Condensed", sans-serif;
+    @apply lg:max-w-max lg:mx-auto mx-4 uppercase font-bold;
+}
+
+.system-score-row .highlight {
+    @apply text-ctid-primary-purple
+}
+</style>

src/components/TopTenAccordion.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <Accordion :active-index="activeItemId">
+            <AccordionTab v-for="(n, i) in 10" :key="i">
+                <template #header>
+                    <h2>
+                        {{ i + 1 }}.
+                        <span class="highlight">
+                            {{ rankedList[i].tid }}
+                        </span>
+                        {{ rankedList[i].name }}
+                    </h2>
+                </template>
+                <TopTenDetails :technique="rankedList[i]" />
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import Accordion from "primevue/accordion";
+import AccordionTab from "primevue/accordiontab";
+import TopTenDetails from "./TopTenDetails.vue";
+
+export default defineComponent({
+    components: { Accordion, AccordionTab, TopTenDetails },
+    props: {
+        rankedList: [],
+        activeItemId: Number,
+    },
+    data() {
+        return {};
+    },
+});
+</script>
+
+<style scoped></style>