Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
refactor: Split Settings into multiple views
  • Loading branch information
johan-bjareholt committed Jul 16, 2020
1 parent ebfedf7 commit ed37580
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 68 deletions.
32 changes: 16 additions & 16 deletions src/components/CategoryEditTree.vue
@@ -1,23 +1,23 @@
<template lang="pug">
div
div.row.py-2.cls
div.row.py-2.class
div.col-8.col-md-4
span(:style="{ marginLeft: (2 * depth) + 'em'}")
//| {{ cls.name.join(" ➤ ")}}
| #[span(v-if="depth > 0")] {{ cls.name.slice(depth).join(" ➤ ")}}
//| {{ _class.name.join(" ➤ ")}}
| #[span(v-if="depth > 0")] {{ _class.name.slice(depth).join(" ➤ ")}}
div.col-4.col-md-8
//span.d-none.d-sm-inline.d-md-none(:style="{ marginLeft: (2 * depth) + 'em'}")
span.d-none.d-md-inline
span(v-if="cls.rule.type === 'regex'") Rule ({{cls.rule.type}}): #[code {{cls.rule.regex}}]
span(v-if="_class.rule.type === 'regex'") Rule ({{_class.rule.type}}): #[code {{_class.rule.regex}}]
span(v-else, style="color: #888") No rule
span.float-right
b-btn.ml-1(size="sm", variant="outline-secondary", @click="showEditModal()" style="border: 0;" pill)
icon(name="edit")
b-btn.ml-1(size="sm", variant="outline-success", @click="addSubclass(cls)" style="border: 0;" pill)
b-btn.ml-1(size="sm", variant="outline-success", @click="addSubclass(_class)" style="border: 0;" pill)
icon(name="plus")
div
div.pa-2(v-for="child in cls.children", style="background: rgba(0, 0, 0, 0);", v-show="expanded")
CategoryEditTree(:cls="child", :depth="depth+1")
div.pa-2(v-for="child in _class.children", style="background: rgba(0, 0, 0, 0);", v-show="expanded")
CategoryEditTree(:_class="child", :depth="depth+1")

b-modal(id="edit" ref="edit" title="Edit category" @show="resetModal" @hidden="resetModal" @ok="handleOk")
div.my-1
Expand All @@ -41,7 +41,7 @@ div
hr

