stash

frontend/src/components/BaseLayout.vue

@@ -1,37 +1,6 @@
 <template>
     <div class="wrapper">
-        <nav id="sidebar" class="sidebar">
+        <Sidebar/>
-            <div class="sidebar-content js-simplebar">
-                <router-link to="/" class="sidebar-brand">
-                    <span class="align-middle">Toolshed</span>
-                </router-link>
-                <ul class="sidebar-nav">
-                    <li class="sidebar-header">
-                        Tools & Components
-                    </li>
-                    <!--
-                    <li class="sidebar-item {% if 'icons' in segment %} active {% endif %}">
-                        <a class="sidebar-link" href="{% url 'inventory' %}">
-                            {% bs_icon 'archive' extra_classes="bi-valign-middle" %}
-                            <span class="align-middle">Inventory</span>
-                        </a>
-                    </li>
-                    -->
-                    <li class="sidebar-item">
-                        <router-link to="/inventory" class="sidebar-link">
-                            <b-icon-archive class="bi-valign-middle"></b-icon-archive>
-                            <span class="align-middle">Inventory</span>
-                        </router-link>
-                    </li>
-                    <li class="sidebar-item">
-                        <router-link to="/friends" class="sidebar-link">
-                            <b-icon-people class="bi-valign-middle"></b-icon-people>
-                            <span class="align-middle">Friends</span>
-                        </router-link>
-                    </li>
-                </ul>
-            </div>
-        </nav>
         <div class="main">
             <nav class="navbar navbar-expand navbar-light navbar-bg">
                 <a class="sidebar-toggle d-flex">
@@ -49,66 +18,12 @@
                     <ul class="navbar-nav navbar-align">
                         <Notifications :notifications="notifications"/>
                         <Messages :messages="messages"/>
-                        <li class="nav-item dropdown">
+                        <UserDropdown/>
-                            <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#"
-                               data-toggle="dropdown">
-                                <i class="align-middle" data-feather="settings"></i>
-                                <b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
-                            </a>
-
-                            <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#"
-                               data-toggle="dropdown">
-                                <!--<img src="/static/assets/img/avatars/avatar.png" class="avatar img-fluid rounded mr-1"
-                                     alt="Charles Hall"/>-->
-                                <span class="text-dark">
-                        <!--{{ request.user.username }}-->
-                    </span>
-                            </a>
-
-                            <div class="dropdown-menu dropdown-menu-right">
-                                <router-link to="/profile" class="dropdown-item">
-                                    <b-icon-person class="bi-valign-middle mr-1"></b-icon-person>
-                                    Profile
-                                </router-link>
-                                <router-link to="/settings" class="dropdown-item">
-                                    <b-icon-sliders class="bi-valign-middle mr-1"></b-icon-sliders>
-                                    Settings &
-                                    Privacy
-                                </router-link>
-                                <div class="dropdown-divider"></div>
-                                <a class="dropdown-item" href="#" @click="logout"> Log out</a>
-                            </div>
-                        </li>
                     </ul>
                 </div>
             </nav>
             <slot></slot>
-            <footer class="footer">
+            <Footer/>
-                <div class="container-fluid">
-                    <div class="row text-muted">
-                        <div class="col-6 text-left">
-                            <p class="mb-0">
-                                <a target="_blank" href="https://www.gnu.org/licenses/gpl-3.0.de.html"
-                                   class="text-muted">
-                                    License: <strong>GPL-3.0</strong>
-                                </a>
-                            </p>
-                        </div>
-                        <div class="col-6 text-right">
-                            <ul class="list-inline">
-                                <li class="list-inline-item">
-                                    <a class="text-muted"
-                                       target="_blank" href="/docs/">API Docs</a>
-                                </li>
-                                <li class="list-inline-item">
-                                    <a class="text-muted"
-                                       target="_blank" href="https://github.com/gr4yj3d1/toolshed">Sources</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </footer>
         </div>
     </div>
 </template>
@@ -118,10 +33,16 @@ import {mapGetters, mapMutations, mapState} from 'vuex';
 import * as BIcons from "bootstrap-icons-vue";
 import Notifications from "@/components/Notifications.vue";
 import Messages from "@/components/Messages.vue";
