let mediator = _.extend({}, Backbone.Events);
namespace EVENT {
SUBMIT: 'submit'
};
class TimeModel extends Backbone.Model {
inputTime: string; // 入力された時間
inputTimeDiff: number; // 入力された時間の時差
inputTimeMoment: Moment; // inputTimeとinputTimeDiffから生成したMoment←CodePenだと型定義はこれで大丈夫なん？？
outputTime: number; // 出力する時間（ミリ秒）
outputTimeDiff: number; // 出力する時間の時差
outputTimeMoment: Moment; // outputTimeとoutputTimeDiffから生成したMoment←CodePenだと型定義はこれで大丈夫なん？？
outputTimeFormat: string|null; // 出力する時間のフォーマット
isValid: boolean; // 入力された時間が日時のフォーマットになっているか
initialize (attributes?: any, options?: any) {
_.bindAll(this,
"updateTime"
);
this.listenTo(this, "change:inputTime", this.updateTime);
this.listenTo(this, "change:inputTimeDiff", this.updateTime);
this.listenTo(this, "change:outputTimeDiff", this.updateTime);
this.updateTime();
// // TEST
// this.listenTo(this, 'change', function () {
// console.log(this.get('inputTime'), this.get('inputTimeDiff'), this.get('outputTimeMoment').format('YYYY/MM/DD HH:mm:ss'), this.get('outputTime'), this.get('outputTimeDiff'));
// });
}
defaults() {
return {
inputTime: 0,
isValidDate: true
}
}
updateTime(): void {
const inputTime = this.get('inputTime');
const inputTimeDiff = this.get('inputTimeDiff');
var format = ''; // 時刻フォーマット
if (inputTime.match(/^(\d{10}|\d{10}\.\d{3})$/)) {
// unix timestamp
format = 'X';
}
else if (inputTime.match(/^\d{13}$/)) {
// unix ms timestamp
format = 'x';
}
// unix timestampの場合utcOffsetが効かない？
const inputTimeMoment = moment(inputTime, format).utcOffset(inputTimeDiff, 'hours');
const outputTimeDiff = this.get('outputTimeDiff');
const outputTimeMoment = inputTimeMoment.utcOffset(outputTimeDiff * 60);
this.set({
outputTime: parseInt(outputTimeMoment.format('x')),
outputTimeMoment,
isValid: outputTimeMoment.isValid()
});
}
}
/**
* 入力フォーム
*
*/
class InputFormController extends Backbone.View<TimeModel> {
initialize (options?: Backbone.ViewOptions<TimeModel>) {
_.bindAll(this,
'onSubmit'
);
}
events(): Backbone.EventsHash {
return {
"submit form": this.onSubmit
}
}
onSubmit (e: Event): void {
e.preventDefault();
mediator.trigger(EVENT.SUBMIT);
}
}
class InputFieldView extends Backbone.View<TimeModel> {
initialize (options?: Backbone.ViewOptions<TimeModel>) {
_.bindAll(this,
'onChangeValid'
);
this.listenTo(this.model, 'change:isValid', this.onChangeValid);
}
onChangeValid (): void {
if (this.model.get('isValid') === true) {
this.$el.removeClass('has-error');
}
else {
this.$el.addClass('has-error');
}
}
}
/**
* 時間入力フォーム
*
*/
class InputTimeController extends Backbone.View<TimeModel> {
initialize (options?: Backbone.ViewOptions<TimeModel>) {
_.bindAll(this,
'onChange'
);
this.listenTo(mediator, EVENT.SUBMIT, this.onChange); // 送信された
}
events(): Backbone.EventsHash {
return {
"change": this.onChange
}
}
onChange (): void {
this.model.set({
inputTime: this.$el.val()
});
}
}
/**
* 時間入力フォーム
*
*/
class InputTimeView extends Backbone.View<TimeModel> {
initialize (options?: Backbone.ViewOptions<TimeModel>) {
_.bindAll(this,
'onUpdate'
);
this.listenTo(this.model, 'change:inputTime', this.onUpdate);
}
onUpdate (): void {
const inputTime = this.model.get('inputTime');
// 入力値とmodelの値に差があった場合、modelの値に合わせる
if (inputTime !== this.$el.val()) {
this.$el.val(inputTime);
}
}
}
class TimeNowController extends Backbone.View<TimeModel> {
initialize (options?: Backbone.ViewOptions<TimeModel>) {
_.bindAll(this,
'onClick'
);
}
events(): Backbone.EventsHash {
return {
"click": this.onClick
}
}
onClick (e): void {
e.preventDefault();
const now = getNow();
this.model.set({
inputTime: now.time,
inputTimeDiff: now.diff
});
}
}
/**
* 時差の選択
*
*/
class TimeDiffController extends Backbone.View<TimeModel> {
target: string; // 'input' or 'output'
initialize (options?: Backbone.ViewOptions<TimeModel>) {
this.target = options.target;
_.bindAll(this,
'onChange'
);
if (this.target === 'input') {
this.listenTo(mediator, EVENT.SUBMIT, this.onChange); // 送信された
}
}
events(): Backbone.EventsHash {
return {
"change": this.onChange
}
}
onChange (): void {
const value = parseFloat(this.$el.val());
if (this.target === 'input') {
this.model.set({
inputTimeDiff: value
});
}
else if (this.target === 'output') {
this.model.set({
outputTimeDiff: value
});
}
}
}
/**
* 時差の選択
*
*/
class TimeDiffView extends Backbone.View<TimeModel> {
target: string; // 'input' or 'output'
param: string; // 対象のmodelの値
initialize (options?: Backbone.ViewOptions<TimeModel>) {
this.target = options.target;
_.bindAll(this,
'onUpdate'
);
let param: string; // listenToする変数名
if (this.target === 'input') {
param = 'inputTimeDiff';
}
else {
param = 'outputTimeDiff';
}
this.param = param;
this.listenTo(this.model, `change:${this.param}`, this.onUpdate);
}
onUpdate (): void {
const value = this.model.get(this.param);
// 入力値とmodelの値に差があった場合、modelの値に合わせる
if (parseFloat(this.$el.val()) !== value) {
this.$el.val(value);
}
}
}
class OutputTimeView extends Backbone.View<TimeModel> {
initialize (options?: Backbone.ViewOptions<TimeModel>) {
_.bindAll(this,
'render'
);
this.listenTo(this.model, 'change:outputTime', this.render);
this.listenTo(this.model, 'change:outputTimeDiff', this.render);
this.listenTo(this.model, 'change:outputTimeFormat', this.render);
this.render();
}
render(): void {
const time = this.model.get('outputTimeMoment')
const format = this.model.get('outputTimeFormat');
this.$el.html(time.format(format));
}
}
/**
* 出力時間の形式
*
*/
class TimeFormatView extends Backbone.View<TimeModel> {
initialize (options?: Backbone.ViewOptions<TimeModel>) {
_.bindAll(this,
'onChange'
);
}
events(): Backbone.EventsHash {
return {
"change": this.onChange
}
}
onChange (): void {
this.model.set({
outputTimeFormat: this.$el.val()
});
}
}
/**
* 現在時間と時差を取得
*
* @return .time 現在時間
* @return .diff 時差
*/
function getNow(): string[] {
const now = new Date();
const currentTimeZoneOffsetInHours = now.getTimezoneOffset() / -60; // 現在時間の時差
return {
time: now.toString().replace(/\sGMT[^$]+/i, ''),
diff: currentTimeZoneOffsetInHours
};
}
{
const $convertFrom = $('#convert-from'); // 時間入力フォーム
const $inputTimeDiff = $('.input-time-diff'); // 入力時間の時差
const $outputTimDiff = $('.output-time-diff'); // 出力時間の時差
const $outputTimeFormat = $('.output-time-format'); // 出力時間の形式
const now = getNow(); // 現在時間と時差
// 入力時間に現在の時間を設定
$convertFrom.val(now.time); // GMT〜を削除したローカル時間
$inputTimeDiff.val(now.diff);
// TODO 入力時間の時差を設定する
const timeModel = new TimeModel({
inputTime: $convertFrom.val(),
inputTimeDiff: parseFloat($inputTimeDiff.val()),
outputTimeDiff: parseFloat($outputTimDiff.val()),
outputTimeFormat: $('.output-time-format').val()
});
// TODO cookieの設定で、時差、出力後のフォーマットを設定する
new InputFormController({
model: timeModel,
el: '.input-field form'
});
new InputFieldView({
model: timeModel,
el: $('.input-field').find('.input-group').get(0)
});
new InputTimeController({
model: timeModel,
el: $convertFrom.get(0)
});
new InputTimeView({
model: timeModel,
el: $convertFrom.get(0)
});
new TimeDiffController({
model: timeModel,
el: $inputTimeDiff.get(0),
target: 'input'
});
new TimeDiffView({
model: timeModel,
el: $inputTimeDiff.get(0),
target: 'input'
});
new TimeNowController({
model: timeModel,
el: '.now'
});
new OutputTimeView({
model: timeModel,
el: '.result'
});
new TimeDiffController({
model: timeModel,
el: $outputTimDiff.get(0),
target: 'output'
});
new TimeDiffView({
model: timeModel,
el: $outputTimDiff.get(0),
target: 'output'
});
new TimeFormatView({
model: timeModel,
el: $outputTimeFormat.get(0)
});
// 入力エリアにフォーカスを設定する
// document.getElementById('convert-from').focus();
}
!
