0
0
Fork 1
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:
Angus McLeod 2020-05-15 12:06:21 +10:00
Ursprung b9ad37c38f
Commit b196acf151
3 geänderte Dateien mit 25 neuen und 106 gelöschten Zeilen

Datei anzeigen

@ -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);
}
}
});

Datei anzeigen

@ -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>

Datei anzeigen

@ -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;
}
}