div.my-1
b-btn(variant="danger", @click="removeClass(cls); $refs.edit.hide()")
b-btn(variant="danger", @click="removeClass(_class); $refs.edit.hide()")
icon(name="trash")
| Remove category
</template>
Expand All @@ -57,7 +57,7 @@ import 'vue-awesome/icons/edit';
export default {
name: 'CategoryEditTree',
props: {
cls: Object,
_class: Object,
depth: {
type: Number,
default: 0,
Expand Down Expand Up @@ -97,11 +97,11 @@ export default {
rule: { type: 'regex', regex: 'FILL ME' },
});
},
removeClass: function(cls) {
removeClass: function(_class) {
// TODO: Show a confirmation dialog
// TODO: Remove children as well?
// TODO: Move button to edit modal?
this.$store.commit('settings/removeClass', cls);
this.$store.commit('settings/removeClass', _class);
},
showEditModal() {
this.$refs.edit.show();
Expand Down Expand Up @@ -137,10 +137,10 @@ export default {
},
resetModal() {
this.editing = {
id: this.cls.id,
name: this.cls.subname,
rule: _.cloneDeep(this.cls.rule),
parent: this.cls.parent ? this.cls.parent : [],
id: this._class.id,
name: this._class.subname,
rule: _.cloneDeep(this._class.rule),
parent: this._class.parent ? this._class.parent : [],
};
//console.log(this.editing);
},
Expand All @@ -149,7 +149,7 @@ export default {
</script>
<style scoped lang="scss">
.row.cls:hover {
.row.class:hover {
background-color: #eee;
boder-radius: 5px;
}
Expand Down
2 changes: 1 addition & 1 deletion src/route.js
Expand Up @@ -15,7 +15,7 @@ const Bucket = () => import('./views/Bucket.vue');
const QueryExplorer = () => import('./views/QueryExplorer.vue');
const Timeline = () => import('./views/Timeline.vue');
const Log = () => import('./views/Log.vue');
const Settings = () => import('./views/Settings.vue');
const Settings = () => import('./views/settings/Settings.vue');
const Stopwatch = () => import('./views/Stopwatch.vue');
const Dev = () => import('./views/Dev.vue');

Expand Down
@@ -1,38 +1,5 @@
<template lang="pug">
div
h3 Settings

b-alert(variant="warning", show) #[b Note:] These settings are only saved in your browser and will not remain if you switch browser. We are working on getting this fixed.

hr

div.row
div.col-sm-9
h5.mb-0 Start of day
small
| The time at which days "start", since humans don't always go to bed before midnight. Set to 04:00 by default.
div.col-sm-3
input.form-control(type="time" :value="startOfDay" @change="setStartOfDay($event.target.value)")

hr

div.row
div.col-sm-9
h5.mb-0 Duration default value
small
| The default duration used for 'show last' in the timeline view
div.col-sm-3
select(id="durationDefaultValue" :value="durationDefaultValue", @change="setDurationDefault($event.target.value)")
option(:value="15*60") 15min
option(:value="30*60") 30min
option(:value="60*60") 1h
option(:value="2*60*60") 2h
option(:value="4*60*60") 4h
option(:value="6*60*60") 6h
option(:value="12*60*60") 12h
option(:value="24*60*60") 24h
hr

h5.d-inline-block
div Categorization
div.float-right
Expand All @@ -49,8 +16,8 @@ div
| Save
b-btn.ml-2(@click="resetClasses", variant="warning" size="sm")
| Discard
div(v-for="cls in classes_hierarchy")
CategoryEditTree(:cls="cls")
div(v-for="_class in classes_hierarchy")
CategoryEditTree(:_class="_class")

div.row
div.col-sm-12
Expand All @@ -60,34 +27,23 @@ div
b-btn.float-right(@click="saveClasses", variant="success" :disabled="!classes_unsaved_changes")
| Save
</template>

<script>
import CategoryEditTree from '~/components/CategoryEditTree.vue';
import { mapState, mapGetters } from 'vuex';
import CategoryEditTree from '~/components/CategoryEditTree.vue';
export default {
name: 'Settings',
name: 'CategorizationSettings',
components: {
CategoryEditTree,
},
data: () => {
return {
startOfDay: '',
durationDefaultValue: localStorage.durationDefault || 60 * 60,
};
},
computed: {
...mapGetters('settings', ['classes_hierarchy']),
...mapState('settings', ['classes_unsaved_changes']),
},
mounted() {
this.startOfDay = localStorage.startOfDay;
this.$store.dispatch('settings/load');
},
methods: {
setStartOfDay: function(time_minutes) {
localStorage.startOfDay = time_minutes;
},
addClass: function() {
this.$store.commit('settings/addClass', {
name: ['New class'],
Expand All @@ -103,9 +59,6 @@ export default {
restoreDefaultClasses: async function() {
await this.$store.commit('settings/restoreDefaultClasses');
},
setDurationDefault: function(duration) {
localStorage.durationDefault = duration;
},
},
};
</script>
28 changes: 28 additions & 0 deletions src/views/settings/DaystartSettings.vue
@@ -0,0 +1,28 @@
<template lang="pug">
div.row
div.col-sm-9
h5.mb-0 Start of day
small
| The time at which days "start", since humans don't always go to bed before midnight. Set to 04:00 by default.
div.col-sm-3
input.form-control(type="time" :value="startOfDay" @change="setStartOfDay($event.target.value)")
</template>
<script>
export default {
name: 'DaystartSettings',
data: () => {
return {
startOfDay: '',
};
},
mounted() {
this.startOfDay = localStorage.startOfDay;
},
methods: {
setStartOfDay: function(time_minutes) {
localStorage.startOfDay = time_minutes;
console.log('Set start of day to ' + time_minutes);
},
},
};
</script>
34 changes: 34 additions & 0 deletions src/views/settings/Settings.vue
@@ -0,0 +1,34 @@
<template lang="pug">
div
h3 Settings

b-alert(variant="warning", show) #[b Note:] These settings are only saved in your browser and will not remain if you switch browser. We are working on getting this fixed.

hr

DaystartSettings

hr

TimelineDurationSettings

hr

CategorizationSettings

</template>

<script>
import DaystartSettings from '~/views/settings/DaystartSettings.vue';
import TimelineDurationSettings from '~/views/settings/TimelineDurationSettings.vue';
import CategorizationSettings from '~/views/settings/CategorizationSettings.vue';
export default {
name: 'Settings',
components: {
DaystartSettings,
TimelineDurationSettings,
CategorizationSettings,
},
};
</script>
36 changes: 36 additions & 0 deletions src/views/settings/TimelineDurationSettings.vue
@@ -0,0 +1,36 @@
<template lang="pug">
div.row
div.col-sm-9
h5.mb-0 Duration default value
small
| The default duration used for 'show last' in the timeline view
div.col-sm-3
select(id="durationDefaultValue" :value="durationDefaultValue", @change="setDurationDefault($event.target.value)")
option(:value="15*60") 15min
option(:value="30*60") 30min
option(:value="60*60") 1h
option(:value="2*60*60") 2h
option(:value="4*60*60") 4h
option(:value="6*60*60") 6h
option(:value="12*60*60") 12h
option(:value="24*60*60") 24h
</template>
<script>
export default {
name: 'TimelineDurationSettings',
data: () => {
return {
durationDefaultValue: localStorage.durationDefault || 60 * 60,
};
},
mounted() {
this.startOfDay = localStorage.startOfDay;
},
methods: {
setDurationDefault: function(duration) {
localStorage.durationDefault = duration;
console.log('Set default timeline duration to ' + duration);
},
},
};
</script>

0 comments on commit ed37580

Please sign in to comment.