From 360cf7046bf017fc0e69cb764a9c03d1f096e764 Mon Sep 17 00:00:00 2001
From: mderler <derler190063@sr.htlweiz.at>
Date: Fri, 22 Sep 2023 22:59:20 +0000
Subject: [PATCH 1/3] Add Command type & Factory

---
 src/App.vue                         | 25 ++++++++++++++-----------
 src/commands/command.factory.ts     | 13 +++++++++++++
 src/commands/command.ts             |  3 +++
 src/commands/type-filter.command.ts | 13 +++++++++++++
 4 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 src/commands/command.factory.ts
 create mode 100644 src/commands/command.ts
 create mode 100644 src/commands/type-filter.command.ts

diff --git a/src/App.vue b/src/App.vue
index 79cd976..2df8b84 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@ import axios from 'axios'
 import InputBar from './components/InputBar.vue'
 import ValuesDisplay from './components/ValuesDisplay.vue'
 import TypesDisplay from './components/TypesDisplay.vue'
+import CommandFactory from './commands/command.factory'
 
 import { ValueType } from './scripts/value_type'
 import { Value } from './scripts/value'
@@ -14,9 +15,9 @@ export default {
     return {
       values: new Array<Value>(),
       value_types: new Array<ValueType>(),
-      filter_start : '',
-      filter_end : '',
-      filter_type : ''
+      filter_start: '',
+      filter_end: '',
+      filter_type: ''
     }
   },
   mounted() {
@@ -38,16 +39,18 @@ export default {
     },
     update_search(args: string[]) {
       console.log('New search arguemnts', args)
-      this.filter_end=''
-      this.filter_start=''
-      this.filter_type=''
+      this.filter_end = ''
+      this.filter_start = ''
+      this.filter_type = ''
+      const commandFactory = new CommandFactory()
       for (var i = 0; i < args.length; i++) {
-        const command = args[i]
-        console.log('handling command', command)
+        console.log('handling command', args[i])
         const command_and_args = args[i].split(':')
         if (command_and_args.length == 2) {
           const key = command_and_args[0]
           const value = command_and_args[1]
+          const command = commandFactory.getCommand(key)
+          command.execute(value)
           if (key == 'type') {
             this.filter_type = this.getTypeId(value)
             console.log('Update typeid', this.filter_type)
@@ -60,7 +63,7 @@ export default {
             continue
           }
         }
-        console.log('Ignoring command', command)
+        console.log('Ignoring command', args[i])
       }
       this.get_values().then((result) => {
         this.values = result
@@ -79,7 +82,7 @@ export default {
     get_values() {
       const promise = new Promise<Value[]>((accept, reject) => {
         const url = '/api/value/'
-        var params : { [key: string]: string } = {}
+        var params: { [key: string]: string } = {}
         if (this.filter_type != '') {
           params['type_id'] = this.filter_type
         }
@@ -87,7 +90,7 @@ export default {
           params['end'] = this.filter_end
         }
         if (this.filter_start != '') {
-          params['start']=this.filter_start
+          params['start'] = this.filter_start
         }
         console.log('Trying to get url', url)
         axios
diff --git a/src/commands/command.factory.ts b/src/commands/command.factory.ts
new file mode 100644
index 0000000..0704cf5
--- /dev/null
+++ b/src/commands/command.factory.ts
@@ -0,0 +1,13 @@
+import type Command from './command'
+import TypeFilterCommand from './type-filter.command'
+
+class CommandFactory {
+  private static readonly register: Record<string, new () => Command> = { type: TypeFilterCommand }
+
+  public getCommand(command: string) {
+    const cmd = CommandFactory.register[command]
+    return new cmd()
+  }
+}
+
+export default CommandFactory
diff --git a/src/commands/command.ts b/src/commands/command.ts
new file mode 100644
index 0000000..b8de1f4
--- /dev/null
+++ b/src/commands/command.ts
@@ -0,0 +1,3 @@
+export default interface Command {
+  execute(arg: unknown): void
+}
diff --git a/src/commands/type-filter.command.ts b/src/commands/type-filter.command.ts
new file mode 100644
index 0000000..f822c66
--- /dev/null
+++ b/src/commands/type-filter.command.ts
@@ -0,0 +1,13 @@
+import type Command from './command'
+
+class TypeFilterCommand implements Command {
+  execute(arg: unknown): void {
+    if (typeof arg != 'string') {
+      throw new TypeError()
+    }
+
+    console.log(arg)
+  }
+}
+
+export default TypeFilterCommand

From 2bcd6ce25d1b247d285884b84a11783038132e91 Mon Sep 17 00:00:00 2001
From: mderler <derler190063@sr.htlweiz.at>
Date: Sun, 24 Sep 2023 21:10:10 +0000
Subject: [PATCH 2/3] Add type filter command

---
 src/App.vue                         | 106 +++++++---------------------
 src/commands/command.factory.ts     |  23 +++---
 src/commands/command.ts             |   7 +-
 src/commands/type-filter.command.ts |  15 ++--
 src/main.ts                         |   2 +-
 src/stores/value-type.store.ts      |  31 ++++++++
 src/stores/value.store.ts           |  24 +++++++
 src/types/url-paras.type.ts         |   1 +
 8 files changed, 108 insertions(+), 101 deletions(-)
 create mode 100644 src/stores/value-type.store.ts
 create mode 100644 src/stores/value.store.ts
 create mode 100644 src/types/url-paras.type.ts

diff --git a/src/App.vue b/src/App.vue
index 2df8b84..7851bc3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,110 +1,53 @@
 <script setup lang="ts">
-import axios from 'axios'
 import InputBar from './components/InputBar.vue'
 import ValuesDisplay from './components/ValuesDisplay.vue'
 import TypesDisplay from './components/TypesDisplay.vue'
-import CommandFactory from './commands/command.factory'
+import { CommandFactory } from './commands/command.factory'
 
-import { ValueType } from './scripts/value_type'
-import { Value } from './scripts/value'
+import { useValueStore } from './stores/value.store'
+import { useValueTypeStore } from './stores/value-type.store'
+
+import type { UrlParams } from './types/url-paras.type'
 </script>
 
 <script lang="ts">
 export default {
   data() {
+    const valueStore = useValueStore()
+    const valueTypeStore = useValueTypeStore()
+    const params: UrlParams = {}
+    const commandFactory = new CommandFactory(params)
     return {
-      values: new Array<Value>(),
-      value_types: new Array<ValueType>(),
-      filter_start: '',
-      filter_end: '',
-      filter_type: ''
+      params,
+      commandFactory,
+      valueStore,
+      valueTypeStore
     }
   },
   mounted() {
-    this.get_types()
-    this.get_values().then((data) => {
-      this.values = data
-    })
+    this.valueTypeStore.updateValueTypes()
+    this.valueStore.updateValues()
   },
   methods: {
-    getTypeId(type_name: string) {
-      var return_value = ''
-      for (var i = 0; i < this.value_types.length; i++) {
-        if (this.value_types[i].type_name.toUpperCase() == type_name.toUpperCase()) {
-          return_value = '' + this.value_types[i].id
-          console.log('Found matching type', this.value_types[i])
-        }
-      }
-      return return_value
-    },
     update_search(args: string[]) {
       console.log('New search arguemnts', args)
-      this.filter_end = ''
-      this.filter_start = ''
-      this.filter_type = ''
-      const commandFactory = new CommandFactory()
       for (var i = 0; i < args.length; i++) {
         console.log('handling command', args[i])
         const command_and_args = args[i].split(':')
         if (command_and_args.length == 2) {
           const key = command_and_args[0]
           const value = command_and_args[1]
-          const command = commandFactory.getCommand(key)
-          command.execute(value)
-          if (key == 'type') {
-            this.filter_type = this.getTypeId(value)
-            console.log('Update typeid', this.filter_type)
-            continue
-          } else if (key == 'start') {
-            this.filter_start = value
-            continue
-          } else if (key == 'end') {
-            this.filter_end = value
+          const command = this.commandFactory.getCommand(key)
+          console.log(key)
+          if (command) {
+            command.execute(value)
             continue
           }
         }
         console.log('Ignoring command', args[i])
       }
-      this.get_values().then((result) => {
-        this.values = result
-      })
-    },
-    get_types() {
-      axios
-        .get('/api/type/')
-        .then((result) => {
-          this.value_types = result.data
-        })
-        .catch((error) => {
-          console.error(error)
-        })
-    },
-    get_values() {
-      const promise = new Promise<Value[]>((accept, reject) => {
-        const url = '/api/value/'
-        var params: { [key: string]: string } = {}
-        if (this.filter_type != '') {
-          params['type_id'] = this.filter_type
-        }
-        if (this.filter_end != '') {
-          params['end'] = this.filter_end
-        }
-        if (this.filter_start != '') {
-          params['start'] = this.filter_start
-        }
-        console.log('Trying to get url', url)
-        axios
-          .get(url, { params: params })
-          .then((result) => {
-            // console.log('Got values: ', result.data)
-            accept(result.data)
-          })
-          .catch((error) => {
-            console.error(error)
-            reject(error)
-          })
-      })
-      return promise
+      console.log(this.params)
+      this.valueStore.updateValues(this.params)
     }
   }
 }
@@ -114,7 +57,10 @@ export default {
   <div class="container p-1">
     <h1 class="row">RDP</h1>
     <InputBar @search="update_search" />
-    <TypesDisplay :value_types="value_types" @update_type="get_types" />
-    <ValuesDisplay :values="values" :value_types="value_types" />
+    <TypesDisplay
+      :value_types="valueTypeStore.valueTypes"
+      @update_type="valueTypeStore.updateValueTypes"
+    />
+    <ValuesDisplay :values="valueStore.values" :value_types="valueTypeStore.valueTypes" />
   </div>
 </template>
diff --git a/src/commands/command.factory.ts b/src/commands/command.factory.ts
index 0704cf5..f702ed0 100644
--- a/src/commands/command.factory.ts
+++ b/src/commands/command.factory.ts
@@ -1,13 +1,18 @@
-import type Command from './command'
-import TypeFilterCommand from './type-filter.command'
+import type { UrlParams } from '@/types/url-paras.type'
+import { Command } from './command'
+import { TypeFilterCommand } from './type-filter.command'
 
-class CommandFactory {
-  private static readonly register: Record<string, new () => Command> = { type: TypeFilterCommand }
+export class CommandFactory {
+  private static readonly registeredCommands: Record<string, new (params: UrlParams) => Command> = {
+    type: TypeFilterCommand
+  }
+
+  constructor(private params: UrlParams) {}
 
-  public getCommand(command: string) {
-    const cmd = CommandFactory.register[command]
-    return new cmd()
+  public getCommand(command: string): Command | undefined {
+    const cmd = CommandFactory.registeredCommands[command]
+    if (cmd) {
+      return new cmd(this.params)
+    }
   }
 }
-
-export default CommandFactory
diff --git a/src/commands/command.ts b/src/commands/command.ts
index b8de1f4..9f9ae5b 100644
--- a/src/commands/command.ts
+++ b/src/commands/command.ts
@@ -1,3 +1,6 @@
-export default interface Command {
-  execute(arg: unknown): void
+import type { UrlParams } from '@/types/url-paras.type'
+
+export abstract class Command {
+  public constructor(protected params: UrlParams) {}
+  public abstract execute(arg: string): void
 }
diff --git a/src/commands/type-filter.command.ts b/src/commands/type-filter.command.ts
index f822c66..1ddd5ab 100644
--- a/src/commands/type-filter.command.ts
+++ b/src/commands/type-filter.command.ts
@@ -1,13 +1,10 @@
-import type Command from './command'
+import { Command } from './command'
+import { useValueTypeStore } from '@/stores/value-type.store'
 
-class TypeFilterCommand implements Command {
-  execute(arg: unknown): void {
-    if (typeof arg != 'string') {
-      throw new TypeError()
-    }
+export class TypeFilterCommand extends Command {
+  private valueTypeStore = useValueTypeStore()
 
-    console.log(arg)
+  execute(arg: string): void {
+    this.params['type_id'] = this.valueTypeStore.getTypeId(arg)
   }
 }
-
-export default TypeFilterCommand
diff --git a/src/main.ts b/src/main.ts
index 86e85be..0f0513f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import "./scss/custom.scss"
+import './scss/custom.scss'
 import 'bootstrap'
 import 'bootstrap-icons/font/bootstrap-icons.scss'
 
diff --git a/src/stores/value-type.store.ts b/src/stores/value-type.store.ts
new file mode 100644
index 0000000..79d12ce
--- /dev/null
+++ b/src/stores/value-type.store.ts
@@ -0,0 +1,31 @@
+import axios from 'axios'
+
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { ValueType } from '@/scripts/value_type'
+
+export const useValueTypeStore = defineStore('valueType', () => {
+  const valueTypes = ref<ValueType[]>([])
+  const getTypeId = (type_name: string) => {
+    var return_value = ''
+    for (var i = 0; i < valueTypes.value.length; i++) {
+      if (valueTypes.value[i].type_name.toUpperCase() == type_name.toUpperCase()) {
+        return_value = '' + valueTypes.value[i].id
+        console.log('Found matching type', valueTypes.value[i])
+      }
+    }
+    return return_value
+  }
+  const updateValueTypes = () => {
+    axios
+      .get('/api/type/')
+      .then((result) => {
+        valueTypes.value = result.data
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+  }
+
+  return { valueTypes, getTypeId, updateValueTypes }
+})
diff --git a/src/stores/value.store.ts b/src/stores/value.store.ts
new file mode 100644
index 0000000..eef66f3
--- /dev/null
+++ b/src/stores/value.store.ts
@@ -0,0 +1,24 @@
+import axios from 'axios'
+
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { Value } from '@/scripts/value'
+import type { UrlParams } from '@/types/url-paras.type'
+
+export const useValueStore = defineStore('value', () => {
+  const values = ref<Value[]>([])
+  const updateValues = (params: UrlParams = {}) => {
+    const url = '/api/value/'
+    console.log('Trying to get url', url)
+    axios
+      .get(url, { params })
+      .then((result) => {
+        values.value = result.data
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+  }
+
+  return { values, updateValues }
+})
diff --git a/src/types/url-paras.type.ts b/src/types/url-paras.type.ts
new file mode 100644
index 0000000..1540af8
--- /dev/null
+++ b/src/types/url-paras.type.ts
@@ -0,0 +1 @@
+export type UrlParams = { [key: string]: string }

From 205448517a5ec70969a23267a2dbc41ee6bb5d3d Mon Sep 17 00:00:00 2001
From: mderler <derler190063@sr.htlweiz.at>
Date: Sun, 24 Sep 2023 21:16:24 +0000
Subject: [PATCH 3/3] Add start & end filter commands

---
 src/App.vue                          | 2 --
 src/commands/command.factory.ts      | 6 +++++-
 src/commands/end-filter.command.ts   | 7 +++++++
 src/commands/start-filter.command.ts | 7 +++++++
 4 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 src/commands/end-filter.command.ts
 create mode 100644 src/commands/start-filter.command.ts

diff --git a/src/App.vue b/src/App.vue
index 7851bc3..8dc27e4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,7 +38,6 @@ export default {
           const key = command_and_args[0]
           const value = command_and_args[1]
           const command = this.commandFactory.getCommand(key)
-          console.log(key)
           if (command) {
             command.execute(value)
             continue
@@ -46,7 +45,6 @@ export default {
         }
         console.log('Ignoring command', args[i])
       }
-      console.log(this.params)
       this.valueStore.updateValues(this.params)
     }
   }
diff --git a/src/commands/command.factory.ts b/src/commands/command.factory.ts
index f702ed0..a4dceed 100644
--- a/src/commands/command.factory.ts
+++ b/src/commands/command.factory.ts
@@ -1,10 +1,14 @@
 import type { UrlParams } from '@/types/url-paras.type'
 import { Command } from './command'
 import { TypeFilterCommand } from './type-filter.command'
+import { StartFilterCommand } from './start-filter.command'
+import { EndFilterCommand } from './end-filter.command'
 
 export class CommandFactory {
   private static readonly registeredCommands: Record<string, new (params: UrlParams) => Command> = {
-    type: TypeFilterCommand
+    type: TypeFilterCommand,
+    start: StartFilterCommand,
+    end: EndFilterCommand
   }
 
   constructor(private params: UrlParams) {}
diff --git a/src/commands/end-filter.command.ts b/src/commands/end-filter.command.ts
new file mode 100644
index 0000000..f205f36
--- /dev/null
+++ b/src/commands/end-filter.command.ts
@@ -0,0 +1,7 @@
+import { Command } from './command'
+
+export class EndFilterCommand extends Command {
+  execute(arg: string): void {
+    this.params['end'] = arg
+  }
+}
diff --git a/src/commands/start-filter.command.ts b/src/commands/start-filter.command.ts
new file mode 100644
index 0000000..0202313
--- /dev/null
+++ b/src/commands/start-filter.command.ts
@@ -0,0 +1,7 @@
+import { Command } from './command'
+
+export class StartFilterCommand extends Command {
+  execute(arg: string): void {
+    this.params['start'] = arg
+  }
+}