[frontend]: Перенесен базовый навбар

frontend/wheretogo/jsconfig.json

@@ -5,16 +5,9 @@
     "baseUrl": "./",
     "moduleResolution": "node",
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["src/*"]
     },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ],
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
     "jsx": "preserve"
   }
-}
+}

frontend/wheretogo/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^0.27.2",
+        "bootstrap": "^5.2.1",
         "core-js": "^3.8.3",
         "vue": "^3.2.13"
       },
@@ -1942,6 +1943,16 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -3648,6 +3659,24 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.1.tgz",
+      "integrity": "sha512-UQi3v2NpVPEi1n35dmRRzBJFlgvWHYwyem6yHhuT6afYF+sziEt46McRbT//kVXZ7b1YUYEVGdXEH74Nx3xzGA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -12801,6 +12830,12 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "peer": true
+    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -14195,6 +14230,12 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "bootstrap": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.1.tgz",
+      "integrity": "sha512-UQi3v2NpVPEi1n35dmRRzBJFlgvWHYwyem6yHhuT6afYF+sziEt46McRbT//kVXZ7b1YUYEVGdXEH74Nx3xzGA==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

frontend/wheretogo/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "bootstrap": "^5.2.1",
     "core-js": "^3.8.3",
     "vue": "^3.2.13"
   },

frontend/wheretogo/src/App.vue

@@ -1,24 +1,11 @@
 <template>
-  <div id="app">
-      <FacilitiesList />
+  <div id="app" class="app">
+    <NavigationBar />
   </div>
 </template>
+
 <script>
-import FacilitiesList from "./components/FacilitiesList.vue";
 export default {
   name: "App",
-  components: {
-    FacilitiesList,
-  },
 };
 </script>
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

frontend/wheretogo/src/__VLS_options.jsx

@@ -1,59 +0,0 @@
-export default (await import('vue')).defineComponent({
-name: "App",
-components: {
-FacilitiesList,
-},
-});
-const __VLS_options = {
-...({
-name: "App",
-components: {
-FacilitiesList,
-},
-}),
-};
-const __VLS_name = (await import('./__VLS_types.js')).getNameOption({
-name: "App",
-components: {
-FacilitiesList,
-},
-} as const);
-function __VLS_template() {
-import * as __VLS_types from './__VLS_types.js'; import('./__VLS_types.js');
-let __VLS_ctx!: __VLS_types.PickNotAny<__VLS_Ctx, {}> & InstanceType<__VLS_types.PickNotAny<typeof __VLS_component, new () => {}>> & {};
-let __VLS_vmUnwrap!: typeof __VLS_options & { components: {}; };
-/* Components */
-let __VLS_otherComponents!: NonNullable<typeof __VLS_component extends { components: infer C; } ? C : {}> & __VLS_types.GlobalComponents & typeof __VLS_vmUnwrap.components & __VLS_types.PickComponents<typeof __VLS_ctx>;
-let __VLS_selfComponent!: __VLS_types.SelfComponent<typeof __VLS_name, typeof __VLS_component & (new () => { $slots: typeof __VLS_slots; })>;
-let __VLS_components!: typeof __VLS_otherComponents & Omit<typeof __VLS_selfComponent, keyof typeof __VLS_otherComponents>;
-__VLS_components['/* __VLS_.SearchTexts.Components */'];
-({} as __VLS_types.GlobalAttrs)['/* __VLS_.SearchTexts.GlobalAttrs */'];
-/* Style Scoped */
-type __VLS_StyleScopedClasses = {};
-let __VLS_styleScopedClasses!: __VLS_StyleScopedClasses | keyof __VLS_StyleScopedClasses | (keyof __VLS_StyleScopedClasses)[];
-/* CSS variable injection */
-/* CSS variable injection end */
-declare const FacilitiesList: __VLS_types.ConvertInvalidJsxElement<
-'FacilitiesList' extends keyof typeof __VLS_components ? typeof __VLS_components['FacilitiesList'] : 'FacilitiesList' extends keyof typeof __VLS_ctx ? typeof __VLS_ctx['FacilitiesList'] : unknown>;
-__VLS_components.FacilitiesList;
-__VLS_ctx.FacilitiesList;
-declare const __VLS_0: __VLS_types.ExtractEmit2<typeof FacilitiesList>;
-/* Completion: Emits */
-// @ts-ignore
-__VLS_0('/* __VLS_.SearchTexts.Completion.Emit.FacilitiesList */');
-/* Completion: Props */
-// @ts-ignore
-(<FacilitiesList /* __VLS_.SearchTexts.Completion.Props.FacilitiesList */ />);
-{
-<div id={"\u0061\u0070\u0070"}></div>;
-
-{
-<FacilitiesList />;
-}
-}
-if (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {
-}
-declare var __VLS_slots: {};
-return __VLS_slots;
-}
-let __VLS_component!: typeof import('./App.vue')['default'];

frontend/wheretogo/src/components/FacilitiesList.vue

@@ -1,37 +0,0 @@
-<template>
-    <div class="facilities_container">
-        <div class="facilities_content">
-            <h1>Facilities</h1>
-            <ul class="facilities_list">
-                <li v-for="facility in facilities" :key="facility.id">
-                    <h2>{{ facility.name }}</h2>
-                    <p>{{ facility.address }}</p>
-                </li>
-            </ul>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            facilities: ['']
-        }
-    },
-    methods: {
-        async getData() {
-            try {
-                const response = await this.axios.get('http://127.0.0.1:8000/api/facilities');
-                this.facilities = response.data;
-                console.log(this.facilities)
-            } catch (error) {
-                console.log(error);
-            }
-        },
-    },
-    created() {
-        this.getData();
-    }
-}
-</script>

frontend/wheretogo/src/components/NavigationBar.vue

@@ -0,0 +1,54 @@
+<template>
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/">WhereToGo</a>
+      <div class="collapse navbar-collapse" id="navbarNavDropdown">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <a class="nav-link" href="">Map</a>
+          </li>
+        </ul>
+        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+          <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle"
+              href="#"
+              id="navbarDropdownMenuLink"
+              role="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              Username
+            </a>
+            <ul
+              class="dropdown-menu dropdown-menu-end"
+              aria-labelledby="navbarDropdownMenuLink"
+            >
+              <li>
+                <a class="dropdown-item" href="">Admin page</a>
+              </li>
+              <li>
+                <a class="dropdown-item" href="">Change E-Mail</a>
+              </li>
+              <li>
+                <a class="dropdown-item" href="">Sign Out</a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="">Sign In</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="">Sign Up</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: "NavigationBar",
+};
+</script>

frontend/wheretogo/src/main.js

@@ -1,9 +1,15 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import axios from 'axios'
+import { createApp } from "vue";
+import App from "./App.vue";
+import axios from "axios";
 
-const app = createApp(App)
+import "bootstrap/dist/css/bootstrap.min.css";
 
-app.config.globalProperties.axios=axios
+import NavigationBar from "./components/NavigationBar.vue";
 
-app.mount('#app')
+const app = createApp(App);
+
+app.config.globalProperties.axios = axios;
+
+app.component("NavigationBar", NavigationBar);
+
+app.mount("#app");

frontend/wheretogo/vue.config.js

@@ -1,4 +1,4 @@
-import { defineConfig } from '@vue/cli-service'
-export default defineConfig({
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
   transpileDependencies: true
 })