Merge pull request #3005 from SCADA-LTS/feature/#2996_Added_top_descr…

…iption_in_new_UI2

#2996 added top description in new ui

WebContent/WEB-INF/jsp/systemSettings.jsp

@@ -632,13 +632,13 @@
       <tr>
         <td class="formLabelRequired"><spring:message code="systemsettings.top.description.prefix"/></td>
         <td class="formField">
-          <input id="<c:out value="<%= SystemSettingsDAO.TOP_DESCRIPTION_PREFIX %>"/>" type="text" class="formShort" style="width: 300px;"/>
+          <input id="<c:out value="<%= SystemSettingsDAO.TOP_DESCRIPTION_PREFIX %>"/>" type="text" class="formShort" style="width: 150px"/>
         </td>
       </tr>
       <tr>
         <td class="formLabelRequired"><spring:message code="systemsettings.top.description"/></td>
         <td class="formField">
-          <input id="<c:out value="<%= SystemSettingsDAO.TOP_DESCRIPTION %>"/>" type="text" class="formShort" style="width: 300px;"/>
+          <input id="<c:out value="<%= SystemSettingsDAO.TOP_DESCRIPTION %>"/>" type="text" class="formShort" style="width: 150px"/>
         </td>
       </tr>
       <tr>

WebContent/WEB-INF/springDispatcher-servlet.xml

@@ -17,6 +17,13 @@
       </mvc:message-converters>
     </mvc:annotation-driven>
 
+    <mvc:interceptors>
+      <mvc:interceptor>
+        <mvc:mapping path="/view_edit.shtm" />
+        <ref bean="commonData" />
+      </mvc:interceptor>
+    </mvc:interceptors>
+
 	<context:annotation-config />
     <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
      <property name="viewClass"><value>org.springframework.web.servlet.view.JstlView</value></property>

WebContent/WEB-INF/tags/logo.tag

@@ -6,10 +6,10 @@
 
         <div id="top-description-container">
             <span id="top-description-prefix" class="custom-text">
-                <c:out value="${scadaVersion.getTopDescriptionPrefix()}"/>
+                <c:out value="${topDescriptionPrefix}"/>
             </span>
             <span id="top-description" class="custom-text">
-                <c:out value="${scadaVersion.getTopDescription()}"/>
+                <c:out value="${topDescription}"/>
             </span>
         </div>
 

WebContent/assets/user_styles.css

@@ -23,19 +23,19 @@
 }
 
 #top-description-prefix {
-    color: black;
-    font-size: 2em;
-    margin-left: 0.5em;
-    margin-right: 0.5em;
-    display: inline-block;
-    vertical-align: bottom;
-    line-height: 1;
+    color: black !important;
+    font-size: 2em !important;
+    margin-left: 0.5em !important;
+    margin-right: 0.5em !important;
+    display: inline-block !important;
+    vertical-align: bottom !important;
+    line-height: 1 !important;
 }
 
 #top-description {
-    color: #39B54A;
-    font-size: 2em;
-    display: inline-block;
-    vertical-align: bottom;
-    line-height: 1;
+    color: #39B54A !important;
+    font-size: 2em !important;
+    display: inline-block !important;
+    vertical-align: bottom !important;
+    line-height: 1 !important;
 }

scadalts-ui/src/apps/App.vue

@@ -5,11 +5,29 @@
 		<v-app-bar id="topbar" app dark color="primary">
 			<v-list-item>
 				<v-list-item-content>
-					<v-list-item-title class="title"> Scada-LTS
-						<v-icon  v-if="!wsLive" title="Offline">mdi-access-point-network-off</v-icon></v-list-item-title>
-					<v-list-item-subtitle>
-						version {{ $store.getters.appMilestone }}
-					</v-list-item-subtitle>
+					<v-row class="no-wrap">
+						<v-col cols="auto">
+							<v-list-item-title class="title">Scada-LTS
+								<v-icon v-if="!wsLive" title="Offline">mdi-access-point-network-off</v-icon>
+							</v-list-item-title>
+							<v-list-item-subtitle>
+								version {{ $store.getters.appMilestone }}
+							</v-list-item-subtitle>
+						</v-col>
+
+						<v-row>
+							<v-col class="d-flex justify-start align-center">
+								<div id="top-description-container" class="text-align-left">
+									<span id="top-description-prefix" class="custom-text">
+										{{ topDescriptionPrefix }}
+									</span>
+									<span id="top-description" class="custom-text">
+										{{ topDescription }}
+									</span>
+								</div>
+							</v-col>
+						</v-row>
+					</v-row>
 				</v-list-item-content>
 			</v-list-item>
 			<v-list-item max-width="50" v-if="!!highestUnsilencedAlarmLevel">
@@ -71,6 +89,7 @@
 import NavigationBar from '../layout/NavigationBar.vue';
 import internetMixin from '@/utils/connection-status-utils';
 import NotificationAlert from '../layout/snackbars/NotificationAlert.vue';
