Skip to content

Commit 8837c43

Browse files
r3-gabrielr3-gabriel
committed
Redesigned log level UI in admin panel
1 parent 98a9fbc commit 8837c43

File tree

5 files changed

+137
-71
lines changed

5 files changed

+137
-71
lines changed

‎www/comps/admin/admin.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -482,13 +482,13 @@
482482
display:flex;
483483
flex-flow:column nowrap;
484484
}
485-
.admin-logs-settings{
486-
margin:16px;
487-
}
488485
.admin-logs-table{
489486
flex:1 1 auto;
490487
overflow:auto;
491488
}
489+
.admin-log-options{
490+
width:800px;
491+
}
492492

493493

494494
/* roles */

‎www/comps/admin/adminLogOptions.js‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import {dialogCloseAsk} from '../shared/dialog.js';
2+
3+
export default {
4+
name:'my-admin-log-options',
5+
template:`<div class="app-sub-window under-header at-top with-margin" @mousedown.self="closeAsk">
6+
<div class="contentBox admin-log-options float">
7+
<div class="top">
8+
<div class="area nowrap">
9+
<img class="icon" src="images/fileText.png" />
10+
<h1 class="title">{{ capGen.options }}</h1>
11+
</div>
12+
<div class="area">
13+
<my-button image="cancel.png" @trigger="closeAsk" :cancel="true" />
14+
</div>
15+
</div>
16+
<div class="top lower">
17+
<div class="area">
18+
<my-button image="save.png"
19+
@trigger="set"
20+
:active="isChanged"
21+
:caption="capGen.button.save"
22+
/>
23+
<my-button image="refresh.png"
24+
@trigger="reset"
25+
:active="isChanged"
26+
:caption="capGen.button.refresh"
27+
/>
28+
</div>
29+
</div>
30+
31+
<div class="content no-padding default-inputs">
32+
<table class="generic-table-vertical fullWidth">
33+
<tbody>
34+
<tr>
35+
<td>{{ capApp.keepDays }}</td>
36+
<td><input v-model="configInput.logsKeepDays" /></td>
37+
</tr>
38+
<tr><td class="grouping" colspan="2">{{ capApp.logLevel }}</td></tr>
39+
<tr v-for="c in contextsValid">
40+
<td class="minimum">{{ capApp.contextLabel[c] }}*</td>
41+
<td>
42+
<div class="row gap centered">
43+
<input type="range" min="1" max="3" step="1" v-model="configInput[contextMapConfig[c]]" />
44+
<my-label
45+
:caption="capApp['logLevel'+configInput[contextMapConfig[c]]]"
46+
:image="configInput[contextMapConfig[c]] === '3' ? 'warning.png' : ''"
47+
/>
48+
</div>
49+
</td>
50+
</tr>
51+
</tbody>
52+
</table>
53+
</div>
54+
</div>
55+
</div>`,
56+
props:{
57+
contextsValid:{ type:Array, required:true }
58+
},
59+
emits:['close'],
60+
data() {
61+
return {
62+
configInput:{},
63+
};
64+
},
65+
computed:{
66+
contextMapConfig:s => {
67+
let out = {};
68+
for(const c of s.contextsValid) {
69+
out[c] = `log${c[0].toUpperCase() + c.slice(1)}`
70+
}
71+
return out;
72+
},
73+
74+
// simple
75+
isChanged:s => JSON.stringify(s.config) !== JSON.stringify(s.configInput),
76+
77+
// stores
78+
capApp:s => s.$store.getters.captions.admin.logs,
79+
capGen:s => s.$store.getters.captions.generic,
80+
config:s => s.$store.getters.config
81+
},
82+
mounted() {
83+
this.reset();
84+
85+
this.$store.commit('keyDownHandlerSleep');
86+
this.$store.commit('keyDownHandlerAdd',{fnc:this.set,key:'s',keyCtrl:true});
87+
this.$store.commit('keyDownHandlerAdd',{fnc:this.closeAsk,key:'Escape'});
88+
},
89+
unmounted() {
90+
this.$store.commit('keyDownHandlerDel',this.set);
91+
this.$store.commit('keyDownHandlerDel',this.closeAsk);
92+
this.$store.commit('keyDownHandlerWake');
93+
},
94+
methods:{
95+
// externals
96+
dialogCloseAsk,
97+
98+
// actions
99+
close() {
100+
this.$emit('close');
101+
},
102+
closeAsk() {
103+
this.dialogCloseAsk(this.close,this.isChanged);
104+
},
105+
106+
// calls
107+
reset() {
108+
this.configInput = JSON.parse(JSON.stringify(this.config));
109+
},
110+
set() {
111+
ws.send('config','set',this.configInput,true).then(() => {}, this.$root.genericError);
112+
}
113+
}
114+
};

‎www/comps/admin/adminLoginTemplate.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import {dialogCloseAsk} from '../shared/dialog.js';
22
import MyInputColorWrap from '../inputColorWrap.js';
3-
export {MyAdminLoginTemplate as default};
43

