ADD: oui-lookup page

frontend/src/api-services/macfinder.service.js

@@ -6,5 +6,8 @@ export default {
   },
   createJob(bcd, mac) {
     return Axios.post('/api/macfinder/create_job', { bcd: bcd, mac: mac })
+  },
+  ouiLookup(mac) {
+    return Axios.get('/api/macfinder/oui_lookup?mac=' + mac)
   }
 }

frontend/src/components/GlobalSearch.vue

@@ -121,6 +121,10 @@ export default {
           name: 'Macfinder',
           url: '/tools/macfinder'
         },
+        {
+          name: 'MAC-Vendor-Suche',
+          url: '/tools/oui_lookup'
+        },
         {
           name: 'Gruppen & Untergruppen',
           url: '/cntl/groups'

frontend/src/components/Navbar.vue

@@ -55,6 +55,10 @@
             <font-awesome-icon fixed-width icon="ethernet"/>
             Macfinder
           </b-dropdown-item>
+          <b-dropdown-item to="/tools/oui_lookup" :active="$route.path === '/tools/oui_lookup'">
+            <font-awesome-icon fixed-width icon="question"/>
+            MAC-Vendor-Suche
+          </b-dropdown-item>
         </b-nav-item-dropdown>
         <b-nav-item-dropdown v-if="$store.state.user" right
                              :toggle-class="$route.path.startsWith('/cntl/')?'active':''">

frontend/src/router.js

@@ -122,6 +122,16 @@ export default new Router({
         }
       }
     },
+    {
+      path: '/tools/oui_lookup',
+      name: 'ouilookup',
+      component: () => import('./views/tools/OUILookup'),
+      meta: {
+        resolveName: function () {
+          return 'MAC-Vendor-Suche'
+        }
+      }
+    },
     {
       path: '/dnsvs',
       component: () => import('./views/dnsvs/Main.vue'),

frontend/src/views/tools/OUILookup.vue

+<template>
+  <div class="macfinder">
+    <h1>MAC-Vendor-Suche (OUI-Lookup)</h1>
+    <p>Hier können Sie den Hersteller eines Gerätes anhand seiner MAC-Adresse herausfinden.</p>
+    <b-form @submit="createJob">
+      <b-form-group label="MAC-Adresse" description="Beliebiges Format möglich">
+        <b-input required v-model="search_mac" placeholder="MAC-Adresse"></b-input>
+      </b-form-group>
+      <b-button type="submit" variant="outline-success">
+        <font-awesome-icon icon="search"></font-awesome-icon>
+        Suchen
+      </b-button>
+    </b-form>
+    <hr/>
+    <b-jumbotron v-if="vendor" :header="vendor" :lead="result_mac"></b-jumbotron>
+  </div>
+</template>
+<script>
+import MacfinderService from '@/api-services/macfinder.service'
+
+export default {
+  name: 'OUILookup',
+  data() {
+    return {
+      search_mac: null,
+      result_mac: null,
+      vendor: null
+    }
+  },
+  methods: {
+    async createJob(ev) {
+      ev.preventDefault()
+      const res = await MacfinderService.ouiLookup(this.search_mac)
+      this.vendor = res.data.vendor
+      this.result_mac = res.data.mac
+      this.search_mac = ''
+      return true
+    }
+  }
+}
+</script>