Skip to content

Commit

Permalink
Implement timezone feature on schedule/session page similar with Talk…
Browse files Browse the repository at this point in the history 
… systems (#243)

* use the same ico with eventyay-talk

* update base path for webapp using basePath from config file

* implement timezone on schedule/session page

* add key for v-for

---------

Co-authored-by: odkhang <[email protected]>
  • Loading branch information
@lcduong @odkhang
lcduong and odkhang authored Oct 11, 2024
1 parent df8105f commit 65b548c
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 44 deletions.
31 changes: 27 additions & 4 deletions webapp/src/views/schedule/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
.c-schedule
template(v-if="schedule")
div.filter-actions
app-dropdown(v-for="item in filter", className="schedule")
app-dropdown(v-for="item in filter", :key="item.refKey", className="schedule")
template(slot="toggler")
span {{item.title}}
app-dropdown-content(className="schedule")
Expand All @@ -15,6 +15,12 @@
:class="onlyFavs ? ['active'] : []") {{favs.length}}

bunt-button.bunt-ripple-ink(@click="resetAllFiltered", icon="filter-off")

template(v-if="!inEventTimezone")
bunt-select.timezone-item(name="timezone", :options="[{id: schedule.timezone, label: schedule.timezone}, {id: userTimezone, label: userTimezone}]", v-model="currentTimezone", @blur="saveTimezone")
template(v-else)
div.timezone-label.timezone-item.bunt-tab-header-item {{ schedule.timezone }}

.export.dropdown
bunt-progress-circular.export-spinner(v-if="isExporting", size="small")
custom-dropdown(name="calendar-add1"
Expand All @@ -24,7 +30,7 @@
@input="makeExport")