+import {unescapeHtml} from "@/utils/common";
 
 export default {
 	name: 'app',
@@ -104,17 +123,17 @@ export default {
 				4: {
 					image: "images/flag_red.png"
 				}
-			},
+			}
 		};
 	},
 
 	computed: {
 		user() {
-			return this.$store.state.loggedUser;
+			return this.$store.getters.loggedUser;
 		},
 		isUserRoleAdmin() {
-			if (!!this.$store.state.loggedUser) {
-				return this.$store.state.loggedUser.admin;
+			if (!!this.$store.getters.loggedUser) {
+				return this.$store.getters.loggedUser.admin;
 			} else {
 				return false;
 			}
@@ -128,21 +147,58 @@ export default {
 		isLoginPage() {
 			return this.$route.name === 'login';
 		},
+		topDescriptionPrefix() {
+		    let systemInfoSettings = this.$store.state.systemSettings.systemInfoSettings;
+		    if(systemInfoSettings && systemInfoSettings.topDescriptionPrefix) {
+		        return systemInfoSettings.topDescriptionPrefix;
+		    }
+		    return '';
+		},
+        topDescription() {
+            let systemInfoSettings = this.$store.state.systemSettings.systemInfoSettings;
+            if(systemInfoSettings && systemInfoSettings.topDescription) {
+		        return systemInfoSettings.topDescription;
+		    }
+            return '';
+        }
 	},
 
-	mounted() {
+	async mounted() {
 	    if(!this.user) {
-    			this.$store.dispatch('getUserInfo');
-    	}
-		this.$store.dispatch('getLocaleInfo');
+            await this.$store.dispatch('getUserInfo');
+        }
+        await this.$store.dispatch('getLocaleInfo');
+        await this.$store.dispatch('getCustomCss');
+        await this.$store.dispatch('getSystemInfoSettings');
 		this.connectToWebSocket();
+		this.fetchCustomCss();
 	},
 
 	destroyed() {
 		this.unSubscribeAlarms();
 	},
 
 	methods: {
+
+		fetchCustomCss() {
+			let customCss = this.$store.state.systemSettings.customCss;
+			let unescapedContent = unescapeHtml(customCss.content);
+            this.applyCustomCss(unescapedContent);
+		},
+
+		applyCustomCss(cssContent) {
+			let styleElement = document.getElementById('custom-css-style');
+
+			if (!styleElement) {
+				styleElement = document.createElement('style');
+				styleElement.id = 'custom-css-style';
+				styleElement.type = 'text/css';
+				document.head.appendChild(styleElement);
+			}
+			styleElement.innerHTML = '';
+			styleElement.appendChild(document.createTextNode(cssContent));
+		},
+
 		subscribeForAlarms() {
 			this.wsConnectionRetires = 5;
 			let stompClient = this.$store.state.webSocketModule.webSocket;

scadalts-ui/src/store/index.js

@@ -94,7 +94,7 @@ export default new Vuex.Store({
 			{ id: 2, label: i18n.t('common.alarmlevels.urgent') },
 			{ id: 3, label: i18n.t('common.alarmlevels.critical') },
 			{ id: 4, label: i18n.t('common.alarmlevels.lifesafety') },
-		],
+		]
 	},
 	mutations: {
 		updateWebSocketUrl(state) {
@@ -107,6 +107,10 @@ export default new Vuex.Store({
 		updateRequestTimeout(state, timeout) {
 			state.requestConfig.timeout = timeout > 1000 ? timeout : 1000;
 		},
+
+        setLoggedUser(state, loggedUser) {
+            state.loggedUser = loggedUser;
+        }
 	},
 	actions: {
 		getUserRole() {
@@ -131,7 +135,7 @@ export default new Vuex.Store({
 			axios.defaults.withCredentials = true;
 			let logged = false;
 			let res = await dispatch('requestPostNonApi', {
-			    url: `/login.htm` + `?username=` + userdata.username + `&password=` + userdata.password + `&submit=Login`,
+			    url: `login.htm` + `?username=` + userdata.username + `&password=` + userdata.password + `&submit=Login`,
 			    data: null
 			});
 			if(res != null && res != '') {
@@ -142,7 +146,7 @@ export default new Vuex.Store({
 		},
 
 		logoutUser({ state, dispatch }) {
-			dispatch('requestGetNonApi', `/logout.htm`)
+			dispatch('requestGetNonApi', `logout.htm`)
 			.then((resp) => {
                 state.loggedUser = null;
             });
@@ -154,11 +158,13 @@ export default new Vuex.Store({
 		 * @param {*} param0 - Vuex Store variables
 		 */
 		async getUserInfo({ state, dispatch, commit }) {
-			state.loggedUser = await dispatch('requestGet', '/auth/user');
-			commit('updateWebSocketUrl');
-			commit('INIT_WEBSOCKET_URL');
-			commit('INIT_WEBSOCKET');
-			return state.loggedUser;
+			return dispatch('requestGet', '/auth/user').then((r) => {
+			     commit('setLoggedUser', r);
+                 commit('updateWebSocketUrl');
+                 commit('INIT_WEBSOCKET_URL');
+                 commit('INIT_WEBSOCKET');
+                 return r;
+            });
 		},
 
 		/**
@@ -394,7 +400,7 @@ export default new Vuex.Store({
                             : reject(error.response);
                     });
             });
-        },
+        }
 	},
 	getters: {
 		appVersion: (state) => {
@@ -432,6 +438,9 @@ export default new Vuex.Store({
 		appPullRequestBranch: (state) => {
 			return state.scadaLtsPullRequestBranch;
 		},
+        loggedUser: (state) => {
+             return state.loggedUser;
+        }
 	},
 	plugins: [myLoggerForVuexMutation],
 });

scadalts-ui/src/store/systemSettings/index.js

@@ -23,6 +23,7 @@ const storeSystemSettings = {
 		schemaVersion: undefined,
 		scadaConfig: undefined,
 		defaultLoggingType: undefined,
+		customCss: undefined
 	},
 	mutations: {
 		setDatabaseType(state, databaseType) {
@@ -71,6 +72,9 @@ const storeSystemSettings = {
 		setDefaultLoggingType(state, defaultLoggingType) {
 			state.defaultLoggingType = defaultLoggingType;
 		},
+        setCustomCss(state, customCss) {
+            state.customCss = customCss;
+        }
 	},
 	actions: {
 		getDatabaseType({ commit, dispatch }) {
@@ -272,6 +276,13 @@ const storeSystemSettings = {
 			});
 		},
 
+        getCustomCss({ dispatch, commit }) {
+            return dispatch('requestGet', '/customcss/').then((r) => {
+                commit('setCustomCss', r);
+                return r;
+            });
+        },
+
 		purgeData(context) {
 			return new Promise((resolve, reject) => {
 				axios

scadalts-ui/src/views/System/SystemSettings/MiscSettingsComponent.vue

@@ -116,20 +116,6 @@
                           @change="watchDataChange()"
                       ></v-switch>
                     </v-col>
-                    <v-col cols="12">
-                      <v-text-field
-                          v-model="miscSettings.topDescriptionPrefix"
-                          :label="$t('systemsettings.top.description.prefix')"
-                          @change="watchDataChange()"
-                      ></v-text-field>
-                    </v-col>
-                    <v-col cols="12">
-                      <v-text-field
-                          v-model="miscSettings.topDescription"
-                          :label="$t('systemsettings.top.description')"
-                          @change="watchDataChange()"
-                      ></v-text-field>
-                    </v-col>
         </v-row>
 			</v-card-text>
 		</v-card>

scadalts-ui/src/views/System/SystemSettings/index.vue

@@ -181,6 +181,20 @@
 							></v-select>
 						</v-col>
 					</v-row>
+					<v-col cols="12">
+						<v-text-field
+							v-model="systemInfoSettings.topDescriptionPrefix"
+							:label="$t('systemsettings.top.description.prefix')"
+							@focusout="saveSystemInfoSettings()"
+						></v-text-field>
+					</v-col>
+					<v-col cols="12">
+						<v-text-field
+							v-model="systemInfoSettings.topDescription"
+							:label="$t('systemsettings.top.description')"
+							@focusout="saveSystemInfoSettings()"
+						></v-text-field>
+					</v-col>
 
 					<data-base-info-component></data-base-info-component>
 
@@ -328,11 +342,16 @@ export default {
 		if (!this.isUserRoleAdmin) {
 			this.getUserRole();
 		}
-		store.dispatch('getSystemInfoSettings');
+		this.fetchSystemInfoSettings();
 		this.loadClock();
 		this.scrollToComponent();
 	},
+
 	methods: {
+		async fetchSystemInfoSettings() {
+			await this.$store.dispatch('getSystemInfoSettings');
+		},
+
 		scrollToComponent() {
 			let element = window.location.href.split('#')[2];
 			if (!!element) {
@@ -354,7 +373,7 @@ export default {
 					i18n.locale = this.systemInfoSettings.language;
 					this.generateNotification(
 						'success',
-						i18n.t('systemsettings.notification.save.systeminfo'),
+						i18n.t('systemsettings.notification.save.systeminfo')
 					);
 				} else {
 					this.generateNotification('danger', i18n.t('systemsettings.notification.fail'));

scadalts-ui/tests/mocks/store/systemSettings/index.js

@@ -13,6 +13,8 @@ const storeSystemSettings = {
 			instanceDescription: 'Scada-LTS 2.3.3',
 			language: 'en',
 			newVersionNotificationLevel: '0',
+			topDescriptionPrefix: '',
+			topDescription: '',
 		},
 		emailSettings: {
 			auth: false,