initial commit

frontend/src/layouts/default/AppBar.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-app-bar :elevation="5">
+    <v-icon v-if="isMobile" icon="mdi-menu" @click="$emit('toggleDrawer')" />
+    <v-app-bar-title :text="$t(<string>$router.currentRoute.value.name)" class="align-center text-center " />
+    <v-btn prepend-icon="mdi-content-save" v-if="stateChange" :text="$t('actions.save')" @click="saveChanges"></v-btn>
+    <v-icon icon="mdi-theme-light-dark" @click="toggleTheme()" style="margin: 0 10px;"></v-icon>
+  </v-app-bar>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref,watch } from "vue"
+import { useTheme } from "vuetify"
+import { FindDiff } from "@/plugins/utils"
+import Data from "@/store/modules/data"
+
+defineProps(['isMobile'])
+
+const theme = useTheme()
+const darkMode = ref(localStorage.getItem('theme') == "dark")
+
+const store = Data()
+
+const toggleTheme = () => {
+  darkMode.value = !darkMode.value
+  theme.global.name.value = darkMode.value ? "dark" : "light"
+  localStorage.setItem('theme', theme.global.name.value)
+}
+
+const saveChanges = () => {
+  store.pushData()
+}
+
+const oldData = computed((): any => {
+  return {config: store.oldData.config, clients: store.oldData.clients}
+})
+
+const newData = computed((): any => {
+  return {config: store.config, clients: store.clients}
+})
+
+const stateChange = computed((): any => {
+  return !FindDiff.deepCompare(newData.value,oldData.value)
+})
+</script>

frontend/src/layouts/default/Default.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-app style="overflow: auto;">
+    <drawer :isMobile="isMobile" :displayDrawer="displayDrawer" @toggleDrawer="toggleDrawer" />
+    <default-bar :isMobile="isMobile" @toggleDrawer="toggleDrawer" />
+    <default-view />
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import DefaultBar from './AppBar.vue'
+import Drawer from './Drawer.vue'
+import DefaultView from './View.vue'
+import { useDisplay } from 'vuetify'
+
+const { smAndDown } = useDisplay()
+const displayDrawer = ref(false)
+
+const toggleDrawer = () => {
+  displayDrawer.value = !displayDrawer.value
+}
+
+const isMobile = computed( ():boolean =>{
+  displayDrawer.value = !smAndDown.value
+  return smAndDown.value
+})
+</script>

frontend/src/layouts/default/Drawer.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-navigation-drawer
+    v-model="showDrawer"
+    :temporary="isMobile"
+    :expand-on-hover="!isMobile"
+    :rail="!isMobile"
+    :permanent="!isMobile"
+    @click="isMobile ? $emit('toggleDrawer') : null"
+  >
+    <v-list-item
+      height="63"
+      prepend-avatar="@/assets/logo.svg"
+      title="S-UI"
+    >
+      <template v-slot:append v-if="isMobile">
+        <v-icon icon="mdi-close" />
+      </template>
+    </v-list-item>
+
+    <v-divider></v-divider>
+
+    <v-list density="compact" nav>
+      <v-list-item link
+        v-for="item in menu"
+        :key="item.title"
+        :to="item.path"
+        :active="router.currentRoute.value.path == item.path">
+        <template v-slot:prepend>
+          <v-icon :icon="item.icon"></v-icon>
+        </template>
+        <v-list-item-title v-text="$t(item.title)"></v-list-item-title>
+      </v-list-item>
+    </v-list>
+    <template v-slot:append>
+      <v-list-item prepend-icon="mdi-logout" :title="$t('menu.logout')" @click="logout"></v-list-item>
+    </template>
+  </v-navigation-drawer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import router from '@/router'
+import HttpUtil from '@/plugins/httputil'
+
+const props = defineProps(['isMobile','displayDrawer'])
+
+const showDrawer = computed((): boolean => {
+  return props.displayDrawer
+})
+
+const menu = [
+  { title: 'pages.home', icon: 'mdi-home',  path: '/' },
+  { title: 'pages.inbounds', icon: 'mdi-cloud-download',  path: '/inbounds' },
+  { title: 'pages.clients', icon: 'mdi-account-multiple',  path: '/clients' },
+  { title: 'pages.outbounds', icon: 'mdi-cloud-upload',  path: '/outbounds' },
+  { title: 'pages.rules', icon: 'mdi-routes',  path: '/rules' },
+  { title: 'pages.basics', icon: 'mdi-application-cog',  path: '/basics' },
+  { title: 'pages.settings', icon: 'mdi-cog',  path: '/settings' },
+]
+
+const logout = async () => {
+  const response = await HttpUtil.get('/api/logout')
+  if(response.success){
+    router.push('/login')
+  }
+}
+</script>

frontend/src/layouts/default/View.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style>
+.v-main {
+  margin: 10px;
+}
+</style>