+import Footer from "@/components/Footer.vue";
+import Sidebar from "@/components/Sidebar.vue";
+import UserDropdown from "@/components/UserDropdown.vue";
 
 export default {
     name: 'BaseLayout',
     components: {
+        UserDropdown,
+        Sidebar,
+        Footer,
         Messages,
         Notifications,
         ...BIcons

frontend/src/components/Footer.vue

@@ -0,0 +1,43 @@
+<template>
+    <footer class="footer">
+        <div class="container-fluid">
+            <div class="row text-muted">
+                <div class="col-6 text-left">
+                    <p class="mb-0">
+                        <a target="_blank" href="https://www.gnu.org/licenses/gpl-3.0.de.html"
+                           class="text-muted">
+                            License: <strong>GPL-3.0</strong>
+                        </a>
+                    </p>
+                </div>
+                <div class="col-6 text-right">
+                    <ul class="list-inline">
+                        <li class="list-inline-item">
+                            <a class="text-muted"
+                               target="_blank" href="/docs/">API Docs</a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="text-muted"
+                               target="_blank" href="/wiki/">Wiki</a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="text-muted"
+                               target="_blank" href="https://github.com/gr4yj3d1/toolshed">Sources</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </footer>
+</template>
+
+<script>
+
+export default {
+    name: "Footer"
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/Messages.vue

@@ -16,8 +16,8 @@
                 <a href="#" class="list-group-item">
                     <div class="row g-0 align-items-center">
                         <div class="col-2">
-                            <!--<img src="/static/assets/img/avatars/avatar-5.png"
+                            <img src="/assets/img/avatars/avatar-5.png"
-                                 class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">-->
+                                 class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">
                         </div>
                         <div class="col-10 pl-2">
                             <div class="text-dark">Vanessa Tucker</div>
@@ -31,8 +31,8 @@
                 <a href="#" class="list-group-item">
                     <div class="row g-0 align-items-center">
                         <div class="col-2">
-                            <!--<img src="/static/assets/img/avatars/avatar-2.png"
+                            <img src="/assets/img/avatars/avatar-2.png"
-                                 class="avatar img-fluid rounded-circle" alt="William Harris">-->
+                                 class="avatar img-fluid rounded-circle" alt="William Harris">
                         </div>
                         <div class="col-10 pl-2">
                             <div class="text-dark">William Harris</div>
@@ -46,8 +46,8 @@
                 <a href="#" class="list-group-item">
                     <div class="row g-0 align-items-center">
                         <div class="col-2">
-                            <!--<img src="/static/assets/img/avatars/avatar-4.png"
+                            <img src="/assets/img/avatars/avatar-4.png"
-                                 class="avatar img-fluid rounded-circle" alt="Christina Mason">-->
+                                 class="avatar img-fluid rounded-circle" alt="Christina Mason">
                         </div>
                         <div class="col-10 pl-2">
                             <div class="text-dark">Christina Mason</div>
@@ -57,12 +57,11 @@
                         </div>
                     </div>
                 </a>
-                <!-- {% for messege in top_messages %}-->
                 <a href="#" class="list-group-item">
                     <div class="row g-0 align-items-center">
                         <div class="col-2">
-                            <!--<img src="/static/assets/img/avatars/avatar-3.png"
+                            <img src="/assets/img/avatars/avatar-3.png"
-                                 class="avatar img-fluid rounded-circle" alt="Sharon Lessman">-->
+                                 class="avatar img-fluid rounded-circle" alt="Sharon Lessman">
                         </div>
                         <div class="col-10 pl-2">
                             <div class="text-dark">Sharon Lessman</div>
@@ -74,7 +73,6 @@
                         </div>
                     </div>
                 </a>
-                <!--{% endfor %}-->
             </div>
             <div class="dropdown-menu-footer">
                 <a href="#" class="text-muted">Show all messages</a>

frontend/src/components/Sidebar.vue

@@ -0,0 +1,37 @@
+<template>
+    <nav id="sidebar" class="sidebar">
+        <div class="sidebar-content js-simplebar">
+            <router-link to="/" class="sidebar-brand">
+                <span class="align-middle">Toolshed</span>
+            </router-link>
+            <ul class="sidebar-nav">
+                <li class="sidebar-header">
+                    Tools & Components
+                </li>
+                <li class="sidebar-item">
+                    <router-link to="/inventory" class="sidebar-link">
+                        <b-icon-archive class="bi-valign-middle"></b-icon-archive>
+                        <span class="align-middle">Inventory</span>
+                    </router-link>
+                </li>
+                <li class="sidebar-item">
+                    <router-link to="/friends" class="sidebar-link">
+                        <b-icon-people class="bi-valign-middle"></b-icon-people>
+                        <span class="align-middle">Friends</span>
+                    </router-link>
+                </li>
+            </ul>
+        </div>
+    </nav>
+</template>
+
+<script>
+
+export default {
+    name: "Sidebar"
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/UserDropdown.vue

@@ -0,0 +1,46 @@
+<template>
+    <li class="nav-item dropdown">
+        <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#"
+           data-toggle="dropdown">
+            <i class="align-middle" data-feather="settings"></i>
+            <b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
+        </a>
+
+        <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#"
+           data-toggle="dropdown">
+            <!--<img src="/static/assets/img/avatars/avatar.png" class="avatar img-fluid rounded mr-1"
+                 alt="Charles Hall"/>-->
+            <span class="text-dark">
+                        <!--{{ request.user.username }}-->
+                    </span>
+        </a>
+
+        <div class="dropdown-menu dropdown-menu-right">
+            <router-link to="/profile" class="dropdown-item">
+                <b-icon-person class="bi-valign-middle mr-1"></b-icon-person>
+                Profile
+            </router-link>
+            <router-link to="/settings" class="dropdown-item">
+                <b-icon-sliders class="bi-valign-middle mr-1"></b-icon-sliders>
+                Settings &
+                Privacy
+            </router-link>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#" @click="logout"> Log out</a>
+        </div>
+    </li>
+</template>
+
+<script>
+
+import Messages from "@/components/Messages.vue";
+
+export default {
+    name: "UserDropdown",
+    components: {Messages}
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/Friends.vue

@@ -19,7 +19,7 @@
                                 </tr>
                                 </thead>
                                 <tbody>
-                                <tr v-for="friend in friends" :key="friend.name">
+                                <tr v-for="friend in friendslist" :key="friend.name">
                                     <td>{{ friend.name }}</td>
                                     <td class="d-none d-md-table-cell">{{ friend.server.join(', ') }}</td>
                                     <td class="table-action">
@@ -34,6 +34,10 @@
                                 </tbody>
                             </table>
                         </div>
+                        <div class="card">
+                            <button class="btn" @click="fetchFriends">Refresh</button>
+                            <router-link to="/inventory/new" class="btn btn-primary">Add</router-link>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -54,32 +58,37 @@ export default {
     },
     data() {
         return {
-            friends: [],
+            friends: {},
         }
     },
     computed: {
         username() {
             return this.$route.params.username
         },
-        inventory_items() {
+        friendslist() {
-            return this.local_items.concat(this.eleon_items)
+            return Object.keys(this.friends).map((friend) => {
+                return {
+                    name: friend,
+                    server: this.friends[friend]
+                }
+            })
         }
     },
     methods: {
         ...mapActions(['getFriends', "getFriendServer"]),
-    },
+        fetchFriends() {
-    mounted() {
             this.getFriends().then((friends) => {
                 friends.map((friend) => {
                     this.getFriendServer({username: friend}).then((server) => {
-                    this.friends.push({
+                        this.friends[friend] = server
-                        name: friend,
-                        server: server
-                    })
                     })
                 })
             })
         }
+    },
+    mounted() {
+        this.fetchFriends()
+    }
 }
 </script>
 

frontend/src/views/Profile.vue

@@ -12,9 +12,9 @@
                                 <h5 class="card-title mb-0">Profile Details</h5>
                             </div>
                             <div class="card-body text-center">
-                                <!--<img src="/static/assets/img/avatars/avatar.png"
+                                <img src="/assets/img/avatars/avatar.png"
                                      alt="Christina Mason" class="img-fluid rounded-circle mb-2" width="128"
-                                     height="128"/>-->
+                                     height="128"/>
                                 <h5 class="card-title mb-0">
                                     {{ user.username }}
                                 </h5>
@@ -94,8 +94,8 @@
                             <div class="card-body h-100">
 
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar-5.png" width="36" height="36"
+                                    <img src="/assets/img/avatars/avatar-5.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="Vanessa Tucker">-->
+                                         class="rounded-circle mr-2" alt="Vanessa Tucker">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">5m ago</small>
                                         <strong>Vanessa Tucker</strong> started following <strong>Christina
@@ -107,8 +107,8 @@
 
                                 <hr/>
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar.png" width="36" height="36"
+                                    <img src="/assets/img/avatars/avatar.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="Charles Hall">-->
+                                          class="rounded-circle mr-2" alt="Charles Hall">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">30m ago</small>
                                         <strong>Charles Hall</strong> posted something on <strong>Christina
@@ -132,8 +132,8 @@
 
                                 <hr/>
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar-4.png" width="36" height="36"
+                                    <img src="/assets/img/avatars/avatar-4.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="Christina Mason">-->
+                                          class="rounded-circle mr-2" alt="Christina Mason">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">1h ago</small>
                                         <strong>Christina Mason</strong> posted a new blog<br/>
@@ -144,8 +144,8 @@
 
                                 <hr/>
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar-2.png" width="36" height="36"
+                                    <img src="/assets/img/avatars/avatar-2.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="William Harris">-->
+                                          class="rounded-circle mr-2" alt="William Harris">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">3h ago</small>
                                         <strong>William Harris</strong> posted two photos on <strong>Christina
@@ -154,12 +154,12 @@
 
                                         <div class="row g-0 mt-1">
                                             <div class="col-6 col-md-4 col-lg-4 col-xl-3">
-                                                <!--<img src="/static/assets/img/photos/unsplash-1.jpg"
+                                                <img src="/assets/img/photos/unsplash-1.jpg"
-                                                     class="img-fluid pr-2" alt="Unsplash">-->
+                                                     class="img-fluid pr-2" alt="Unsplash">
                                             </div>
                                             <div class="col-6 col-md-4 col-lg-4 col-xl-3">
-                                                <!--<img src="/static/assets/img/photos/unsplash-2.jpg"
+                                                <img src="/assets/img/photos/unsplash-2.jpg"
-                                                     class="img-fluid pr-2" alt="Unsplash">-->
+                                                      class="img-fluid pr-2" alt="Unsplash">
                                             </div>
                                         </div>
 
@@ -171,8 +171,8 @@
 
                                 <hr/>
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar-2.png" width="36" height="36"
+                                    <img src="/assets/img/avatars/avatar-2.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="William Harris">-->
+                                          class="rounded-circle mr-2" alt="William Harris">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">1d ago</small>
                                         <strong>William Harris</strong> started following <strong>Christina
@@ -181,8 +181,8 @@
 
                                         <div class="d-flex align-items-start mt-1">
                                             <a class="pr-3" href="#">
-                                                <!--<img src="/static/assets/img/avatars/avatar-4.png" width="36"
+                                                <img src="/assets/img/avatars/avatar-4.png" width="36"
-                                                     height="36" class="rounded-circle mr-2" alt="Christina Mason">-->
+                                                      height="36" class="rounded-circle mr-2" alt="Christina Mason">
                                             </a>
                                             <div class="flex-grow-1">
                                                 <div class="border text-sm text-muted p-2 mt-1">
@@ -196,8 +196,8 @@
 
                                 <hr/>
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar-4.png" width="36" height="36"
+                                    <img src="/assets/img/avatars/avatar-4.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="Christina Mason">-->
+                                          class="rounded-circle mr-2" alt="Christina Mason">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">1d ago</small>
                                         <strong>Christina Mason</strong> posted a new blog<br/>
@@ -207,8 +207,8 @@
 
                                 <hr/>
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar.png" width="36" height="36"
+                                    <img src="/assets/img/avatars/avatar.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="Charles Hall">-->
+                                          class="rounded-circle mr-2" alt="Charles Hall">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">1d ago</small>
                                         <strong>Charles Hall</strong> started following <strong>Christina
@@ -223,7 +223,6 @@
                         </div>
                     </div>
                 </div>
-
             </div>
         </main>
     </BaseLayout>

frontend/src/views/Settings.vue

@@ -79,7 +79,7 @@
                                                 <div class="col-md-4">
                                                     <div class="text-center">
                                                         <img alt="Charles Hall"
-                                                             src="/static/assets/img/avatars/avatar.png"
+                                                             src="/assets/img/avatars/avatar.png"
                                                              class="rounded-circle img-responsive mt-2" width="128"
                                                              height="128"/>
                                                         <div class="mt-2">

frontend/vite.config.js

@@ -19,7 +19,8 @@ export default defineConfig({
             //'Access-Control-Allow-Origin': 'http://10.23.42.128:8000, http://10.23.42.168:8000',
             'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
             'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token, Authorization, Accept,charset,boundary,Content-Length',
-            'Access-Control-Allow-Credentials': 'true'
+            'Access-Control-Allow-Credentials': 'true',
+            'Content-Security-Policy': 'default-src \'self\' \'unsafe-inline\' \'unsafe-eval\' data: \'self\' connect-src *', // change to https://* for production
         },
         proxy: {
             '^/api/': {
@@ -36,6 +37,13 @@ export default defineConfig({
             },
             '^/static/': {
                 target: "http://127.0.0.1:8000/",
+            },
+            '^/wiki/': {
+                target: "http://127.0.0.1:8080/",
+                rewrite: (path) => path.replace(/^\/wiki/, ''),
+            },
+            '^/livereload/': {
+                target: "http://127.0.0.1:8080/",
             }
         }
     }