Compare commits
8 Commits
addConfigi
...
authentica
| Author | SHA1 | Date | |
|---|---|---|---|
| 6d6b36bdd9 | |||
| 7c19ee9215 | |||
| 601449d7e0 | |||
| 3a79ed12fa | |||
| 84c17ad855 | |||
| e4aa11b902 | |||
| 8a77f18237 | |||
| e5a67b7e14 |
37
app.vue
37
app.vue
@ -7,24 +7,41 @@
|
|||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
//import { createPinia } from "pinia";
|
||||||
|
//import piniaPluginPersistedState from "pinia-plugin-persistedstate"
|
||||||
|
|
||||||
//const layout = "empty";
|
|
||||||
|
|
||||||
|
//const layout = "empty";
|
||||||
|
//const route = useRoute();
|
||||||
|
//const pinia = createPinia();
|
||||||
|
//pinia.use(piniaPluginPersistedState);
|
||||||
|
|
||||||
|
|
||||||
|
useHead({
|
||||||
|
//title: `Tüit ERP - ${route.meta.title}`,
|
||||||
|
title: `Tüit ERP`,
|
||||||
|
link: [{ rel: "icon", type: "image/png", href: "/favicon-gelb-rot-32x32.png" }]
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
html, template, body, #__nuxt, #__layout {
|
* {
|
||||||
height: 100vh;
|
box-sizing: border-box;
|
||||||
width: 100vw;
|
margin: 0;
|
||||||
height: 100%;
|
padding: 0;
|
||||||
width: 100%;
|
}
|
||||||
margin: 0;
|
|
||||||
background-color: #212121;
|
html, template, body, #__nuxt, #__layout {
|
||||||
font-size: 1rem;
|
min-height: 100vh;
|
||||||
}
|
width: 100vw;
|
||||||
|
min-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #212121;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,14 +1,30 @@
|
|||||||
import axios from 'axios';
|
import axios, {AxiosError} from 'axios';
|
||||||
|
import clientsideConfig from './clientsideConfig'
|
||||||
|
|
||||||
//create axios instance
|
//create axios instance
|
||||||
const Axios = axios.create({
|
const Axios = axios.create({
|
||||||
// baseURL: `https://${serversideConfig.url}:${serversideConfig.port}`,
|
//baseURL: `https://${serversideConfig.url}:${serversideConfig.port}/`,
|
||||||
|
baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
|
||||||
headers: {
|
headers: {
|
||||||
// 'Accept': 'application/json',
|
// 'Accept': 'application/json',
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
//Authorization: `Bearer`,
|
//Authorization: `Bearer`,
|
||||||
Accept: "*",
|
Accept: "*",
|
||||||
},
|
},
|
||||||
|
withCredentials: true,
|
||||||
|
credentials: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
Axios.interceptors.response.use((response) => response, (error) => {
|
||||||
|
|
||||||
|
if (error instanceof AxiosError) {
|
||||||
|
console.error('Status: ', error.response?.status, '\nHeaders: '. error.response?.headers, '\nMessage: '. error.response?.data.message)
|
||||||
|
} else { console.error('Error: ', error); };
|
||||||
|
|
||||||
|
if (error.response?.status === 403) { window.location.href = '/login'; };
|
||||||
|
|
||||||
|
return Promise.reject(error);
|
||||||
|
});
|
||||||
|
|
||||||
export default Axios;
|
export default Axios;
|
||||||
|
|||||||
@ -93,7 +93,15 @@ export const login = async (req, res, next) => {
|
|||||||
}
|
}
|
||||||
if (bResult) {
|
if (bResult) {
|
||||||
// password match
|
// password match
|
||||||
const token = jwt.sign(
|
const authtoken = jwt.sign(
|
||||||
|
{
|
||||||
|
username: result[0].username,
|
||||||
|
userId: result[0].id,
|
||||||
|
},
|
||||||
|
'SECRETTUEITKEY',
|
||||||
|
{ expiresIn: '300s' } // 5min
|
||||||
|
);
|
||||||
|
const refreshtoken = jwt.sign(
|
||||||
{
|
{
|
||||||
username: result[0].username,
|
username: result[0].username,
|
||||||
userId: result[0].id,
|
userId: result[0].id,
|
||||||
@ -115,7 +123,7 @@ export const login = async (req, res, next) => {
|
|||||||
const results = await ownConn.query(sql1, [dateTimeString, result[0].id]);
|
const results = await ownConn.query(sql1, [dateTimeString, result[0].id]);
|
||||||
return res.status(200).send({
|
return res.status(200).send({
|
||||||
message: 'Logged in!',
|
message: 'Logged in!',
|
||||||
token,
|
token: { authToken: authtoken, refreshToken: refreshtoken },
|
||||||
user: result[0],
|
user: result[0],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,13 +4,13 @@
|
|||||||
<span class="title-icon" id="logo-icon">
|
<span class="title-icon" id="logo-icon">
|
||||||
<img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
|
<img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
|
||||||
</span>
|
</span>
|
||||||
<pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Login</pre>
|
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Login</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="login-field">
|
<div class="login-field">
|
||||||
<div class="form-field" id="username-field">
|
<div class="form-field" id="username-field">
|
||||||
<label for="username-input" id="username-label">
|
<label for="username-input" id="username-label">
|
||||||
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
|
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
|
||||||
<img loading="lazy" src="../icons/Mail-Icon.svg" />
|
<img loading="lazy" src="/icons/Mail-Icon.svg" />
|
||||||
</span>
|
</span>
|
||||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
|
||||||
</label>
|
</label>
|
||||||
@ -21,14 +21,13 @@
|
|||||||
<div class="form-field" id="password-field">
|
<div class="form-field" id="password-field">
|
||||||
<label for="password-input" id="password-label">
|
<label for="password-input" id="password-label">
|
||||||
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
|
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
|
||||||
<img loading="lazy" src="../icons/Lock-Icon.svg" />
|
<img loading="lazy" src="/icons/Lock-Icon.svg" />
|
||||||
</span>
|
</span>
|
||||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
|
||||||
</label>
|
</label>
|
||||||
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
|
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
|
||||||
<input type="text" id="password-input" placeholder="*******">
|
<input type="text" id="password-input" placeholder="*******">
|
||||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle"
|
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
|
||||||
value="Show">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -37,10 +36,10 @@
|
|||||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']"> {{ errorMsg }} </div>
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']"> {{ errorMsg }} </div>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login"
|
<div class="buttons">
|
||||||
@click="handleLogin">
|
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login" @click="handleLogin">
|
||||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Signup"
|
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="signup-button" value="Signup" @click="testFunctionSignup">
|
||||||
@click="testFunctionSignup">
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -51,6 +50,7 @@ import { ref } from 'vue';
|
|||||||
import Axios from '../axios.config.js';
|
import Axios from '../axios.config.js';
|
||||||
import clientsideConfig from '../clientsideConfig.js';
|
import clientsideConfig from '../clientsideConfig.js';
|
||||||
|
|
||||||
|
const { signIn } = useAuth()
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const darkMode = ref(true);
|
const darkMode = ref(true);
|
||||||
const isError = ref(false);
|
const isError = ref(false);
|
||||||
@ -63,19 +63,29 @@ const handleLogin = async () => {
|
|||||||
const username = document.getElementById('username-input').value;
|
const username = document.getElementById('username-input').value;
|
||||||
const password = document.getElementById('password-input').value;
|
const password = document.getElementById('password-input').value;
|
||||||
|
|
||||||
const requestBody = {
|
//const requestBody = {
|
||||||
|
const credentials = {
|
||||||
username: username,
|
username: username,
|
||||||
password: password,
|
password: password,
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
|
/*let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
|
||||||
|
|
||||||
|
const sessionToken = useCookie('token', {maxAge: 604800, sameSite: true});
|
||||||
|
sessionToken.value = res.data.token;
|
||||||
|
Axios.defaults.headers.common['Authorization'] = `${username}`;
|
||||||
|
const userToken = useCookie('user', {maxAge: 604800, sameSite: true});
|
||||||
|
userToken.value = username;
|
||||||
// something to do with the res?
|
// something to do with the res?
|
||||||
console.log(res.data)
|
console.log(sessionToken)
|
||||||
|
console.log(res.data.message)
|
||||||
|
|
||||||
// sucessfully logged in
|
// sucessfully logged in
|
||||||
router.push('/')
|
router.push('/home')*/
|
||||||
|
let res = await signIn( credentials, { callbackUrl: '/home' })
|
||||||
|
console.log("res", res)
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
// handle the error
|
// handle the error
|
||||||
console.log(err.response.statusText)
|
console.log(err.response.statusText)
|
||||||
@ -162,22 +172,22 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 31.25rem;
|
width: 31.25rem;
|
||||||
height: 33rem;
|
min-height: 33rem;
|
||||||
|
height: fit-content;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
padding: 2.5rem 1.875rem;
|
padding: 2.5rem 1.875rem;
|
||||||
gap: 1.875rem;
|
gap: 1.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-darkmode {
|
.form-darkmode {
|
||||||
border: 0.0625rem solid #000;
|
border: 0.0625rem solid #000;
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-lightmode {
|
.form-lightmode {
|
||||||
border: 0.0625rem solid #8e8e8e;
|
border: 0.0625rem solid #8e8e8e;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.title-field {
|
.title-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -192,7 +202,6 @@ export default {
|
|||||||
width: 3.125rem;
|
width: 3.125rem;
|
||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-icon>img {
|
.title-icon>img {
|
||||||
width: 3.125rem;
|
width: 3.125rem;
|
||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
@ -203,20 +212,14 @@ export default {
|
|||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
letter-spacing: 5%;
|
letter-spacing: 0.05rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font: 400 1.875rem/1.875rem Overpass, sans-serif;
|
font: 400 1.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
.title-darkmode { color: #ffffff; }
|
||||||
|
.title-lightmode { color: #000000; }
|
||||||
|
|
||||||
.pre-darkmode,
|
|
||||||
.title-darkmode {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pre-lightmode,
|
|
||||||
.title-lightmode {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-field {
|
.login-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -227,6 +230,7 @@ export default {
|
|||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.form-field {
|
.form-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -238,16 +242,6 @@ export default {
|
|||||||
gap: 0.625rem;
|
gap: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-field-error-msg {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 25rem;
|
|
||||||
height: 3rem;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -265,43 +259,28 @@ label {
|
|||||||
width: 1.875rem;
|
width: 1.875rem;
|
||||||
height: 1.875rem;
|
height: 1.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon>img {
|
.icon>img {
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-darkmode>img {
|
|
||||||
filter: invert(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-lightmode>img {
|
|
||||||
filter: invert(0%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#username-icon>img {
|
#username-icon>img {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 0.9375rem;
|
height: 0.9375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#password-icon>img {
|
#password-icon>img {
|
||||||
width: 0.9375rem;
|
width: 0.9375rem;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
.icon-darkmode>img { filter: invert(100%); }
|
||||||
|
.icon-lightmode>img { filter: invert(0%); }
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
letter-spacing: 2%;
|
letter-spacing: 0.02rem;
|
||||||
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
|
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
.label-darkmode { color: #ffffff; }
|
||||||
.label-darkmode {
|
.label-lightmode { color: #000000; }
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-lightmode {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-field {
|
.input-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -314,15 +293,9 @@ label {
|
|||||||
border-radius: 0.3125rem;
|
border-radius: 0.3125rem;
|
||||||
padding: 0.1875rem 0.625rem;
|
padding: 0.1875rem 0.625rem;
|
||||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||||
}
|
}
|
||||||
|
.input-darkmode { background-color: #212121; }
|
||||||
.input-darkmode {
|
.input-lightmode { background-color: #EBEBEB; }
|
||||||
background-color: #212121;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-lightmode {
|
|
||||||
background-color: #EBEBEB;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=text] {
|
input[type=text] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -330,40 +303,63 @@ input[type=text] {
|
|||||||
background-color: #00000000;
|
background-color: #00000000;
|
||||||
border: none;
|
border: none;
|
||||||
color: #8e8e8e;
|
color: #8e8e8e;
|
||||||
letter-spacing: 5%;
|
letter-spacing: 0.01rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font: 100 0.75rem/1.25rem Overpass, sans-serif;
|
font: 100 0.75rem/1.25rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=button] {
|
#show-password-toggle {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
height: auto;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0;
|
||||||
background-color: #00000000;
|
background-color: #00000000;
|
||||||
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
letter-spacing: 5%;
|
letter-spacing: 0.01rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font: 300 0.75rem/1.25rem Overpass, sans-serif;
|
font: 300 0.75rem/1.25rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-darkmode {
|
|
||||||
color: #fff;
|
|
||||||
|
.form-field-error-msg {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 25rem;
|
||||||
|
height: 3rem;
|
||||||
|
gap: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-lightmode {
|
|
||||||
color: #000;
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: fit-content;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.625rem 0.625rem 0;
|
||||||
|
gap: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#login-button {
|
|
||||||
width: 13.75rem;
|
input[type=button] {
|
||||||
height: 4.375rem;
|
width: 9.375rem;
|
||||||
|
height: 3.125rem;
|
||||||
padding: 0.625rem;
|
padding: 0.625rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
border: none;
|
border: none;
|
||||||
color: #000;
|
|
||||||
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
|
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
|
||||||
letter-spacing: 2%;
|
letter-spacing: 0.02rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font: 600 1.25rem/1.875rem Overpass, sans-serif;
|
font: 600 1.125rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
.button-darkmode { color: #ffffff; }
|
||||||
|
.button-lightmode { color: #000000; }
|
||||||
</style>
|
</style>
|
||||||
@ -400,7 +400,7 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 1.875rem;
|
padding: 0.8rem 1.875rem;
|
||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
<section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
<h2 :class="['client-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Client name</h2>
|
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Client name</pre>
|
||||||
<div class="data-field" id="client-id">
|
<div class="data-field" id="client-id">
|
||||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="client-data">
|
<div class="client-data">
|
||||||
<div class="contact">
|
<div class="contact">
|
||||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</h3>
|
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</pre>
|
||||||
<div class="data-field" id="contact-person">
|
<div class="data-field" id="contact-person">
|
||||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
|
||||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
@ -22,7 +22,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="address">
|
<div class="address">
|
||||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</h3>
|
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</pre>
|
||||||
<div class="street-address">
|
<div class="street-address">
|
||||||
<div class="data-field" id="street-name">
|
<div class="data-field" id="street-name">
|
||||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
|
||||||
@ -44,7 +44,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="notes">
|
<div class="notes">
|
||||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
|
||||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -65,138 +65,102 @@ export default {
|
|||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.information {
|
|
||||||
|
|
||||||
|
section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1.25rem 1.875rem;
|
padding: 1.25rem 1.875rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
}
|
align-items: stretch;
|
||||||
|
justify-content: center;
|
||||||
.section-darkmode {
|
}
|
||||||
background-color: #2c2c2c;
|
.section-darkmode { background-color: #2c2c2c; }
|
||||||
}
|
.section-lightmode { background-color: #ffffff; }
|
||||||
|
|
||||||
.section-lightmode {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.client-name {
|
.title {
|
||||||
align-self: stretch;
|
|
||||||
padding: 1.25rem 0;
|
padding: 1.25rem 0;
|
||||||
letter-spacing: 5%;
|
letter-spacing: 0.05rem;
|
||||||
text-decoration-line: underline;
|
text-decoration-line: underline;
|
||||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
font: italic 400 1rem/1.875rem Overpass, sans-serif;
|
||||||
sans-serif;
|
}
|
||||||
}
|
.title-darkmode { color: #ffffff; }
|
||||||
|
.title-lightmode { color: #000000; }
|
||||||
|
|
||||||
.h2-darkmode {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2-lightmode {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-field {
|
.data-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex: auto;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
padding: 0 1.875rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
width: 100%;
|
|
||||||
padding: 0 1.875rem;
|
|
||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
border-radius: 0.625rem;
|
}
|
||||||
}
|
.data-field#client-id { padding: 0.625rem 1.875rem; }
|
||||||
|
.data-field#street-name { flex: 3; }
|
||||||
.data-field#client-id {
|
|
||||||
padding: 0.625rem 1.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-field#street-name {
|
|
||||||
width: 70%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-field#street-no {
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
letter-spacing: 5%;
|
letter-spacing: 0.03rem;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pre-darkmode {
|
pre {
|
||||||
color: #fff;
|
margin: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.pre-lightmode {
|
|
||||||
color: #000;
|
|
||||||
}
|
}
|
||||||
|
.pre-darkmode { color: #ffffff; }
|
||||||
|
.pre-lightmode { color: #000000; }
|
||||||
|
|
||||||
.data {
|
.data {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: flex-start;
|
|
||||||
padding: 0 0.625rem;
|
padding: 0 0.625rem;
|
||||||
border-radius: 0.3125rem;
|
border-radius: 0.3125rem;
|
||||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||||
background-color: #212121;
|
background-color: #212121;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-darkmode {
|
.data-darkmode {
|
||||||
background-color: #212121;
|
background-color: #212121;
|
||||||
color: #fff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-lightmode {
|
.data-lightmode {
|
||||||
background-color: #EBEBEB;
|
background-color: #ebebeb;
|
||||||
color: #000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data#notes {
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-data {
|
.client-data {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex: auto;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
padding: 1.25rem 1.875rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: stretch;
|
||||||
align-self: stretch;
|
gap: 0.625rem
|
||||||
padding: 0 0.625rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact,
|
.contact, .address {
|
||||||
.address {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex: auto;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
line-height: normal;
|
gap: 0.625rem;
|
||||||
width: 50%;
|
|
||||||
padding: 1.25rem 0.625rem;
|
|
||||||
border-radius: 0.3125rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.area-title {
|
.area-title {
|
||||||
letter-spacing: 5%;
|
letter-spacing: 0.03rem;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h3-darkmode {
|
.h3-darkmode { color: #ffffff; }
|
||||||
color: #fff;
|
.h3-lightmode { color: #000000; }
|
||||||
}
|
|
||||||
|
|
||||||
.h3-lightmode {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.street-address {
|
.street-address {
|
||||||
@ -205,15 +169,17 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
padding: 0 1.875rem 0 0;
|
|
||||||
gap: 0.625rem;
|
gap: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notes {
|
.notes {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
padding: 0.625rem 1.875rem;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-self: stretch;
|
gap: 0.625rem;
|
||||||
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
}
|
||||||
}</style>
|
#notes { align-self: stretch; }
|
||||||
|
|
||||||
|
</style>
|
||||||
143
components/server/ClientDepartment.vue
Normal file
143
components/server/ClientDepartment.vue
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Department name</pre>
|
||||||
|
<div class="data-group">
|
||||||
|
<div class="data-field" id="id">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="client-id">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client ID:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="head">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Head:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="notes">
|
||||||
|
<pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ClientDepartment",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1.25rem 1.875rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.section-darkmode { background-color: #2c2c2c; }
|
||||||
|
.section-lightmode { background-color: #ffffff; }
|
||||||
|
|
||||||
|
|
||||||
|
.title {
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
letter-spacing: 0.04rem;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
font: italic 400 1rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
.title-darkmode { color: #ffffff; }
|
||||||
|
.title-lightmode { color: #000000; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.data-group {
|
||||||
|
display: flex;
|
||||||
|
flex: auto;
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 0.625rem 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.data-field {
|
||||||
|
display: flex;
|
||||||
|
flex: auto;
|
||||||
|
width: 30%;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 0.625rem 1.875rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
#head { width: 40%; }
|
||||||
|
|
||||||
|
.label {
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-darkmode { color: #ffffff; }
|
||||||
|
.pre-lightmode { color: #000000; }
|
||||||
|
|
||||||
|
.data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 0 0.625rem;
|
||||||
|
border-radius: 0.3125rem;
|
||||||
|
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||||
|
background-color: #212121;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
|
font: 400 0.75rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
.data-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.data-lightmode {
|
||||||
|
background-color: #ebebeb;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
display: flex;
|
||||||
|
flex: auto;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1.25rem 1.875rem 0.625rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-title {
|
||||||
|
letter-spacing: 0.03rem;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notes { align-self: stretch; }
|
||||||
|
|
||||||
|
</style>
|
||||||
117
components/server/ClientDepartmentEmployeeList.vue
Normal file
117
components/server/ClientDepartmentEmployeeList.vue
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
|
||||||
|
<table class="data-table" id="client-employee-table">
|
||||||
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
|
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
|
||||||
|
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||||
|
<th :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">Job Title</th>
|
||||||
|
<th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
|
||||||
|
</tr>
|
||||||
|
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
|
<td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
|
||||||
|
<td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||||
|
<td :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">...</td>
|
||||||
|
<td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ClientDepartmentEmployeeList",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: stretch;
|
||||||
|
padding: 1.25rem 1.875rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
.section-darkmode { background-color: #2c2c2c; }
|
||||||
|
.section-lightmode { background-color: #ffffff; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.label {
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
letter-spacing: 0.04rem;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
font: 400 1rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
.label-darkmode { color: #ffffff; }
|
||||||
|
.label-lightmode { color: #000000; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.data-table {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 0.625rem;
|
||||||
|
table-layout: fixed;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
height: 3.125rem;
|
||||||
|
padding: 0.625rem;
|
||||||
|
gap: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr-head-darkmode {
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
.tr-head-lightmode {
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
.tr-darkmode { border-top: 0.0625rem solid #000000; }
|
||||||
|
.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
height: 1.875rem;
|
||||||
|
width: 35%;
|
||||||
|
padding: 0;
|
||||||
|
text-align: left;
|
||||||
|
border-left: none;
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
|
||||||
|
.th-darkmode, .td-darkmode {
|
||||||
|
color: #ffffff;
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
.th-lightmode, .td-lightmode {
|
||||||
|
color: #000000;
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID { width: 20%; }
|
||||||
|
.Pronouns { width: 10%; }
|
||||||
|
|
||||||
|
.Pronouns-darkmode { border-right: none; }
|
||||||
|
.Pronouns-lightmode { border-right: none; }
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
112
components/server/ClientDepartmentList.vue
Normal file
112
components/server/ClientDepartmentList.vue
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Departments:</div>
|
||||||
|
<table class="data-table" id="client-employee-table">
|
||||||
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
|
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
|
||||||
|
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||||
|
<th :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">Head</th>
|
||||||
|
</tr>
|
||||||
|
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
|
<td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
|
||||||
|
<td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||||
|
<td :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">...</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ClientDepartmentList",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: stretch;
|
||||||
|
padding: 1.25rem 1.875rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
.section-darkmode { background-color: #2c2c2c; }
|
||||||
|
.section-lightmode { background-color: #ffffff; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.label {
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
letter-spacing: 0.04rem;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
font: 400 1rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
.label-darkmode { color: #ffffff; }
|
||||||
|
.label-lightmode { color: #000000; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.data-table {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 0.625rem;
|
||||||
|
table-layout: fixed;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
height: 3.125rem;
|
||||||
|
padding: 0.625rem;
|
||||||
|
gap: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr-head-darkmode {
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
.tr-head-lightmode {
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
.tr-darkmode { border-top: 0.0625rem solid #000000; }
|
||||||
|
.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
height: 1.875rem;
|
||||||
|
width: 40%;
|
||||||
|
padding: 0;
|
||||||
|
text-align: left;
|
||||||
|
border-left: none;
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
|
||||||
|
.th-darkmode, .td-darkmode {
|
||||||
|
color: #ffffff;
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
.th-lightmode, .td-lightmode {
|
||||||
|
color: #000000;
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID { width: 20%; }
|
||||||
|
|
||||||
|
.DHead { border-right: none; }
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
191
components/server/ClientEmployee.vue
Normal file
191
components/server/ClientEmployee.vue
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Employee name</pre>
|
||||||
|
<div class="data-group" id="personal-data">
|
||||||
|
<div class="data-group" id="full-name">
|
||||||
|
<div class="data-field" id="ntitle">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Title/-s:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="first-name">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">First Name/-s:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="last-name">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Last Name/-s:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-group" id="other">
|
||||||
|
<div class="data-field" id="id">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="pronouns">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Pronouns:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="preferred-name">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Preferred Name:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-group" id="employment-data">
|
||||||
|
<div class="data-field" id="client-id">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client ID:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="department">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Department:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="job-title">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Job Title:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-group" id="contact-data">
|
||||||
|
<div class="data-field" id="phone">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone No.:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="mail">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="notes">
|
||||||
|
<pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ClientEmployee",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1.25rem 1.875rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.section-darkmode { background-color: #2c2c2c; }
|
||||||
|
.section-lightmode { background-color: #ffffff; }
|
||||||
|
|
||||||
|
|
||||||
|
.title {
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
letter-spacing: 0.04rem;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
font: italic 400 1rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
.title-darkmode { color: #ffffff; }
|
||||||
|
.title-lightmode { color: #000000; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.data-group {
|
||||||
|
display: flex;
|
||||||
|
flex: auto;
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: stretch;
|
||||||
|
}
|
||||||
|
#personal-data {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.625rem;
|
||||||
|
}
|
||||||
|
#full-name, #other { padding: 0; }
|
||||||
|
|
||||||
|
|
||||||
|
.data-field {
|
||||||
|
display: flex;
|
||||||
|
flex: auto;
|
||||||
|
width: 20%;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 0 1.875rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
#first-name, #last-name, #department, #job-title, #phone { width: 40%; }
|
||||||
|
#preferred-name, #mail { width: 60%; }
|
||||||
|
|
||||||
|
.label {
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-darkmode { color: #ffffff; }
|
||||||
|
.pre-lightmode { color: #000000; }
|
||||||
|
|
||||||
|
.data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 0 0.625rem;
|
||||||
|
border-radius: 0.3125rem;
|
||||||
|
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||||
|
background-color: #212121;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
|
font: 400 0.75rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
.data-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.data-lightmode {
|
||||||
|
background-color: #ebebeb;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
display: flex;
|
||||||
|
flex: auto;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1.25rem 1.875rem 0.625rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-title {
|
||||||
|
letter-spacing: 0.03rem;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notes { align-self: stretch; }
|
||||||
|
|
||||||
|
</style>
|
||||||
116
components/server/ClientEmployeeList.vue
Normal file
116
components/server/ClientEmployeeList.vue
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
|
||||||
|
<table class="data-table" id="client-employee-table">
|
||||||
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
|
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
|
||||||
|
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||||
|
<th :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">Department / Job Title</th>
|
||||||
|
<th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
|
||||||
|
</tr>
|
||||||
|
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
|
<td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
|
||||||
|
<td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||||
|
<td :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">...</td>
|
||||||
|
<td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ClientEmployeeList",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: stretch;
|
||||||
|
padding: 1.25rem 1.875rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
.section-darkmode { background-color: #2c2c2c; }
|
||||||
|
.section-lightmode { background-color: #ffffff; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.label {
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
letter-spacing: 0.04rem;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
font: 400 1rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
.label-darkmode { color: #ffffff; }
|
||||||
|
.label-lightmode { color: #000000; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.data-table {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 0.625rem;
|
||||||
|
table-layout: fixed;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
height: 3.125rem;
|
||||||
|
padding: 0.625rem;
|
||||||
|
gap: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr-head-darkmode {
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
.tr-head-lightmode {
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
.tr-darkmode { border-top: 0.0625rem solid #000000; }
|
||||||
|
.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
height: 1.875rem;
|
||||||
|
width: 35%;
|
||||||
|
padding: 0;
|
||||||
|
text-align: left;
|
||||||
|
border-left: none;
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
|
||||||
|
.th-darkmode, .td-darkmode {
|
||||||
|
color: #ffffff;
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
.th-lightmode, .td-lightmode {
|
||||||
|
color: #000000;
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID { width: 20%; }
|
||||||
|
.Pronouns { width: 10%; }
|
||||||
|
|
||||||
|
.Pronouns-darkmode { border-right: none; }
|
||||||
|
.Pronouns-lightmode { border-right: none; }
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
<section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
<table class="data-table" id="client-table">
|
<table class="data-table" id="client-table">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
@ -21,7 +21,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
@ -52,12 +52,12 @@ export default {
|
|||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.div-darkmode {
|
.section-darkmode {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div-lightmode {
|
.section-lightmode {
|
||||||
background-color: #fff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-table {
|
.data-table {
|
||||||
@ -94,8 +94,7 @@ export default {
|
|||||||
border-top: 0.0625rem solid #8e8e8e;
|
border-top: 0.0625rem solid #8e8e8e;
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th, td {
|
||||||
td {
|
|
||||||
height: 1.875rem;
|
height: 1.875rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -103,14 +102,12 @@ td {
|
|||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.th-darkmode,
|
.th-darkmode, .td-darkmode {
|
||||||
.td-darkmode {
|
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.th-lightmode,
|
.th-lightmode, .td-lightmode {
|
||||||
.td-lightmode {
|
color: #000000;
|
||||||
color: #000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
|
|||||||
@ -242,7 +242,7 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 1.875rem;
|
padding: 0.8rem 1.875rem;
|
||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -394,7 +394,7 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 1.875rem;
|
padding: 0.8rem 1.875rem;
|
||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|||||||
39
composables/UserObject.ts
Normal file
39
composables/UserObject.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
export var UserObjectDefinition: {
|
||||||
|
id: string;
|
||||||
|
username: string;
|
||||||
|
password: string;
|
||||||
|
registered: string;
|
||||||
|
lastLogin: string;
|
||||||
|
fullName: string;
|
||||||
|
email: string;
|
||||||
|
phonenumber: string;
|
||||||
|
address: string;
|
||||||
|
city: string;
|
||||||
|
postcode: string;
|
||||||
|
adminBool: boolean;
|
||||||
|
technician1Bool: boolean;
|
||||||
|
technician2Bool: boolean;
|
||||||
|
technicianMonitoringBool: boolean;
|
||||||
|
merchantBool: boolean;
|
||||||
|
internBool: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserObject {
|
||||||
|
id: string;
|
||||||
|
username: string;
|
||||||
|
password: string;
|
||||||
|
registered: string;
|
||||||
|
lastLogin: string;
|
||||||
|
fullName: string;
|
||||||
|
email: string;
|
||||||
|
phonenumber: string;
|
||||||
|
address: string;
|
||||||
|
city: string;
|
||||||
|
postcode: string;
|
||||||
|
adminBool: boolean;
|
||||||
|
technician1Bool: boolean;
|
||||||
|
technician2Bool: boolean;
|
||||||
|
technicianMonitoringBool: boolean;
|
||||||
|
merchantBool: boolean;
|
||||||
|
internBool: boolean;
|
||||||
|
}
|
||||||
@ -1,16 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<aside
|
<aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||||
:class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
|
||||||
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
|
||||||
@click="toggleActionbar">
|
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
||||||
src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<nav class="actions">
|
<nav class="actions">
|
||||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
|
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
|
||||||
<div class="icon" id="search-icon">
|
<div class="icon" id="search-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Search-Icon.svg" />
|
||||||
src="../icons/actionbar-icons/Search-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
|
||||||
@ -18,8 +14,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
|
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
|
||||||
<div class="icon" id="filter-icon">
|
<div class="icon" id="filter-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Filter-Icon.svg" />
|
||||||
src="../icons/actionbar-icons/Filter-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
|
||||||
@ -27,8 +22,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
|
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
|
||||||
<div class="icon" id="instances-icon">
|
<div class="icon" id="instances-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Instances-Icon.svg" />
|
||||||
src="../icons/actionbar-icons/Instances-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
|
||||||
@ -36,8 +30,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
|
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
|
||||||
<div class="icon" id="attachments-icon">
|
<div class="icon" id="attachments-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Attachments-Icon.svg" />
|
||||||
src="../icons/actionbar-icons/Attachments-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
|
||||||
@ -45,8 +38,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
|
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
|
||||||
<div class="icon" id="sell-icon">
|
<div class="icon" id="sell-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Sell-Icon.svg" />
|
||||||
src="../icons/actionbar-icons/Sell-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
|
||||||
@ -54,8 +46,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
|
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
|
||||||
<div class="icon" id="archive-icon">
|
<div class="icon" id="archive-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Archive-Icon.svg" />
|
||||||
src="../icons/actionbar-icons/Archive-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
|
||||||
@ -63,8 +54,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="addAsset">
|
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="addAsset">
|
||||||
<div class="icon" id="new-icon">
|
<div class="icon" id="new-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Add-New-Icon.svg" />
|
||||||
src="../icons/actionbar-icons/Add-New-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
|
||||||
@ -72,8 +62,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
|
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
|
||||||
<div class="icon" id="edit-icon">
|
<div class="icon" id="edit-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Edit-Icon.svg" />
|
||||||
src="../icons/actionbar-icons/Edit-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
|
||||||
@ -81,8 +70,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
|
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
|
||||||
<div class="icon" id="delete-icon">
|
<div class="icon" id="delete-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Delete-Icon.svg" />
|
||||||
src="../icons/actionbar-icons/Delete-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
|
||||||
@ -93,8 +81,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
const isExpanded = ref(true)
|
||||||
|
|
||||||
// get accesss to the store
|
// get accesss to the store
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
const toggleEditable = () => {
|
const toggleEditable = () => {
|
||||||
@ -103,6 +95,10 @@ const toggleEditable = () => {
|
|||||||
const deleteAsset = () => {
|
const deleteAsset = () => {
|
||||||
store.commit('doDeleteAsset');
|
store.commit('doDeleteAsset');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const toggleActionbar = () => {
|
||||||
|
isExpanded.value = !isExpanded.value;
|
||||||
|
};
|
||||||
const toggleFiltered = () => {
|
const toggleFiltered = () => {
|
||||||
store.commit('toggleFilteredAsset');
|
store.commit('toggleFilteredAsset');
|
||||||
};
|
};
|
||||||
@ -116,22 +112,9 @@ const addAsset = () => {
|
|||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Actionbar",
|
name: "Actionbar",
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
darkMode: true,
|
|
||||||
isExpanded: true,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggleActionbar() {
|
|
||||||
this.isExpanded = !this.isExpanded;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@ -146,7 +129,7 @@ aside.actionbar {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 5rem;
|
top: 3.75rem;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
inline-size: fit-content;
|
inline-size: fit-content;
|
||||||
@ -156,37 +139,30 @@ aside.actionbar {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 1.875rem 0.625rem;
|
padding: 1.875rem 0.625rem;
|
||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
transition: all 10s ease-in-out 0s;
|
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionbar-darkmode {
|
.actionbar-darkmode {
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
background-color: #2C2C2C;
|
background-color: #2C2C2C;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionbar-lightmode {
|
.actionbar-lightmode {
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside.is-expanded {
|
aside.is-expanded {
|
||||||
animation: expand 0.5s linear both;
|
animation: expand 0.5s linear both;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside.is-not-expanded {
|
aside.is-not-expanded {
|
||||||
animation: contract 0.5s linear both;
|
animation: contract 0.5s linear both;
|
||||||
width: stretch;
|
|
||||||
inline-size: stretch;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
padding: 1.25rem 0;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 1.25rem 0;
|
|
||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
}
|
}
|
||||||
@ -200,34 +176,21 @@ button {
|
|||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
gap: 0.125rem;
|
||||||
border: none;
|
border: none;
|
||||||
transition: 0.2s ease-in-out;
|
transition: 0.2s ease-in-out;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
gap: 0.125rem
|
|
||||||
}
|
}
|
||||||
|
.button-darkmode { background-color: #2C2C2C; }
|
||||||
|
.button-lightmode { background-color: #FFFFFF; }
|
||||||
|
|
||||||
.button-darkmode {
|
.button-darkmode:hover,
|
||||||
background-color: #2C2C2C;
|
.indicator-darkmode:hover { background-color: #444444; }
|
||||||
}
|
|
||||||
|
|
||||||
.button-lightmode {
|
.button-lightmode:hover,
|
||||||
background-color: #FFFFFF;
|
.indicator-lightmode:hover { background-color: #ACACAC; }
|
||||||
}
|
|
||||||
|
|
||||||
.button-darkmode:hover,
|
.is-not-expanded>button { align-self: center; }
|
||||||
.indicator-darkmode:hover {
|
|
||||||
background-color: #444444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-lightmode:hover,
|
|
||||||
.indicator-lightmode:hover {
|
|
||||||
background-color: #ACACAC;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-not-expanded>button {
|
|
||||||
align-self: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
@ -238,7 +201,9 @@ button {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
transition: padding 0.5s linear
|
}
|
||||||
|
.is-not-expanded .icon {
|
||||||
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#indicator-icon {
|
#indicator-icon {
|
||||||
@ -246,16 +211,9 @@ button {
|
|||||||
height: 1.875rem;
|
height: 1.875rem;
|
||||||
border-radius: 0.3125rem;
|
border-radius: 0.3125rem;
|
||||||
transition: 0.2s ease-in-out;
|
transition: 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
.is-not-expanded #indicator-icon { transform: rotate(180deg); }
|
||||||
|
|
||||||
.is-not-expanded .icon {
|
|
||||||
align-self: center;
|
|
||||||
padding: 0 0.375rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-not-expanded #indicator-icon {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 0.875rem;
|
width: 0.875rem;
|
||||||
@ -264,44 +222,31 @@ img {
|
|||||||
object-position: center;
|
object-position: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.img-darkmode { filter: invert(100%); }
|
||||||
#indicator-icon>img {
|
#indicator-icon>img { height: 1.25rem; }
|
||||||
height: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-darkmode {
|
|
||||||
filter: invert(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 0rem 0.3125rem 0rem 0rem;
|
padding: 0rem 0.625rem 0rem 0rem;
|
||||||
letter-spacing: 5%;
|
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font: 400 0.875rem/1.25rem Overpass, sans-serif;
|
font: 400 0.875rem/1.25rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
.label-darkmode { color: #FFFFFF; }
|
||||||
.label-darkmode {
|
.label-lightmode { color: #000000; }
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-lightmode {
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.fade-enter-from,
|
|
||||||
.fade-leave-to {
|
.fade-enter-from, .fade-leave-to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-to,
|
.fade-enter-to,
|
||||||
.fade-leave-from {
|
.fade-leave-from {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
max-width: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-active {
|
.fade-enter-active {
|
||||||
@ -321,8 +266,8 @@ img {
|
|||||||
|
|
||||||
@keyframes expand {
|
@keyframes expand {
|
||||||
from {
|
from {
|
||||||
max-inline-size: 3.25rem;
|
max-inline-size: 3.125rem;
|
||||||
max-width: 3.25rem;
|
max-width: 3.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
@ -338,8 +283,8 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
max-inline-size: 3.25rem;
|
max-inline-size: 3.125rem;
|
||||||
max-width: 3.25rem;
|
max-width: 3.125rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,67 +1,64 @@
|
|||||||
<template>
|
<template>
|
||||||
<aside
|
<aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||||
:class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
|
||||||
<div class="toggleNavbar">
|
<div class="toggleNavbar">
|
||||||
<div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
|
<div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/Back-Icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
|
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="ToggleSidebar">
|
||||||
@click="ToggleSidebar">
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
||||||
src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="menus">
|
<div class="menus">
|
||||||
<nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
|
<nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
|
||||||
<router-link to="/home" class="button"
|
<router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
|
||||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
|
|
||||||
<div class="icon" id="home-icon">
|
<div class="icon" id="home-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Home-Icon.svg" />
|
||||||
src="../icons/navbar-icons/Home-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
|
<Transition name="fade">
|
||||||
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
|
||||||
|
</Transition>
|
||||||
</router-link>
|
</router-link>
|
||||||
</nav>
|
</nav>
|
||||||
<nav id="site-menu">
|
<nav id="site-menu">
|
||||||
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
|
||||||
id="checklists-button">
|
|
||||||
<div class="icon" id="checklists-icon">
|
<div class="icon" id="checklists-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Checklists-Icon.svg" />
|
||||||
src="../icons/navbar-icons/Checklists-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
|
<Transition name="fade">
|
||||||
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
|
||||||
|
</Transition>
|
||||||
</router-link>
|
</router-link>
|
||||||
<nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultAssetPage()"
|
<nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultAssetPage()" id="assets-button">
|
||||||
id="assets-button">
|
|
||||||
<div class="icon" id="assets-icon">
|
<div class="icon" id="assets-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Assets-Icon.svg" />
|
||||||
src="../icons/navbar-icons/Assets-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
|
<Transition name="fade">
|
||||||
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
|
||||||
|
</Transition>
|
||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
|
||||||
id="solutions-button">
|
|
||||||
<div class="icon" id="solutions-icon">
|
<div class="icon" id="solutions-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Solutions-Icon.svg" />
|
||||||
src="../icons/navbar-icons/Solutions-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
|
<Transition name="fade">
|
||||||
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
|
||||||
|
</Transition>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
<router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
|
||||||
id="accounting-button">
|
|
||||||
<div class="icon" id="accounting-icon">
|
<div class="icon" id="accounting-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Accounting-Icon.svg" />
|
||||||
src="../icons/navbar-icons/Accounting-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</span>
|
<Transition name="fade">
|
||||||
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
|
||||||
|
</Transition>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
<router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="clients-button">
|
||||||
id="clients-button">
|
|
||||||
<div class="icon" id="clients-icon">
|
<div class="icon" id="clients-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Clients-Icon.svg" />
|
||||||
src="../icons/navbar-icons/Clients-Icon.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</span>
|
<Transition name="fade">
|
||||||
|
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</pre>
|
||||||
|
</Transition>
|
||||||
</router-link>
|
</router-link>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
@ -102,47 +99,37 @@ export default {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside {
|
aside.navbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 5rem;
|
top: 3.75rem;
|
||||||
width: 3.125rem;
|
height: fit-content;
|
||||||
transition: 0.5s ease-in-out;
|
width: fit-content;
|
||||||
}
|
inline-size: fit-content;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
flex: 0 0 0;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.9375rem;
|
||||||
|
gap: 0.625rem;
|
||||||
|
overflow: clip;
|
||||||
|
overflow-clip-margin: 0.625rem;
|
||||||
|
}
|
||||||
aside.is-expanded {
|
aside.is-expanded {
|
||||||
width: 12.5rem;
|
animation: expand 0.5s linear both;
|
||||||
}
|
}
|
||||||
|
aside.is-not-expanded {
|
||||||
.is-expanded .label {
|
animation: contract 0.5s linear both;
|
||||||
opacity: 1;
|
}
|
||||||
transition: 0.5s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-not-expanded #indicator-icon {
|
.is-not-expanded #indicator-icon {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
transition: 0.5s ease-in-out;
|
transition: 0.5s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: fit-content;
|
|
||||||
border-radius: 0.625rem;
|
|
||||||
align-items: stretch;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.625rem;
|
|
||||||
padding: 0.9375rem;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-darkmode {
|
.navbar-darkmode {
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
background-color: #2C2C2C;
|
background-color: #2C2C2C;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-lightmode {
|
.navbar-lightmode {
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
@ -155,75 +142,67 @@ aside.is-expanded {
|
|||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
overflow: clip;
|
||||||
|
overflow-clip-margin: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.menus {
|
.menus {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
|
||||||
justify-content: flex;
|
|
||||||
padding: 1.25rem 0;
|
padding: 1.25rem 0;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
gap: 1.875rem;
|
gap: 1.875rem;
|
||||||
transition: 0.5s ease-in-out;
|
overflow: clip;
|
||||||
align-items: center;
|
overflow-clip-margin: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
align-self: stretch;
|
||||||
padding: 0.9375rem 0;
|
padding: 0.9375rem 0;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
gap: 1.875rem;
|
gap: 1.875rem;
|
||||||
width: 92%;
|
overflow: clip;
|
||||||
}
|
overflow-clip-margin: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
.menu-darkmode {
|
.menu-darkmode { border-bottom: 0.0625rem solid #8E8E8E; }
|
||||||
border-bottom: 0.0625rem solid #8E8E8E;
|
.menu-lightmode { border-bottom: 0.0625rem solid #BABABA; }
|
||||||
}
|
|
||||||
|
|
||||||
.menu-lightmode {
|
|
||||||
border-bottom: 0.0625rem solid #BABABA;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
.button,
|
||||||
button,
|
|
||||||
a {
|
a {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
height: 2.1875rem;
|
height: 2.1875rem;
|
||||||
border-radius: 0.3125rem;
|
border-radius: 0.625rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
gap: 0.3125rem;
|
|
||||||
border: none;
|
border: none;
|
||||||
transition: 0.5s ease-in-out;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
width: 100%;
|
transition: 0.2s ease-in-out;
|
||||||
}
|
overflow: clip;
|
||||||
|
overflow-clip-margin: 0.625rem;
|
||||||
.button-darkmode {
|
}
|
||||||
background-color: #2C2C2C;
|
.button-darkmode { background-color: #2C2C2C; }
|
||||||
}
|
.button-lightmode { background-color: #FFFFFF; }
|
||||||
|
|
||||||
.button-lightmode {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-darkmode:hover,
|
.button-darkmode:hover,
|
||||||
.indicator-darkmode:hover,
|
.indicator-darkmode:hover,
|
||||||
.back-darkmode:hover {
|
.back-darkmode:hover { background-color: #444444; }
|
||||||
background-color: #444444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-lightmode:hover,
|
.button-lightmode:hover,
|
||||||
.indicator-lightmode:hover,
|
.indicator-lightmode:hover,
|
||||||
.back-lightmode:hover {
|
.back-lightmode:hover { background-color: #ACACAC; }
|
||||||
background-color: #ACACAC;
|
|
||||||
}
|
.is-not-expanded>button { align-self: center; }
|
||||||
|
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -232,24 +211,18 @@ a {
|
|||||||
height: 2.1875rem;
|
height: 2.1875rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: 0.2s ease-in-out;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#back-icon,
|
#back-icon,
|
||||||
#indicator-icon {
|
#indicator-icon {
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
border-radius: 0.3125rem;
|
border-radius: 0.3125rem;
|
||||||
transition-duration: 0.5s;
|
transition: 0.2s ease-in-out;
|
||||||
transition: 0.2s ease-out;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.back-darkmode:hover,
|
.back-darkmode:hover,
|
||||||
.back-lightmode:hover,
|
.back-lightmode:hover,
|
||||||
.indicator-darkmode:hover,
|
.indicator-darkmode:hover,
|
||||||
.indicator-lightmode:hover {
|
.indicator-lightmode:hover { cursor: pointer; }
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@ -258,28 +231,95 @@ img {
|
|||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: 0.2s ease-out;
|
}
|
||||||
}
|
.img-darkmode { filter: invert(100%); }
|
||||||
|
|
||||||
.img-darkmode {
|
|
||||||
filter: invert(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
letter-spacing: 5%;
|
display: inline-flex;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0rem 0.625rem 0rem 0.3125rem;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
letter-spacing: 0.03rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: auto 0;
|
|
||||||
font: 600 0.875rem/1.25rem Overpass, sans-serif;
|
font: 600 0.875rem/1.25rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
.label-darkmode { color: #FFFFFF; }
|
||||||
|
.label-lightmode { color: #000000; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.fade-enter-from,
|
||||||
|
.fade-leave-to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.5s ease-out;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-darkmode {
|
.fade-enter-to,
|
||||||
color: #FFFFFF;
|
.fade-leave-from {
|
||||||
|
opacity: 1;
|
||||||
|
padding: 0rem 0.625rem 0rem 0.3125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-lightmode {
|
.fade-enter-active {
|
||||||
color: #000000;
|
transition: all 0.75s linear;
|
||||||
|
animation: fade-in 0.5s linear forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: all 0.75s linear;
|
||||||
|
animation: fade-out 0.5s linear forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-move {
|
||||||
|
transition: transform 5s
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes expand {
|
||||||
|
from {
|
||||||
|
max-inline-size: 4.0625rem;
|
||||||
|
max-width: 4.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
max-inline-size: 15rem;
|
||||||
|
max-width: 15rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes contract {
|
||||||
|
from {
|
||||||
|
max-inline-size: 15rem;
|
||||||
|
max-width: 15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
max-inline-size: 4.0625rem;
|
||||||
|
max-width: 4.0625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
from {
|
||||||
|
max-width: 0;
|
||||||
|
max-inline-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
max-width: 10rem;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-out {
|
||||||
|
from {
|
||||||
|
max-width: 10rem;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
max-width: 0;
|
||||||
|
max-inline-size: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
|
<header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
|
||||||
<img id="header-logo" loading="lazy" src="../tüit-logo.svg.png" />
|
<img id="header-logo" loading="lazy" src="/tüit-logo.svg.png" />
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
<div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
|
<pre :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']" id='uname'></pre>
|
||||||
<div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
|
<div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
|
||||||
<img id="picture" loading="lazy" src="" />
|
<img id="picture" loading="lazy" src="" />
|
||||||
</div>
|
</div>
|
||||||
@ -12,19 +12,59 @@
|
|||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { useAuthStore } from '~/store/auth';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
const darkMode = ref(true)
|
const darkMode = ref(true)
|
||||||
|
|
||||||
|
//const auth = ref();
|
||||||
|
const username = ref('username');
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
//auth.value = useAuthStore();
|
||||||
|
//username.value = auth.value.username;
|
||||||
|
try {
|
||||||
|
username.value = useAuthStore().username;
|
||||||
|
} finally {
|
||||||
|
document.getElementById('uname').innerHTML = username;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onUpdated(() => {
|
||||||
|
try {
|
||||||
|
username.value = useAuthStore().username;
|
||||||
|
} finally {
|
||||||
|
document.getElementById('uname').innerHTML = username;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { useAuthStore } from '~/store/auth';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "PageHeader",
|
name: "PageHeader",
|
||||||
|
/*mounted() {
|
||||||
|
try {
|
||||||
|
const auth = useAuthStore();
|
||||||
|
const username = auth.username;
|
||||||
|
document.getElementById('uname').innerHTML = username;
|
||||||
|
} catch {
|
||||||
|
document.getElementById('uname').innerHTML = 'username'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updated() {
|
||||||
|
const auth = useAuthStore();
|
||||||
|
const username = auth.username;
|
||||||
|
document.getElementById('uname').innerHTML = username;
|
||||||
|
},*/
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -36,28 +76,28 @@ header {
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4.375rem;
|
height: 3.125rem;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0.625rem 1.25rem;
|
padding: 0.375rem 1.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-darkmode {
|
.header-darkmode {
|
||||||
background-color: #212121;
|
background-color: #212121;
|
||||||
border-bottom: 0.125em solid #000;
|
border-bottom: 0.125em solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-lightmode {
|
.header-lightmode {
|
||||||
background-color: #EBEBEB;
|
background-color: #ebebeb;
|
||||||
border-bottom: 0.125em solid #8e8e8e61;
|
border-bottom: 0.125em solid #8e8e8e;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header-logo {
|
#header-logo {
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
width: 5rem;
|
width: 4rem;
|
||||||
height: 2.5rem;
|
height: 2rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -68,37 +108,36 @@ header {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
gap: 0.625rem;
|
gap: 0.625rem;
|
||||||
padding: 0 0.625rem;
|
padding: 0 0.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin: auto 0;
|
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font: 200 0.875rem Overpass, sans-serif;
|
font: 200 0.75rem/1.25rem Overpass, sans-serif;
|
||||||
letter-spacing: 5%;
|
letter-spacing: 0.01rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.username-darkmode {
|
.username-darkmode {
|
||||||
color: #fff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.username-lightmode {
|
.username-lightmode {
|
||||||
color: #000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picture {
|
.picture {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 2.5rem;
|
width: 1.875rem;
|
||||||
height: 2.5rem;
|
height: 1.875rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picture-darkmode {
|
.picture-darkmode {
|
||||||
background-color: #fff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picture-lightmode {
|
.picture-lightmode {
|
||||||
background-color: #000;
|
background-color: #000000;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,12 +0,0 @@
|
|||||||
// export default function ({ route, redirect }) {
|
|
||||||
// // Check if user is not authenticated and trying to access a page other than /login
|
|
||||||
// if (!isAuthenticated() && route.path !== '/login') {
|
|
||||||
// return redirect('/login');
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function isAuthenticated() {
|
|
||||||
// // Implement authentication logic
|
|
||||||
// return false
|
|
||||||
// // Return true if authenticated, false otherwise
|
|
||||||
// }
|
|
||||||
24
nuxt-app/.gitignore
vendored
Normal file
24
nuxt-app/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Nuxt dev/build outputs
|
||||||
|
.output
|
||||||
|
.data
|
||||||
|
.nuxt
|
||||||
|
.nitro
|
||||||
|
.cache
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Node dependencies
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.DS_Store
|
||||||
|
.fleet
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Local env files
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
75
nuxt-app/README.md
Normal file
75
nuxt-app/README.md
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
# Nuxt 3 Minimal Starter
|
||||||
|
|
||||||
|
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Make sure to install the dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm install
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn install
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development Server
|
||||||
|
|
||||||
|
Start the development server on `http://localhost:3000`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm run dev
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn dev
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Production
|
||||||
|
|
||||||
|
Build the application for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm run build
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn build
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Locally preview production build:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run preview
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm run preview
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn preview
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||||
5
nuxt-app/app.vue
Normal file
5
nuxt-app/app.vue
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<NuxtWelcome />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
4
nuxt-app/nuxt.config.ts
Normal file
4
nuxt-app/nuxt.config.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
devtools: { enabled: true }
|
||||||
|
})
|
||||||
9593
nuxt-app/package-lock.json
generated
Normal file
9593
nuxt-app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
17
nuxt-app/package.json
Normal file
17
nuxt-app/package.json
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "nuxt-app",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"build": "nuxt build",
|
||||||
|
"dev": "nuxt dev",
|
||||||
|
"generate": "nuxt generate",
|
||||||
|
"preview": "nuxt preview",
|
||||||
|
"postinstall": "nuxt prepare"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"nuxt": "^3.10.3",
|
||||||
|
"vue": "^3.4.19",
|
||||||
|
"vue-router": "^4.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
nuxt-app/public/favicon.ico
Normal file
BIN
nuxt-app/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
3
nuxt-app/server/tsconfig.json
Normal file
3
nuxt-app/server/tsconfig.json
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"extends": "../.nuxt/tsconfig.server.json"
|
||||||
|
}
|
||||||
4
nuxt-app/tsconfig.json
Normal file
4
nuxt-app/tsconfig.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
// https://nuxt.com/docs/guide/concepts/typescript
|
||||||
|
"extends": "./.nuxt/tsconfig.json"
|
||||||
|
}
|
||||||
@ -1,10 +1,54 @@
|
|||||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
import type {
|
import type { NuxtPage } from 'nuxt/schema'
|
||||||
NuxtPage
|
import clientsideConfig from './clientsideConfig'
|
||||||
} from 'nuxt/schema'
|
import { UserObjectDefinition } from './composables/UserObject'
|
||||||
|
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
devtools: { enabled: true },
|
devtools: { enabled: true },
|
||||||
|
modules: [
|
||||||
|
'@pinia/nuxt',
|
||||||
|
'@sidebase/nuxt-auth',
|
||||||
|
],
|
||||||
|
auth: {
|
||||||
|
//baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/.output/server/chunks/routes/api/auth`,
|
||||||
|
computed: {
|
||||||
|
origin: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
|
||||||
|
//pathname: '/server/chunks/routes/api/auth/',
|
||||||
|
//fullBaseUrl: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api/auth/`,
|
||||||
|
},
|
||||||
|
//baseUrl: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api/auth/`,
|
||||||
|
provider: {
|
||||||
|
type: 'refresh',
|
||||||
|
endpoints: {
|
||||||
|
signIn: { path: '/login', method: 'post' },
|
||||||
|
signout: false,
|
||||||
|
signUp: { path: '/signup', method: 'post' },
|
||||||
|
getSession: { path: '/session', method: 'get' },
|
||||||
|
refresh: { path: '/refresh', method: 'post' }
|
||||||
|
},
|
||||||
|
token: {
|
||||||
|
signInResponseTokenPointer: '/token/authToken',
|
||||||
|
maxAgeInSeconds: 300, // 5 min
|
||||||
|
sameSiteAttribute: 'lax'
|
||||||
|
},
|
||||||
|
refreshToken: {
|
||||||
|
signInResponseRefreshTokenPointer: '/token/refreshToken',
|
||||||
|
maxAgeInSeconds: 604800, // 7 days
|
||||||
|
sameSiteAttribute: 'lax'
|
||||||
|
},
|
||||||
|
// TODO: define UserObject
|
||||||
|
//sessionDataType: UserObjectDefinition,
|
||||||
|
},
|
||||||
|
session: {
|
||||||
|
enableRefreshPeriodically: false,
|
||||||
|
enableRefreshOnWindowFocus: true,
|
||||||
|
},
|
||||||
|
globalAppMiddleware: true,
|
||||||
|
},
|
||||||
|
/*buildModules: [
|
||||||
|
//'@nuxtjs/composition-api/module',
|
||||||
|
['@pinia/nuxt', { disableVuex: false }],
|
||||||
|
],*/
|
||||||
devServer: {
|
devServer: {
|
||||||
https: {
|
https: {
|
||||||
key: './certs/privkey.pem',
|
key: './certs/privkey.pem',
|
||||||
@ -19,6 +63,19 @@ export default defineNuxtConfig({
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
runtimeConfig: {
|
||||||
|
public: {
|
||||||
|
apiBase: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api`,
|
||||||
|
axios: {
|
||||||
|
browserBaseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
private: {
|
||||||
|
axios: {
|
||||||
|
baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
// hooks: {
|
// hooks: {
|
||||||
// 'pages:extend'(pages) {
|
// 'pages:extend'(pages) {
|
||||||
// function setMiddleware(pages: NuxtPage[]) {
|
// function setMiddleware(pages: NuxtPage[]) {
|
||||||
|
|||||||
4664
package-lock.json
generated
4664
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
16
package.json
16
package.json
@ -7,25 +7,37 @@
|
|||||||
"dev": "nuxt dev",
|
"dev": "nuxt dev",
|
||||||
"generate": "nuxt generate",
|
"generate": "nuxt generate",
|
||||||
"preview": "nuxt preview",
|
"preview": "nuxt preview",
|
||||||
"postinstall": "nuxt prepare"
|
"prepare": "nuxt prepare",
|
||||||
|
"cleanup": "nuxt cleanup"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@nuxt/devtools": "latest",
|
"@nuxt/devtools": "latest",
|
||||||
"nuxt": "^3.8.0",
|
"@pinia/nuxt": "^0.5.1",
|
||||||
|
"@sidebase/nuxt-auth": "^0.6.7",
|
||||||
|
"nuxt": "^3.10.3",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
"vue": "^3.3.7",
|
"vue": "^3.3.7",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@nuxt/module-builder": "^0.5.5",
|
||||||
|
"@types/jsonwebtoken": "^9.0.6",
|
||||||
|
"@types/node": "^20.11.24",
|
||||||
"@vueform/toggle": "^2.1.4",
|
"@vueform/toggle": "^2.1.4",
|
||||||
"axios": "^1.6.7",
|
"axios": "^1.6.7",
|
||||||
"bcryptjs": "^2.4.3",
|
"bcryptjs": "^2.4.3",
|
||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
"express": "^4.18.2",
|
"express": "^4.18.2",
|
||||||
|
"h3": "^1.11.1",
|
||||||
"jsonwebtoken": "^9.0.2",
|
"jsonwebtoken": "^9.0.2",
|
||||||
"leading-trim": "^1.0.2",
|
"leading-trim": "^1.0.2",
|
||||||
"mariadb": "^3.2.3",
|
"mariadb": "^3.2.3",
|
||||||
|
"nuxi": "^3.10.1",
|
||||||
|
"pinia-plugin-persistedstate": "^3.2.1",
|
||||||
|
"typescript": "^5.3.3",
|
||||||
"uuid": "^9.0.1",
|
"uuid": "^9.0.1",
|
||||||
"vite": "^5.1.0",
|
"vite": "^5.1.0",
|
||||||
|
"vue-tsc": "^2.0.5",
|
||||||
"vuex": "^4.1.0"
|
"vuex": "^4.1.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -40,7 +40,8 @@ const onAsset = computed(() => store.state.onAsset);
|
|||||||
const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
|
const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'default'
|
layout: 'default',
|
||||||
|
title: 'Assets'
|
||||||
})
|
})
|
||||||
|
|
||||||
const darkMode = ref(true)
|
const darkMode = ref(true)
|
||||||
|
|||||||
@ -7,6 +7,11 @@
|
|||||||
<ClientTable v-if="onCustomerlist"/>
|
<ClientTable v-if="onCustomerlist"/>
|
||||||
<Client v-if="onCustomer"/>
|
<Client v-if="onCustomer"/>
|
||||||
<ClientQuickAccess v-if="onCustomer"/>
|
<ClientQuickAccess v-if="onCustomer"/>
|
||||||
|
<ClientEmployeeList v-if="onEmployeelist"/>
|
||||||
|
<ClientEmployee v-if="onEmployee"/>
|
||||||
|
<ClientDepartmentList v-if="onDepartmentlist"/>
|
||||||
|
<ClientDepartment v-if="onDepartment"/>
|
||||||
|
<ClientDepartmentEmployeeList v-if="onDepartment"/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
@ -18,18 +23,26 @@ import { ref } from 'vue';
|
|||||||
import ClientTable from "../components/server/ClientTable.vue";
|
import ClientTable from "../components/server/ClientTable.vue";
|
||||||
import Client from "../components/server/Client.vue";
|
import Client from "../components/server/Client.vue";
|
||||||
import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
|
import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
|
||||||
//import ClientEmployees from "../components/server/ClientEmployees.vue";
|
import ClientEmployeeList from "../components/server/ClientEmployeeList.vue";
|
||||||
//import ClientEmployee from "../components/server/ClientEmployee.vue";
|
import ClientEmployee from "../components/server/ClientEmployee.vue";
|
||||||
|
import ClientDepartmentList from '~/components/server/ClientDepartmentList.vue';
|
||||||
|
import ClientDepartment from '~/components/server/ClientDepartment.vue';
|
||||||
|
import ClientDepartmentEmployeeList from '~/components/server/ClientDepartmentEmployeeList.vue';
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'default'
|
layout: 'default',
|
||||||
|
title: 'Clients'
|
||||||
})
|
})
|
||||||
|
|
||||||
const darkMode = ref(true)
|
const darkMode = ref(true)
|
||||||
|
|
||||||
// to render the right components
|
// to render the right components
|
||||||
const onCustomerlist = ref(true)
|
const onCustomerlist = ref(true)
|
||||||
const onCustomer = ref(true)
|
const onCustomer = ref(false)
|
||||||
|
const onEmployeelist = ref(false)
|
||||||
|
const onEmployee = ref(false)
|
||||||
|
const onDepartmentlist = ref(false)
|
||||||
|
const onDepartment = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -20,7 +20,8 @@ import Dashboard from "../components/Dashboard.vue";
|
|||||||
import QuickAccess from "../components/QuickAccess.vue";
|
import QuickAccess from "../components/QuickAccess.vue";
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'empty'
|
layout: 'empty',
|
||||||
|
title: 'Home'
|
||||||
})
|
})
|
||||||
|
|
||||||
const darkMode = ref(true)
|
const darkMode = ref(true)
|
||||||
|
|||||||
@ -14,7 +14,8 @@
|
|||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'default'
|
layout: 'default',
|
||||||
|
title: 'Test'
|
||||||
})
|
})
|
||||||
|
|
||||||
const darkMode = ref(true)
|
const darkMode = ref(true)
|
||||||
|
|||||||
@ -20,8 +20,8 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<router-link to="/issues" class="button" id="issues-button">
|
<router-link to="/issueItems" class="button" id="issues-button">
|
||||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues</h1>
|
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue Items</h1>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-body">
|
<div id="content-body">
|
||||||
@ -43,7 +43,8 @@ import IssueVariants from "../components/server/IssueVariants.vue";
|
|||||||
import IssueVariant from "../components/server/IssueVariant.vue";
|
import IssueVariant from "../components/server/IssueVariant.vue";
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'default'
|
layout: 'default',
|
||||||
|
title: 'Issue Items'
|
||||||
})
|
})
|
||||||
|
|
||||||
const darkMode = ref(true)
|
const darkMode = ref(true)
|
||||||
@ -56,7 +57,7 @@ const onIssueItemVariant = ref(false)
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "IssuePage",
|
name: "IssueItemsPage",
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -20,8 +20,8 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<router-link to="/issues" class="button" id="issues-button">
|
<router-link to="/issueItems" class="button" id="issues-button">
|
||||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
|
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue Items</h1>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-body">
|
<div id="content-body">
|
||||||
@ -47,7 +47,8 @@ import OrderingInformation from "../components/server/OrderingInformation.vue";
|
|||||||
import Accounting from "../components/server/Accounting.vue";
|
import Accounting from "../components/server/Accounting.vue";
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'default'
|
layout: 'default',
|
||||||
|
title: 'Issue Slips'
|
||||||
})
|
})
|
||||||
|
|
||||||
const darkMode = ref(true)
|
const darkMode = ref(true)
|
||||||
|
|||||||
@ -16,7 +16,9 @@ import { ref } from 'vue';
|
|||||||
import LoginForm from "../components/LoginForm.vue";
|
import LoginForm from "../components/LoginForm.vue";
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'empty'
|
layout: 'empty',
|
||||||
|
title: 'Login',
|
||||||
|
auth: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
const darkMode = ref(true)
|
const darkMode = ref(true)
|
||||||
|
|||||||
@ -53,7 +53,8 @@ import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsIns
|
|||||||
import InstanceChecklist from "../components/server/InstanceChecklist.vue";
|
import InstanceChecklist from "../components/server/InstanceChecklist.vue";
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'default'
|
layout: 'default',
|
||||||
|
title: 'Maintenance Visits'
|
||||||
})
|
})
|
||||||
|
|
||||||
const darkMode = ref(true)
|
const darkMode = ref(true)
|
||||||
|
|||||||
@ -53,7 +53,8 @@ import ProductionOrdersInstance from "../components/server/ProductionOrdersInsta
|
|||||||
import InstanceChecklist from "../components/server/InstanceChecklist.vue";
|
import InstanceChecklist from "../components/server/InstanceChecklist.vue";
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'default'
|
layout: 'default',
|
||||||
|
title: 'Production Orders'
|
||||||
})
|
})
|
||||||
|
|
||||||
const darkMode = ref(true)
|
const darkMode = ref(true)
|
||||||
|
|||||||
@ -39,7 +39,8 @@ import UserAppearance from "../components/server/UserAppearance.vue";
|
|||||||
import UserRightsList from "../components/server/UserRightsList.vue";
|
import UserRightsList from "../components/server/UserRightsList.vue";
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'default'
|
layout: 'default',
|
||||||
|
title: 'Settings'
|
||||||
})
|
})
|
||||||
|
|
||||||
const darkMode = ref(true)
|
const darkMode = ref(true)
|
||||||
|
|||||||
@ -24,7 +24,8 @@ import Solution from "../components/server/Solution.vue";
|
|||||||
import SolutionChecklist from "../components/server/SolutionChecklist.vue";
|
import SolutionChecklist from "../components/server/SolutionChecklist.vue";
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'default'
|
layout: 'default',
|
||||||
|
title: 'Solutions'
|
||||||
})
|
})
|
||||||
|
|
||||||
const darkMode = ref(true)
|
const darkMode = ref(true)
|
||||||
|
|||||||
@ -108,6 +108,36 @@ const store = createStore({
|
|||||||
state.newVersion = ''
|
state.newVersion = ''
|
||||||
state.newLicense = ''
|
state.newLicense = ''
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// functions to change the production order and maintenance visit pages
|
||||||
|
changeToTemplatelist(state) {
|
||||||
|
state.onTemplatelist = true
|
||||||
|
state.onCustomerTemplatelist = false
|
||||||
|
state.onTemplate = false
|
||||||
|
state.onInstancelist = false
|
||||||
|
state.onInstance = false
|
||||||
|
},
|
||||||
|
changeToCustomerTemplatelist(state) {
|
||||||
|
state.onTemplatelist = false
|
||||||
|
state.onCustomerTemplatelist = true
|
||||||
|
state.onTemplate = false
|
||||||
|
state.onInstancelist = false
|
||||||
|
state.onInstance = false
|
||||||
|
},
|
||||||
|
changeToTemplate(state) {
|
||||||
|
state.onTemplatelist = false
|
||||||
|
state.onCustomerTemplatelist = false
|
||||||
|
state.onTemplate = true
|
||||||
|
state.onInstancelist = false
|
||||||
|
state.onInstance = false
|
||||||
|
},
|
||||||
|
changeToInstancelist(state) {
|
||||||
|
state.onTemplatelist = false
|
||||||
|
state.onCustomerTemplatelist = false
|
||||||
|
state.onTemplate = false
|
||||||
|
state.onInstancelist = true
|
||||||
|
state.onInstance = false
|
||||||
|
},
|
||||||
doDeleteAsset(state) {
|
doDeleteAsset(state) {
|
||||||
state.deleteAsset = true
|
state.deleteAsset = true
|
||||||
},
|
},
|
||||||
|
|||||||
3
public/icons/actionbar-icons/Attachment-Icon.svg
Normal file
3
public/icons/actionbar-icons/Attachment-Icon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m11 5.5-4.8 4.6a4 4 0 0 1-1.9.9c-.9 0-1.6-.1-2.3-.6C1.4 9.8 1 9 1 8c.1-.7.6-1.5 1.2-2l4.7-4.5c.4-.4 1-.6 1.5-.6.6 0 1.2.2 1.6.6.4.3.6.8.6 1.4 0 .5-.2 1.2-.6 1.5L5.2 9.1c-.2.1-.7.5-1 .5-.4 0-1 0-1.3-.3-.4-.4-.5-.7-.4-1.2 0-.5.4-.9.6-1L7 3.4"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 426 B |
3
public/icons/actionbar-icons/Departments-Icon.svg
Normal file
3
public/icons/actionbar-icons/Departments-Icon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" fill="none" viewBox="0 0 12 11">
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5 7v2c0 .6-.4 1-1 1H2a1 1 0 0 1-1-1V7c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm3-5v2c0 .6-.4 1-1 1H5a1 1 0 0 1-1-1V2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm3 5v2c0 .6-.4 1-1 1H8a1 1 0 0 1-1-1V7c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm-8 .5V6m3-3.5V1m3 6.5V6"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 415 B |
7
public/icons/actionbar-icons/Employees-Icon.svg
Normal file
7
public/icons/actionbar-icons/Employees-Icon.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" fill="none" viewBox="0 0 12 11">
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M7.5 5.5v-.3a1.7 1.7 0 1 1 3.5 0v.3"/>
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M9.3 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM6 2.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-5 3v-.3a1.7 1.7 0 1 1 3.5 0v.3"/>
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M2.8 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3 9.9v-.5a3 3 0 1 1 6 0v.5"/>
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 6.4A1.7 1.7 0 1 0 6 3a1.7 1.7 0 0 0 0 3.4Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 831 B |
95
server/api/auth/login.ts
Normal file
95
server/api/auth/login.ts
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
import axios, { AxiosError } from 'axios';
|
||||||
|
import serversideConfig from '../../../serversideConfig';
|
||||||
|
import https from 'https';
|
||||||
|
|
||||||
|
let errorMsg = 'error';
|
||||||
|
//const { data } = useAuthState()
|
||||||
|
|
||||||
|
|
||||||
|
export default eventHandler(async (event) => {
|
||||||
|
|
||||||
|
const agent = new https.Agent({
|
||||||
|
rejectUnauthorized: false,
|
||||||
|
});
|
||||||
|
const axiosInstance = axios.create({
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
Accept: "*",
|
||||||
|
},
|
||||||
|
httpsAgent: agent
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const body = await readBody(event)
|
||||||
|
|
||||||
|
// get user object from backend
|
||||||
|
try {
|
||||||
|
let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/login`, {
|
||||||
|
username: body.username,
|
||||||
|
password: body.password,
|
||||||
|
});
|
||||||
|
const sessionToken = res.data.token;
|
||||||
|
const user = res.data.user;
|
||||||
|
|
||||||
|
console.log('sessionToken: ', sessionToken);
|
||||||
|
console.log('user: ', user);
|
||||||
|
|
||||||
|
setResponseStatus(event, 200);
|
||||||
|
const resBody = {
|
||||||
|
token: sessionToken,
|
||||||
|
message: 'Login successful'
|
||||||
|
};
|
||||||
|
console.log('resBody: ', resBody);
|
||||||
|
|
||||||
|
return resBody;
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
if (axios.isAxiosError(err)) {
|
||||||
|
const axiosError = err as AxiosError;
|
||||||
|
|
||||||
|
if (axiosError.response) {
|
||||||
|
// Axios error
|
||||||
|
//console.error(axiosError.response.data.message);
|
||||||
|
//errorMsg = axiosError.response.data.message;
|
||||||
|
} else if (axiosError.request) {
|
||||||
|
// If error was caused by the request
|
||||||
|
console.error(axiosError.request);
|
||||||
|
} else {
|
||||||
|
// Other errors
|
||||||
|
console.error('Error', axiosError.message);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// No AxiosError
|
||||||
|
console.error('Error', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
throw createError({
|
||||||
|
statusCode: 400,
|
||||||
|
statusMessage: errorMsg,
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*import { loginSuccessful, sessionToken, errorMsg } from "../../middleware/login";
|
||||||
|
import { OutgoingMessage } from 'http';
|
||||||
|
|
||||||
|
export default defineEventHandler(async (event) => {
|
||||||
|
|
||||||
|
if (!loginSuccessful) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 400,
|
||||||
|
statusMessage: errorMsg,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
setResponseStatus(event, 200);
|
||||||
|
//setResponseHeader(event, "Set-Cookie", sessionToken);
|
||||||
|
const resBody = {
|
||||||
|
token: sessionToken,
|
||||||
|
message: 'Login successful'
|
||||||
|
};
|
||||||
|
return resBody;
|
||||||
|
})*/
|
||||||
50
server/api/auth/refresh.ts
Normal file
50
server/api/auth/refresh.ts
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import { createError, eventHandler, readBody, sendRedirect } from 'h3';
|
||||||
|
import jwt from 'jsonwebtoken';
|
||||||
|
|
||||||
|
const SECRET = 'SECRETTUEITKEY'
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
username: string;
|
||||||
|
id: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface JwtPayload extends User {
|
||||||
|
exp: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default eventHandler(async (event) => {
|
||||||
|
const body = await readBody<{ refreshToken: string }>(event);
|
||||||
|
|
||||||
|
if (!body.refreshToken) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 403,
|
||||||
|
statusMessage: 'Unauthorized, no refreshToken in payload'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const decoded = jwt.verify(body.refreshToken, SECRET) as JwtPayload | undefined;
|
||||||
|
|
||||||
|
if (!decoded) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 403,
|
||||||
|
statusMessage: 'Unauthorized, refreshToken can`t be verified'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// decoded.userId exists on JwtPayload, TS falsely wants decoded.id
|
||||||
|
const user: User = {
|
||||||
|
username: decoded.username,
|
||||||
|
id: decoded.userId,
|
||||||
|
};
|
||||||
|
|
||||||
|
const authToken = jwt.sign( user, SECRET, { expiresIn: 60 * 5 }); // expires in 5 min
|
||||||
|
const refreshToken = jwt.sign( user, SECRET, { expiresIn: 60 * 60 * 24 * 7 }); // expires in 7 days
|
||||||
|
|
||||||
|
return {
|
||||||
|
token: {
|
||||||
|
authToken,
|
||||||
|
refreshToken
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})
|
||||||
36
server/api/auth/session.ts
Normal file
36
server/api/auth/session.ts
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import { createError, eventHandler, getRequestHeader, H3Event } from 'h3'
|
||||||
|
import jwt from 'jsonwebtoken';
|
||||||
|
|
||||||
|
const TOKEN_TYPE = 'Bearer'
|
||||||
|
|
||||||
|
const extractToken = (authHeaderValue: string) => {
|
||||||
|
const [, token] = authHeaderValue.split(`${TOKEN_TYPE} `)
|
||||||
|
return token
|
||||||
|
}
|
||||||
|
|
||||||
|
const ensureAuth = (event: H3Event) => {
|
||||||
|
const authHeaderValue = getRequestHeader(event, 'authorization')
|
||||||
|
if (typeof authHeaderValue === 'undefined') {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 403,
|
||||||
|
statusMessage:
|
||||||
|
'Need to pass valid Bearer-authorization header to access this endpoint'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const extractedToken = extractToken(authHeaderValue)
|
||||||
|
try {
|
||||||
|
return jwt.verify(extractedToken, 'SECRETTUEITKEY')
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Login failed. Here's the raw error:", error)
|
||||||
|
throw createError({
|
||||||
|
statusCode: 403,
|
||||||
|
statusMessage: 'You must be logged in to access this page'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default eventHandler((event) => {
|
||||||
|
const user = ensureAuth(event)
|
||||||
|
return user
|
||||||
|
})
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import { errorMsg } from "../middleware/signUp.js";
|
import { errorMsg } from "../../middleware/signUp.js";
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
export default defineEventHandler(async (event) => {
|
||||||
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import { loginSuccessful, errorMsg } from "../middleware/login";
|
|
||||||
import { OutgoingMessage } from 'http';
|
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
|
||||||
|
|
||||||
if (!loginSuccessful) {
|
|
||||||
throw createError({
|
|
||||||
statusCode: 400,
|
|
||||||
statusMessage: errorMsg,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
setResponseStatus(event, 200)
|
|
||||||
return 'Successfully logged in.'
|
|
||||||
})
|
|
||||||
1
server/main.ts
Normal file
1
server/main.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
//import { pinia } from '@/store'
|
||||||
@ -1,56 +0,0 @@
|
|||||||
import axios, { AxiosError } from 'axios';
|
|
||||||
import serversideConfig from '../../serversideConfig';
|
|
||||||
import https from 'https';
|
|
||||||
|
|
||||||
let loginSuccessful = false;
|
|
||||||
let errorMsg = '';
|
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
|
||||||
loginSuccessful = false;
|
|
||||||
const agent = new https.Agent({
|
|
||||||
rejectUnauthorized: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const axiosInstance = axios.create({
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
Accept: "*",
|
|
||||||
},
|
|
||||||
httpsAgent: agent
|
|
||||||
});
|
|
||||||
|
|
||||||
if (event.path.startsWith("/api/login")) {
|
|
||||||
|
|
||||||
const body = await readBody(event)
|
|
||||||
|
|
||||||
// get user object from backend
|
|
||||||
try {
|
|
||||||
let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/login`, {
|
|
||||||
username: body.username,
|
|
||||||
password: body.password,
|
|
||||||
});
|
|
||||||
loginSuccessful = true;
|
|
||||||
} catch (err) {
|
|
||||||
if (axios.isAxiosError(err)) {
|
|
||||||
const axiosError = err as AxiosError;
|
|
||||||
|
|
||||||
if (axiosError.response) {
|
|
||||||
// Axios error
|
|
||||||
console.error(axiosError.response.data.message);
|
|
||||||
errorMsg = axiosError.response.data.message;
|
|
||||||
} else if (axiosError.request) {
|
|
||||||
// If error was caused by the request
|
|
||||||
console.error(axiosError.request);
|
|
||||||
} else {
|
|
||||||
// Other errors
|
|
||||||
console.error('Error', axiosError.message);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// No AxiosError
|
|
||||||
console.error('Error', err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export { loginSuccessful, errorMsg };
|
|
||||||
6
store/index.ts
Normal file
6
store/index.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { createPinia } from "pinia";
|
||||||
|
import piniaPluginPersistedState from "pinia-plugin-persistedstate"
|
||||||
|
|
||||||
|
const pinia = createPinia().use(piniaPluginPersistedState);
|
||||||
|
|
||||||
|
useNuxtApp().vueApp.use(pinia);
|
||||||
Reference in New Issue
Block a user