5-
let MyAdminLoginTemplate = {
4+
export default {
65
name:'my-admin-login-template',
76
components:{ MyInputColorWrap },
87
template:`<div class="app-sub-window under-header at-top with-margin" @mousedown.self="closeAsk">

‎www/comps/admin/adminLogs.js‎

Lines changed: 18 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
import MyInputDateWrap from '../inputDateWrap.js';
2-
import MyInputOffset from '../inputOffset.js';
3-
import {getUnixFormat} from '../shared/time.js';
4-
export {MyAdminLogs as default};
1+
import MyAdminLogOptions from './adminLogOptions.js';
2+
import MyInputDateWrap from '../inputDateWrap.js';
3+
import MyInputOffset from '../inputOffset.js';
4+
import {getUnixFormat} from '../shared/time.js';
55

6-
let MyAdminLogs = {
6+
export default {
77
name:'my-admin-logs',
8-
components:{MyInputDateWrap,MyInputOffset},
8+
components:{
9+
MyAdminLogOptions,
10+
MyInputDateWrap,
11+
MyInputOffset
12+
},
913
template:`<div class="contentBox admin-logs grow">
10-
1114
<div class="top">
1215
<div class="area">
1316
<img class="icon" src="images/fileText.png" />
@@ -60,7 +63,7 @@ let MyAdminLogs = {
6063
</select>
6164
<my-button
6265
@trigger="showOptions = !showOptions"
63-
:caption="capGen.settings"
66+
:caption="capGen.options"
6467
:image="showOptions ? 'visible1.png' : 'visible0.png'"
6568
/>
6669
</div>
@@ -69,49 +72,11 @@ let MyAdminLogs = {
6972
<div class="content admin-logs-content no-padding">
7073
7174
<!-- options -->
72-
<div v-if="showOptions" class="admin-logs-settings">
73-
<table class="default-inputs">
74-
<tbody>
75-
<tr>
76-
<td>{{ capApp.keepDays }}</td>
77-
<td colspan="2">
78-
<input class="short" v-model="configInput.logsKeepDays" />
79-
</td>
80-
<td>
81-
<my-button image="save.png"
82-
@trigger="setConfig"
83-
:active="config.logsKeepDays !== configInput.logsKeepDays"
84-
:caption="capGen.button.save"
85-
/>
86-
</td>
87-
</tr>
88-
<tr>
89-
<td>{{ capApp.logLevel }}</td>
90-
<td>
91-
<select v-model="levelContext">
92-
<option v-for="c in contextsValid" :value="getConfigLogContextName(c)">
93-
{{ capApp.contextLabel[c] }}
94-
</option>
95-
</select>
96-
</td>
97-
<td>
98-
<select v-model="configInput[levelContext]">
99-
<option value="1">{{ capApp.logLevel1 }}</option>
100-
<option value="2">{{ capApp.logLevel2 }}</option>
101-
<option value="3">{{ capApp.logLevel3 }}</option>
102-
</select>
103-
</td>
104-
<td>
105-
<my-button image="save.png"
106-
@trigger="setConfig"
107-
:active="config[levelContext] !== configInput[levelContext]"
108-
:caption="capGen.button.save"
109-
/>
110-
</td>
111-
</tr>
112-
</tbody>
113-
</table>
114-
</div>
75+
<my-admin-log-options
76+
v-if="showOptions"
77+
@close="showOptions = false"
78+
:contextsValid
79+
/>
11580
11681
<!-- logs -->
11782
<div class="admin-logs-table">
@@ -171,7 +136,6 @@ let MyAdminLogs = {
171136

172137
// inputs
173138
byString:'',
174-
configInput:{},
175139
context:'',
176140
levelContext:'logModule',
177141
limit:100,
@@ -189,7 +153,6 @@ let MyAdminLogs = {
189153
},
190154
mounted() {
191155
this.$store.commit('pageTitle',this.menuTitle);
192-
this.configInput = JSON.parse(JSON.stringify(this.config));
193156

194157
// set date range for log retrieval (7 days ago to now)
195158
let d = new Date();
@@ -201,16 +164,13 @@ let MyAdminLogs = {
201164
// stores
202165
settings:(s) => s.$store.getters.settings,
203166
capApp: (s) => s.$store.getters.captions.admin.logs,
204-
capGen: (s) => s.$store.getters.captions.generic,
205-
config: (s) => s.$store.getters.config
167+
capGen: (s) => s.$store.getters.captions.generic
206168
},
207169
methods:{
208170
// externals
209171
getUnixFormat,
210172

211-
getConfigLogContextName(context) {
212-
return `log${context[0].toUpperCase() + context.slice(1)}`;
213-
},
173+
// presentation
214174
displayDate(date) {
215175
let format = [this.settings.dateFormat,'H:i:S'];
216176
return this.getUnixFormat(date,format.join(' '));
@@ -269,12 +229,6 @@ let MyAdminLogs = {
269229
},
270230
this.$root.genericError
271231
);
272-
},
273-
setConfig() {
274-
ws.send('config','set',this.configInput,true).then(
275-
() => {},
276-
this.$root.genericError
277-
);
278232
}
279233
}
280234
};

‎www/comps/admin/adminOauthClient.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ import MyAdminLoginRolesAssign from './adminLoginRolesAssign.js';
33
import MyInputDateWrap from '../inputDateWrap.js';
44
import {deepIsEqual} from '../shared/generic.js';
55
import {getUnixNowDate} from '../shared/time.js';
6-
export {MyAdminOauthClient as default};
76

8-
let MyAdminOauthClient = {
7+
export default {
98
name:'my-admin-oauth-client',
109
components:{
1110
MyAdminLoginMeta,

0 commit comments

Comments
 (0)