bunt-tabs.days(v-if="days && days.length > 1", :active-tab="currentDay.toISOString()", ref="tabs", v-scrollbar.x="")
bunt-tab(v-for="day in days", :id="day.toISOString()", :header="moment(day).format('dddd DD. MMMM')", @selected="changeDay(day)")
bunt-tab(v-for="day in days", :key="day.toISOString()", :id="day.toISOString()", :header="moment(day).format('dddd DD. MMMM')", @selected="changeDay(day)")
.scroll-parent(ref="scrollParent", v-scrollbar.x.y="")
grid-schedule(v-if="$mq.above['m']",
:sessions="sessions",
Expand Down Expand Up @@ -135,7 +141,9 @@ export default {
isExporting: false,
error: null,
defaultFilter: defaultFilter,
onlyFavs: false
onlyFavs: false,
userTimezone: null,
currentTimezone: null,
}
},
computed: {
Expand Down Expand Up @@ -195,7 +203,12 @@ export default {
filter.tracks.data = this.filterItemsByLanguage(this?.schedule?.tracks)
return filter
}
},
inEventTimezone() {
if (!this.schedule?.talks?.length) return false
const example = this.schedule.talks[0].start
return moment.tz(example, this.userTimezone).format('Z') === moment.tz(example, this.schedule.timezone).format('Z')
},
},
watch: {
tracksFilter: {
Expand All @@ -207,6 +220,10 @@ export default {
deep: true
}
},
async created() {
this.userTimezone = moment.tz.guess()
this.currentTimezone = localStorage.getItem('userTimezone')
},
methods: {
changeDay(day) {
if (day.isSame(this.currentDay)) return
Expand Down Expand Up @@ -284,6 +301,9 @@ export default {
resetOnlyFavs() {
this.onlyFavs = false
},
saveTimezone() {
localStorage.setItem('userTimezone', this.currentTimezone)
},
}
}
</script>
Expand Down Expand Up @@ -372,4 +392,7 @@ export default {
.export-spinner
padding-top: 22px !important
margin-right: 10px
.bunt-select
.bunt-input
height: auto !important
</style>
103 changes: 63 additions & 40 deletions webapp/src/views/schedule/sessions/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,51 @@
<template lang="pug">
.c-schedule
template(v-if="schedule")
div.filter-actions
app-dropdown(v-for="item in filter", className="schedule")
template(slot="toggler")
span {{item.title}}
app-dropdown-content(className="schedule")
app-dropdown-item(v-for="track in item.data", :key="track.value")
.checkbox-line(:style="{'--track-color': track.color}")
bunt-checkbox.checkbox-text(type="checkbox", :label="track.label", name="track_room_views", v-model="track.selected", :value="track.value") {{ getTrackName(track) }}
bunt-button.bunt-ripple-ink(v-if="favs",
icon="star"
@click="onlyFavs = !onlyFavs; if (onlyFavs) resetFiltered()"
:class="onlyFavs ? ['active'] : []") {{favs.length}}
template(v-if="schedule")
div.filter-actions
app-dropdown(v-for="item in filter", :key="item.refKey", className="schedule")
template(slot="toggler")
span {{item.title}}
app-dropdown-content(className="schedule")
app-dropdown-item(v-for="track in item.data", :key="track.value")
.checkbox-line(:style="{'--track-color': track.color}")
bunt-checkbox.checkbox-text(type="checkbox", :label="track.label", name="track_room_views", v-model="track.selected", :value="track.value") {{ getTrackName(track) }}
bunt-button.bunt-ripple-ink(v-if="favs",
icon="star"
@click="onlyFavs = !onlyFavs; if (onlyFavs) resetFiltered()"
:class="onlyFavs ? ['active'] : []") {{favs.length}}

bunt-button.bunt-ripple-ink(@click="resetAllFiltered", icon="filter-off")
.export.dropdown
bunt-progress-circular.export-spinner(v-if="isExporting", size="small")
custom-dropdown(name="calendar-add1"
v-model="selectedExporter"
:options="exportType"
label="Add to Calendar"
@input="makeExport")
bunt-button.bunt-ripple-ink(@click="resetAllFiltered", icon="filter-off")

bunt-tabs.days(v-if="days && days.length > 1", :active-tab="currentDay.toISOString()", ref="tabs", v-scrollbar.x="")
bunt-tab(v-for="day in days", :id="day.toISOString()", :header="moment(day).format('dddd DD. MMMM')", @selected="changeDay(day)")
.scroll-parent(ref="scrollParent", v-scrollbar.x.y="")
linear-schedule(:sessions="sessions",
:rooms="rooms",
:currentDay="currentDay",
:now="now",
:scrollParent="$refs.scrollParent",
:favs="favs",
@changeDay="changeDayByScroll",
@fav="$store.dispatch('schedule/fav', $event)",
@unfav="$store.dispatch('schedule/unfav', $event)"
)
.error(v-else-if="errorLoading")
.mdi.mdi-alert-octagon
h1 {{ $t('schedule/index:scheduleLoadingError') }}
bunt-progress-circular(v-else, size="huge", :page="true")
template(v-if="!inEventTimezone")
bunt-select.timezone-item(name="timezone", :options="[{id: schedule.timezone, label: schedule.timezone}, {id: userTimezone, label: userTimezone}]", v-model="currentTimezone", @blur="saveTimezone")
template(v-else)
div.timezone-label.timezone-item.bunt-tab-header-item {{ schedule.timezone }}

.export.dropdown
bunt-progress-circular.export-spinner(v-if="isExporting", size="small")
custom-dropdown(name="calendar-add1"
v-model="selectedExporter"
:options="exportType"
label="Add to Calendar"
@input="makeExport")

bunt-tabs.days(v-if="days && days.length > 1", :active-tab="currentDay.toISOString()", ref="tabs", v-scrollbar.x="")
bunt-tab(v-for="day in days", :key="day.toISOString()", :id="day.toISOString()", :header="moment(day).format('dddd DD. MMMM')", @selected="changeDay(day)")
.scroll-parent(ref="scrollParent", v-scrollbar.x.y="")
linear-schedule(:sessions="sessions",
:rooms="rooms",
:currentDay="currentDay",
:now="now",
:scrollParent="$refs.scrollParent",
:favs="favs",
@changeDay="changeDayByScroll",
@fav="$store.dispatch('schedule/fav', $event)",
@unfav="$store.dispatch('schedule/unfav', $event)"
)
.error(v-else-if="errorLoading")
.mdi.mdi-alert-octagon
h1 {{ $t('schedule/index:scheduleLoadingError') }}
bunt-progress-circular(v-else, size="huge", :page="true")
</template>
<script>
import _ from 'lodash'
Expand Down Expand Up @@ -123,7 +129,9 @@ export default {
isExporting: false,
error: null,
defaultFilter: defaultFilter,
onlyFavs: false
onlyFavs: false,
userTimezone: null,
currentTimezone: null,
}
},
computed: {
Expand Down Expand Up @@ -182,7 +190,16 @@ export default {
filter.rooms.data = this.filterItemsByLanguage(this?.schedule?.rooms)
filter.tracks.data = this.filterItemsByLanguage(this?.schedule?.tracks)
return filter
}
},
inEventTimezone () {

Check failure on line 194 in webapp/src/views/schedule/sessions/index.vue

View workflow job for this annotation

GitHub Actions / build 

Unexpected space before function parentheses
if (!this.schedule?.talks?.length) return false
const example = this.schedule.talks[0].start
return moment.tz(example, this.userTimezone).format('Z') === moment.tz(example, this.schedule.timezone).format('Z')
},
},
async created () {

Check failure on line 200 in webapp/src/views/schedule/sessions/index.vue

View workflow job for this annotation

GitHub Actions / build 

Unexpected space before function parentheses
this.userTimezone = moment.tz.guess()
this.currentTimezone = localStorage.getItem(`userTimezone`)

Check failure on line 202 in webapp/src/views/schedule/sessions/index.vue

View workflow job for this annotation

GitHub Actions / build 

Strings must use singlequote
},
watch: {

Check warning on line 204 in webapp/src/views/schedule/sessions/index.vue

View workflow job for this annotation

GitHub Actions / build 

The "watch" property should be above the "created" property on line 200
tracksFilter: {
Expand Down Expand Up @@ -271,6 +288,9 @@ export default {
resetOnlyFavs() {
this.onlyFavs = false
},
saveTimezone () {

Check failure on line 291 in webapp/src/views/schedule/sessions/index.vue

View workflow job for this annotation

GitHub Actions / build 

Unexpected space before function parentheses
localStorage.setItem(`userTimezone`, this.currentTimezone)

Check failure on line 292 in webapp/src/views/schedule/sessions/index.vue

View workflow job for this annotation

GitHub Actions / build 

Strings must use singlequote
},
}
}
</script>
Expand Down Expand Up @@ -357,4 +377,7 @@ export default {
.export-spinner
padding-top: 22px !important
margin-right: 10px
.bunt-select
.bunt-input
height: auto !important
</style>

0 comments on commit 65b548c

Please sign in to comment.