torben/gelegeapp-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added new icons for the navigation

Browse Source 
select the new icon for any state
This commit is contained in:
Torben Indorf
2020-02-11 21:56:57 +01:00
parent a109a01959
commit 4e1a51c823
16 changed files with 79 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/TODO-List
+5
View File
@@ -0,0 +1,5 @@
// TODO: Hinzufügen der "X erstellen"-Dialoge
// TODO: Hinzufügen der GeoJson zu einer Area (im Dialog + Backend)
// TODO: Logout
// TODO: InWork: Icons für Status
//
src/api/repositories/StatusRepository.ts
+12
View File
@@ -1,4 +1,5 @@
import BaseRepository from '@/api/repositories/BaseRepository';
import {Status} from '@/models/Status';
export default class StatusRepository extends BaseRepository {
@@ -17,4 +18,15 @@ export default class StatusRepository extends BaseRepository {
public editStatus(status: any): Promise<any> {
return this.axiosClient.patch(`status/${status.id}`, status);
}
public setStatusIcon(status: Status, icon: any): Promise<any> {
const formData = new FormData();
formData.append('file', icon);
return this.axiosClient.post(`status/${status.id}/setIcon`, formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
}
src/assets/logo.svg
-23
View File
@@ -1,23 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 58 (101010) - https://sketch.com -->
<title>E20E0719-69F7-4807-B0EB-A3B8E520CFE4</title>
<desc>Created with sketchtool.</desc>
<g id="Admin-V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Admin-/-Firma-dashboard" transform="translate(-16.000000, -18.000000)" fill="#FFFFFF">
<g id="Group-8">
<g id="Group-[74h]" transform="translate(16.000000, 18.000000)">
<g id="REIN_demo_logo">
<g id="Group-[26h]">
<g id="logo_white_v4">
<path d="M14.1487224,3.53718059 C18.0557842,3.53718059 21.2230835,6.70447998 21.2230835,10.6115418 C21.2230835,14.5186036 18.0557842,17.685903 14.1487224,17.685903 C10.2416606,17.685903 7.07436118,14.5186036 7.07436118,10.6115418 C7.07436118,10.4561071 7.07937403,10.3018433 7.08924687,10.1489031 C7.30539746,13.3710794 9.98756002,15.9173127 13.2644272,15.9173127 C16.6831063,15.9173127 19.4544933,13.1459257 19.4544933,9.72724663 C19.4544933,6.45037943 16.90826,3.76821687 13.6863698,3.55133527 L13.9104595,3.54111743 L13.9104595,3.54111743 Z" id="Oval-6" transform="translate(14.148722, 10.611542) rotate(170.000000) translate(-14.148722, -10.611542) "></path>
<path d="M15.4751651,1.7685903 C21.0915664,1.7685903 25.6445593,6.32158316 25.6445593,11.9379845 C25.6445593,17.5543858 21.0915664,22.1073787 15.4751651,22.1073787 C9.85876376,22.1073787 5.30577089,17.5543858 5.30577089,11.9379845 C5.30577089,11.7070202 5.31347053,11.4778542 5.32862713,11.2507292 C5.65638204,15.8365026 9.48003871,19.4544933 14.1487224,19.4544933 C19.0325496,19.4544933 22.9916738,15.495369 22.9916738,10.6115418 C22.9916738,5.94285811 19.3736832,2.11920145 14.7885103,1.79138013 C15.0150348,1.77628994 15.2442008,1.7685903 15.4751651,1.7685903 Z"></path>
<path d="M13.7065748,3.55271368e-14 C14.0156412,3.55271368e-14 14.3223185,0.010229409 14.6262864,0.030368126 C8.4293416,0.465007926 3.53718059,5.6301835 3.53718059,11.9379845 C3.53718059,18.5311513 8.88199831,23.875969 15.4751651,23.875969 C21.7822899,23.875969 26.9470342,18.9848568 27.3833037,12.788727 C27.4029648,13.0921718 27.4131496,13.3981839 27.4131496,13.7065748 C27.4131496,21.276507 21.276507,27.4131496 13.7065748,27.4131496 C6.13664256,27.4131496 3.55271368e-14,21.276507 3.55271368e-14,13.7065748 C3.55271368e-14,6.13664256 6.13664256,3.55271368e-14 13.7065748,3.55271368e-14 Z" id="Oval-8"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

src/components/status/CreateStatus.component.vue
+24 -2
View File
@@ -16,6 +16,15 @@
v-model="selectedStatus.name"/>
<span class="input-error text-center">{{ errors.first('name') }}</span>
</v-row>
<v-row class="d-flex flex-column mt-6">
<v-label class="">Neues Icon auswählen</v-label>
<v-file-input v-model="iconFile" name="iconFile" v-validate="'required'" data-vv-as="Icon"
ref="iconFile" class="mt-3" label="Icon" accept="image/png" outlined>
</v-file-input>
<v-label v-if="selectedStatus.iconName">Derzeitiges Icon: {{ selectedStatus.iconName }}
</v-label>
<span class="input-error text-center">{{ errors.first('iconFile') }}</span>
</v-row>
</v-form>
</v-card-text>
<v-card-actions>
@@ -45,11 +54,16 @@
public selectedStatus?: Status;
@StatusStore.Action('createStatusAction')
private createStatusAction!: (statusData: any) => Promise<Status[]>;
private createStatusAction!: (statusData: any) => Promise<Status>;
@StatusStore.Action('editStatusAction')
private editStatusAction!: (statusData: any) => Promise<Status>;
@StatusStore.Action('setStatusIconAction')
private setStatusIconAction!: (payload: { status: Status, icon: any }) => Promise<boolean>;
public iconFile?: any = null;
private closeDialog() {
this.$emit('closeDialog');
}
@@ -60,8 +74,16 @@
if (this.selectedStatus!.id) {
await this.editStatusAction(this.selectedStatus);
} else {
await this.createStatusAction(this.selectedStatus);
this.selectedStatus = await this.createStatusAction(this.selectedStatus);
}
if (this.iconFile) {
await this.setStatusIconAction({
status: this.selectedStatus!,
icon: this.iconFile
});
}
this.closeDialog();
} else {
// TODO: Show error message
src/components/status/StatusTable.component.vue
+3
View File
@@ -49,6 +49,9 @@
this.tableHeaders = [{
text: 'Statusname',
value: 'name'
}, {
text: 'Icon-Name',
value: 'iconName'
}, {
text: 'Optionen',
value: 'options',
src/helper/NavigationItemStorage.ts
+16 -5
View File
@@ -5,16 +5,18 @@ export const NavigationItemStorage: NavigationItemInterface[] = [
{
title: i18n.t('GENERAL.DASHBOARD').toString(),
routerName: 'dashboard',
icon: 'mdi-chart-arc',
dropdownOptions: []
},
{
title: i18n.t('GENERAL.USERS').toString(),
routerName: 'userOverview',
icon: 'mdi-account',
dropdownOptions: [
{
title: 'NAVIGATION.DROPDOWN.ALL_USERS',
routerName: 'usersOverview',
icon: 'mdi-user'
icon: 'mdi-account-multiple'
},
{
title: 'NAVIGATION.DROPDOWN.CREATE_USER',
@@ -26,11 +28,12 @@ export const NavigationItemStorage: NavigationItemInterface[] = [
{
title: i18n.t('GENERAL.AREAS').toString(),
routerName: 'areasOverview',
icon: 'mdi-map',
dropdownOptions: [
{
title: 'NAVIGATION.DROPDOWN.ALL_AREAS',
routerName: 'areasOverview',
icon: 'mdi-account-multiple'
icon: 'mdi-map'
},
{
title: 'NAVIGATION.DROPDOWN.CREATE_AREA',
@@ -40,23 +43,31 @@ export const NavigationItemStorage: NavigationItemInterface[] = [
]
},
{
title: i18n.t('NAVIGATION.DROPDOWN.MISC').toString(),
title: i18n.t('NAVIGATION.DROPDOWN.ENTITIES').toString(),
routerName: 'entitiesOverview',
icon: 'mdi-binoculars',
dropdownOptions: [
{
title: 'NAVIGATION.DROPDOWN.ALL_ENTITIES',
routerName: 'entitiesOverview',
icon: 'mdi-account-multiple'
icon: 'mdi-binoculars'
},
{
title: 'NAVIGATION.DROPDOWN.CREATE_ENTITY',
routerName: 'createEntity',
icon: 'mdi-plus-circle-outline'
}
]
},
{
title: i18n.t('NAVIGATION.DROPDOWN.STATUS').toString(),
routerName: 'statusOverview',
icon: 'mdi-state-machine',
dropdownOptions: [
{
title: 'NAVIGATION.DROPDOWN.ALL_STATUS',
routerName: 'statusOverview',
icon: 'mdi-account-multiple'
icon: 'mdi-state-machine'
},
{
title: 'NAVIGATION.DROPDOWN.CREATE_STATUS',
src/interfaces/NavigationItem.interface.ts
+1
View File
@@ -4,4 +4,5 @@ export interface NavigationItemInterface {
title: string;
routerName: string;
dropdownOptions: NavigationSubItemInterface[];
icon: string;
}
src/locales/de.json
+2
View File
@@ -19,6 +19,8 @@
},
"NAVIGATION": {
"DROPDOWN": {
"ENTITIES": "Entitäten",
"STATUS": "Status",
"MISC": "Weiteres",
"ALL_USERS": "Alle Benutzer",
"ALL_AREAS": "Alle Gebiete",
src/models/Area.ts
+2 -1
View File
@@ -11,7 +11,8 @@ export class Area {
Object.assign(this, data);
if (data.users) {
data.users.map((userData: any) => {
this.users = [];
data.users.forEach((userData: any) => {
this.users.push(new User(userData));
});
}
src/models/Status.ts
+1
View File
@@ -2,6 +2,7 @@ export class Status {
public id?: string;
public name?: string;
public iconName?: string;
constructor(data: any) {
Object.assign(this, data);
src/plugins/vuetify/themes/defaultDark.ts
+1 -1
View File
@@ -6,7 +6,7 @@
*/
export default {
// vuetify theme colors
'primary': '#3787f6',
'primary': '#00A252',
'secondary': '#F5F5F5',
'accent': '#ffffff', // TODO set accent color
'error': '#bf2828',
src/plugins/vuetify/themes/defaultLight.ts
+1 -35
View File
@@ -5,8 +5,7 @@
* https://vuetifyjs.com/en/customization/theme#theme
*/
export default {
// REIN light theme colors
'primary': '#1867c0',
'primary': '#00A252',
'secondary': '#172B4D',
'accent': '#00A252',
'error': '#E02020',
@@ -31,37 +30,4 @@ export default {
'on-error': '#ffffff',
'on-warning': '#ffffff',
'on-info': '#ffffff',
// colors for mitarbeiter profile image
// ATTENTION: if employee colors are being updated, change the digitSum function in UserInitialsComponent accordingly.
'employee_color_1': '#4FC2F8',
'employee_color_2': '#FE8B66',
'employee_color_3': '#9CCC66',
'employee_color_4': '#9E9E9E',
'employee_color_5': '#A0887E',
'employee_color_6': '#4CD0E2',
'employee_color_7': '#4BB6AC',
'employee_color_8': '#5F97F6',
'employee_color_9': '#9FA8DB',
'employee_color_10': '#B39DDB',
// mics colors
'bar-yellow': '#F7B500',
'job-started': '#E9F7F2',
'admin-navigation-bar-bg': '#EDEFF5',
'signature-background': '#EEEEEE',
'map-radius-border' : '#B8C9E3',
'map-radius-background' : '#3282FC',
'button-success': '#02875A',
// dashboard icons
'total-customer': '#5CBBF6',
'total-employee': '#F7B500',
'total-location': '#B39DDB',
'total-workTime': '#00D086',
// chart
'chart-fill-color': 'rgba(0, 208, 134, 0.2)',
'chart-stroke-color': '#00D086',
// job states
'comment_color': '#FB8C00',
'cancelled_color': '#E02020',
'images_color': '#4CAF50',
};
src/stores/status.store.ts
+6
View File
@@ -32,6 +32,12 @@ const actions: ActionTree<any, any> = {
const status = new Status(statusRaw.data);
commit('handleStatus', status);
return status;
},
setStatusIconAction: async ({commit}, payload: { status: Status, icon: any }): Promise<Status> => {
const statusRaw = await statusRepository.setStatusIcon(payload.status, payload.icon);
const status = new Status(statusRaw.data);
commit('handleStatus', status);
return status;
}
};
src/stores/user.store.ts
+1
View File
@@ -45,6 +45,7 @@ const mutations = {
} else {
state.users.push(user);
}
console.log('state', state.users);
}
};
src/views/shared/Login.view.vue
+1 -1
View File
@@ -7,7 +7,7 @@
<div class="mt-12"></div>
<div class="my-12 on-primary--text d-flex align-center">
<div class="application-logo-container mr-3">
<img class="big" src="../../assets/logo.svg" alt="logo" />
</div>
<span class="application-name">
{{ applicationName }}
src/views/shared/Navigation.view.vue
+2 -5
View File
@@ -4,10 +4,6 @@
<div class="toolbar d-flex justify-space-between white--text">
<div class="d-flex align-center">
<div class="application-logo-container mt-1">
<img
src="../../assets/logo.svg"
alt="logo"
/>
</div>
<div class="application-name ml-6 mr-12">
<template>
@@ -32,10 +28,11 @@
class="fill-height d-flex align-center justify-center px-3"
v-on="on"
>
<v-icon class="white--text mr-2">{{ item.icon }}</v-icon>
<div>{{ item.title }}</div>
<v-icon
v-if="item.dropdownOptions.length > 0"
class="white--text ml-3"
class="white--text ml-2"
>
mdi-chevron-down
</v-icon>