Add search

web/frontend/src/App.vue

@@ -18,6 +18,7 @@
             <b-nav-item :to="'/'">Home</b-nav-item>
             <b-nav-item :to="'/stats'">Stats</b-nav-item>
             <b-nav-item :to="'/attempts'">Attempts</b-nav-item>
+            <b-nav-item :to="'/search'">Search</b-nav-item>
           </b-navbar-nav>
         </b-collapse>
       </b-navbar>

web/frontend/src/components/AttemptList.vue

@@ -8,7 +8,7 @@
         hover
         :items="attempts"
         :fields="fields"
-      ></b-table>
+      />
     </p>
   </div>
 </template>

web/frontend/src/components/SearchResult.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="search-result-container">
+    <h1>Search</h1>
+    <b-form @submit="onSubmit">
+      <b-form-input v-model="searchString" placeholder="" />
+    </b-form>
+    <b-table
+      class="search-results-table"
+      responsive="md"
+      striped
+      hover
+      :items="attempts"
+      :fields="fields"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { LoginAttempt } from '@/apiary/apiary';
+import { BvTableFieldArray, BvTableFormatterCallback } from 'bootstrap-vue';
+import Axios from 'axios';
+
+@Component
+export default class SearchResult extends Vue {
+  attempts: LoginAttempt[];
+
+  searchString: string;
+
+  constructor() {
+    super();
+    this.attempts = [];
+    this.searchString = '';
+  }
+
+  fields: BvTableFieldArray = [
+    {
+      key: 'date',
+      sortable: true,
+      formatter: (value: string): string => {
+        const d = new Date(value);
+        // This seems stupid...
+        return d.toTimeString().split(' ')[0];
+      },
+      sortByFormatted: false,
+    },
+    {
+      key: 'username',
+    },
+    {
+      key: 'password',
+    },
+    {
+      key: 'remoteIP',
+      sortable: true,
+    },
+    {
+      key: 'country',
+    },
+  ];
+
+  onSubmit(event: Event) {
+    event.preventDefault();
+
+    console.log(this.searchString);
+    const resp = Axios.get<LoginAttempt[]>(
+      `/api/query?query=${this.searchString}`,
+    );
+
+    resp.then((r) => {
+      this.attempts = r.data;
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-results-table {
+  margin-top: 50px;
+}
+</style>

web/frontend/src/main.ts

@@ -4,6 +4,7 @@ import VueRouter, { RouteConfig } from 'vue-router';
 import AttemptList from '@/components/AttemptList.vue';
 import Home from '@/components/Home.vue';
 import Stats from '@/components/Stats.vue';
+import SearchResult from '@/components/SearchResult.vue';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 import '@fontsource/rubik';
@@ -38,6 +39,11 @@ const routes: Array<RouteConfig> = [
     name: 'Stats',
     component: Stats,
   },
+  {
+    path: '/search',
+    name: 'Search',
+    component: SearchResult,
+  }
 ];
 
 const router = new VueRouter({