Working on UI

typed-router.d.ts

@@ -38,6 +38,35 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/settings': RouteRecordInfo<
+      '/settings',
+      '/settings',
+      Record<never, never>,
+      Record<never, never>,
+      | '/settings/groups'
+      | '/settings/users'
+    >,
+    '/settings/groups': RouteRecordInfo<
+      '/settings/groups',
+      '/settings/groups',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/settings/users': RouteRecordInfo<
+      '/settings/users',
+      '/settings/users',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/user_settings': RouteRecordInfo<
+      '/user_settings',
+      '/user_settings',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
   }
 
   /**
@@ -59,6 +88,40 @@ declare module 'vue-router/auto-routes' {
       pathParamNames:
         | never
     }
+    'vue/routes/settings.vue': {
+      routes:
+        | '/settings'
+        | '/settings/groups'
+        | '/settings/users'
+      views:
+        | 'default'
+      pathParamNames:
+        | never
+    }
+    'vue/routes/settings/groups.vue': {
+      routes:
+        | '/settings/groups'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'vue/routes/settings/users.vue': {
+      routes:
+        | '/settings/users'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'vue/routes/user_settings.vue': {
+      routes:
+        | '/user_settings'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
   }
 
   /**

vite.config.js

@@ -12,6 +12,7 @@ export default defineConfig(() => ({
     VueRouter({
       routesFolder: 'vue/routes',
       importMode: 'sync',
+      exclude: ['vue/routes/**/comp/**'],
     }),
     vue(),
   ],

vue/app.vue

@@ -1,18 +1,18 @@
 <template>
-<LanguageSwitcher/>
+  <div class="is-flex">
-<br>
+    <Sidebar />
-<ThemeSwitcher/>
+    <main class="p-5 is-flex-grow-1">
-<br>
+      <RouterView />
-<RouterView />
+    </main>
+  </div>
 </template>
 
 <script setup>
 import { useI18n } from 'vue-i18n'
-import ThemeSwitcher from '@/components/ThemeSwitcher.vue';
 import { applyTheme } from '@/components/theme';
-import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
+import Sidebar from '@/components/Sidebar.vue';
 
 applyTheme();
 
 const { t } = useI18n();
-</script>
+</script>

vue/components/Sidebar.vue

@@ -0,0 +1,53 @@
+<template>
+  <aside class="menu m-3" :class="{ 'is-collapsed': collapsed }">
+
+    <div class="level">
+      <p class="level-item" v-if="!collapsed">CMMS</p>
+      <div class="level-item">
+        <button class="button" :title="collapsed ? 'Expand menu' : 'Collapse menu'" @click="toggleSidebar">
+          <span class="icon">
+            <i class="fa-solid" :class="collapsed ? 'fa-angles-right' : 'fa-angles-left'"></i>
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <ul class="menu-list">
+      <li v-for="item in items" :key="item.to">
+        <RouterLink :to="item.to" active-class="is-active" :class="{ 'has-text-centered': collapsed }"
+          :title="collapsed ? item.label : null">
+          <span class="icon">
+            <i class="fa-solid" :class="item.icon"></i>
+          </span>
+          <span v-if="!collapsed"> {{ t(item.label) }}</span>
+        </RouterLink>
+      </li>
+    </ul>
+  </aside>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { RouterLink } from 'vue-router';
+
+const { t } = useI18n()
+
+const collapsed = ref(localStorage.getItem('sidebarCollapsed') === 'true');
+
+function toggleSidebar() {
+  collapsed.value = !collapsed.value;
+  localStorage.setItem('sidebarCollapsed', collapsed.value);
+}
+
+// Example items — replace `to` with real routes as pages are added.
+const items = [
+  { label: 'menu.dashboard', icon: 'fa-gauge-high', to: '/' },
+  // { label: 'Assets', icon: 'fa-boxes-stacked', to: '/assets' },
+  // { label: 'Work Orders', icon: 'fa-clipboard-list', to: '/work-orders' },
+  // { label: 'Maintenance', icon: 'fa-screwdriver-wrench', to: '/maintenance' },
+  // { label: 'Reports', icon: 'fa-chart-line', to: '/reports' },
+  { label: 'menu.userSettings', icon: 'fa-user-gear', to: '/user_settings' },
+  { label: 'menu.settings', icon: 'fa-gear', to: '/settings' },
+];
+</script>

vue/css/all.css

@@ -1,9 +1,12 @@
-
 @import 'vue-multiselect/dist/vue-multiselect.css';
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 
 @import 'bulma/css/bulma.min.css';
 
+html {
+  background-color: var(--bulma-scheme-main-ter);
+}
+
 .dropdown {
   --bulma-dropdown-menu-min-width: 4rem;
 }
@@ -12,3 +15,8 @@ a.dropdown-item,
 button.dropdown-item {
   padding-inline-end: 1rem;
 }
+
+[data-theme=dark],
+.theme-dark {
+  --bulma-scheme-main-ter-l: 20%;
+}

vue/locales/en.json

@@ -1,4 +1,13 @@
 {
+  "menu": {
+    "settings": "Settings",
+    "userSettings": "User settings",
+    "dashboard": "Dashboard"
+  },
+  "settings":{
+    "users":"Users",
+    "groups":"Groups"
+  },
   "common": {
     "save": "Save",
     "cancel": "Cancel",
@@ -13,4 +22,4 @@
     "hello": "HELLO",
     "world": "WORLD"
   }
-}
+}

vue/locales/sl.json

@@ -1,4 +1,9 @@
 {
+  "menu": {
+    "settings": "Nastavitve",
+    "userSettings": "Uporabniške nastavitve",
+    "dashboard": "Nadzorna plošča"
+  },
   "common": {
     "save": "Shrani",
     "cancel": "Prekliči",
@@ -13,4 +18,4 @@
     "hello": "ZDRAVO",
     "world": "SVET"
   }
-}
+}

vue/routes/index.vue

@@ -1,22 +1,10 @@
 <template>
-  <p>{{ t('app.world') }}</p>
+  <h1 class="title">{{ t('menu.dashboard') }}</h1>
-  <p v-for="value in j">
-    {{ value }}
-  </p>
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n'
+import { useI18n } from 'vue-i18n';
-
 const { t } = useI18n();
 
-const j = ref([]);
-
-onMounted(async () => {
-  const res = await fetch("/php/notifications.php")
-  j.value = await res.json();
-});
-
-
 </script>

vue/routes/settings.vue

@@ -0,0 +1,26 @@
+<template>
+  <h1 class="title">{{ t('menu.settings') }}</h1>
+  <div class="tabs">
+    <ul>
+      <li v-for="i in routes" :class="{ 'is-active': route.path === i.path }">
+        <RouterLink :to="i.path">
+          {{ t(i.title) }}
+        </RouterLink>
+      </li>
+    </ul>
+  </div>
+  <RouterView />
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const routes = [
+  {"title": "settings.users", "path": "/settings/users"},
+  {"title": "settings.groups", "path": "/settings/groups"}
+];
+
+</script>

vue/routes/settings/groups.vue

@@ -0,0 +1,8 @@
+<template>
+
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
+</script>

vue/routes/settings/users.vue

@@ -0,0 +1,16 @@
+<template>
+<table class="table">
+  <thead>
+    <tr>
+      <th>user</th>
+      <th>email</th>
+      <th>group</th>
+    </tr>
+  </thead>
+</table>
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
+</script>

vue/routes/user_settings.vue

@@ -0,0 +1,16 @@
+<template>
+  <h1 class="title">{{ t('menu.userSettings') }}</h1>
+
+  <LanguageSwitcher />
+  <ThemeSwitcher />
+
+
+</template>
+
+<script setup>
+import ThemeSwitcher from '@/components/ThemeSwitcher.vue';
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>