Spiegel von
https://github.com/paviliondev/discourse-custom-wizard.git
synchronisiert 2024-11-10 04:12:53 +01:00
Update after-time modal to use new date time inputs
Dieser Commit ist enthalten in:
Ursprung
b9ad37c38f
Commit
b196acf151
3 geänderte Dateien mit 25 neuen und 106 gelöschten Zeilen
|
@ -1,58 +1,27 @@
|
|||
import { default as discourseComputed } from 'discourse-common/utils/decorators';
|
||||
import { scheduleOnce } from "@ember/runloop";
|
||||
import Controller from "@ember/controller";
|
||||
|
||||
export default Controller.extend({
|
||||
title: 'admin.wizard.after_time_modal.title',
|
||||
|
||||
setup() {
|
||||
const dateTime = this.get('model.dateTime');
|
||||
const ROUNDING = 30 * 60 * 1000;
|
||||
const nextInterval = moment(Math.ceil((+moment()) / ROUNDING) * ROUNDING);
|
||||
const mDateTime = dateTime ? moment(dateTime) : nextInterval;
|
||||
const mDateTimeLocal = mDateTime.local();
|
||||
const date = mDateTimeLocal.format('YYYY-MM-DD');
|
||||
const time = mDateTimeLocal.format('HH:mm');
|
||||
|
||||
this.setProperties({ date, time });
|
||||
|
||||
scheduleOnce('afterRender', this, () => {
|
||||
const $timePicker = $("#time-picker");
|
||||
$timePicker.timepicker({ timeFormat: 'H:i' });
|
||||
$timePicker.timepicker('setTime', time);
|
||||
$timePicker.change(() => this.set('time', $timePicker.val()));
|
||||
});
|
||||
this.set('bufferedDateTime', moment(this.model.dateTime));
|
||||
},
|
||||
|
||||
@discourseComputed('date', 'time')
|
||||
dateTime: function(date, time) {
|
||||
return moment(date + 'T' + time).format();
|
||||
},
|
||||
|
||||
@discourseComputed('dateTime')
|
||||
@discourseComputed('bufferedDateTime')
|
||||
submitDisabled(dateTime) {
|
||||
return moment().isAfter(dateTime);
|
||||
},
|
||||
|
||||
resetProperties() {
|
||||
this.setProperties({
|
||||
date: null,
|
||||
time: null
|
||||
});
|
||||
},
|
||||
|
||||
actions: {
|
||||
clear() {
|
||||
this.resetProperties();
|
||||
this.get('model.update')(null);
|
||||
},
|
||||
|
||||
submit() {
|
||||
const dateTime = this.get('dateTime');
|
||||
const formatted = moment(dateTime).utc().toISOString();
|
||||
this.get('model.update')(formatted);
|
||||
this.resetProperties();
|
||||
const dateTime = this.get('bufferedDateTime');
|
||||
this.get('model.update')(moment(dateTime).utc().toISOString());
|
||||
this.send("closeModal");
|
||||
},
|
||||
|
||||
dateTimeChanged(dateTime) {
|
||||
this.set('bufferedDateTime', dateTime);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,24 +1,16 @@
|
|||
{{#d-modal-body class="next-session-time-modal" title=title}}
|
||||
<div class="date-time-card">
|
||||
<div class="modal-date-time-set">
|
||||
<div class="modal-date-area">
|
||||
<label class="input-group-label">
|
||||
{{i18n "admin.wizard.after_time_modal.date"}}
|
||||
</label>
|
||||
{{date-picker value=date containerId="date-container"}}
|
||||
</div>
|
||||
<div class="modal-time-area">
|
||||
<label class="input-group-label">
|
||||
{{i18n "admin.wizard.after_time_modal.time"}}
|
||||
</label>
|
||||
<input type="text" id="time-picker"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="date-container"/>
|
||||
</div>
|
||||
{{date-time-input
|
||||
date=bufferedDateTime
|
||||
onChange=(action "dateTimeChanged")
|
||||
showTime=true
|
||||
clearable=true
|
||||
}}
|
||||
{{/d-modal-body}}
|
||||
|
||||
<div class="modal-footer">
|
||||
{{d-button action="submit" class="btn-primary" label="admin.wizard.after_time_modal.done" disabled=submitDisabled}}
|
||||
<a class="clear" {{action 'clear'}}>{{i18n 'admin.wizard.after_time_modal.clear'}}</a>
|
||||
{{d-button
|
||||
action="submit"
|
||||
class="btn-primary"
|
||||
label="admin.wizard.after_time_modal.done"
|
||||
disabled=submitDisabled}}
|
||||
</div>
|
||||
|
|
|
@ -481,54 +481,12 @@
|
|||
min-height: 150px;
|
||||
}
|
||||
|
||||
.next-session-time-modal {
|
||||
text-align: center;
|
||||
|
||||
.date-time-card {
|
||||
width: 270px;
|
||||
padding: 10px 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.modal-date-time-set{
|
||||
padding-top: 3px;
|
||||
padding-bottom: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.modal-date-area{
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.modal-time-area{
|
||||
order: 2;
|
||||
margin-left: 10px;
|
||||
|
||||
.modal-time{
|
||||
width: 127px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-timepicker-input {
|
||||
width: 119px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.date-picker{
|
||||
width: 121px;
|
||||
}
|
||||
|
||||
.pika-single {
|
||||
position: relative !important;
|
||||
|
||||
.pika-lendar {
|
||||
border: 1px solid #eee;
|
||||
padding: 14px;
|
||||
margin: 0;
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
.modal .modal-body.next-session-time-modal {
|
||||
overflow: visible;
|
||||
|
||||
.picker-container {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Laden …
In neuem Issue referenzieren