レバテックプラットフォーム作業報告一括編集ツールのソースコード

作業報告いちいち面倒だなーと思ってガッと作ったので汚いです。
リファクタリングしていこうかと思っているv1.0です。
それか誰かリファクタリングしてください。
レバテックプラットフォーム作業報告一括編集ツールはこちらです。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.28.4/handsontable.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/ja.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.28.4/handsontable.full.min.css">
<!-- 年月日設定 -->
<input type="text" id="year" size="4"/>年
<select id="month">
<option value="0">1月</option>
<option value="1">2月</option>
<option value="2">3月</option>
<option value="3">4月</option>
<option value="4">5月</option>
<option value="5">6月</option>
<option value="6">7月</option>
<option value="7">8月</option>
<option value="8">9月</option>
<option value="9">10月</option>
<option value="10">11月</option>
<option value="11">12月</option>
</select>
<!-- グリッド表示 -->
<div id="grid" ></div>
<!-- jsコード表示 -->
<div id="platform_result" style="border:1px #ccc solid;" class="copy"></div>
<script src="platform_editor.min.js"></script>

<input type="text" id="year" size="4"/>年

</select>

platform_editor.min.js

var data = init_data();
// データ初期化
function init_data() {
var
m = moment().startOf( 'month' ),
end_date = m.daysInMonth();
return create_data( m, end_date );
}
// Data作成
function create_data( m, end_date ) {
var
i = 0,
data_list = [];
for ( ; i < end_date; i++ ) {
d = [];
d.push( m.format( 'MM/DD (ddd)' ) );
m.add( 1, 'day' );
data_list.push( d );
}
return data_list;
}
// 年月が変更された時にグリッドを変更する
function change_date() {
var m = moment();
m.set( 'year', $( '#year' ).val() );
m.set( 'month', $( '#month' ).val() );
data  = create_data( m.startOf( 'month' ), m.startOf( 'month' ).daysInMonth() );
grid.loadData( data );
}
var platform_editor = {};
( function() {
"use strict";
var platform_result = document.getElementById( 'platform_result' );
// プラットフォームのjQuery実行内容出力結果
platform_editor.setText = function() {
var result = '';
// 一行づつ作成する
$.each( data, function( i, value ) {
var date = moment( $( '#year' ).val() + '/' + value[ 0 ], 'YYYY/MM/DD (dd)' );
// 作業時間と休憩時間を生成
$.each( [ 'start_time', 'end_time', 'relax_time' ], function( j, category ) {
if ( value[ j + 1 ] == null ) return;
result +=
"$('#" + date.format( 'YYYYMMDD' ) + category + "').val('" + value[ j + 1 ] + "').trigger('focusout');\n";
});
// 作業内容生成
if ( value[ 4 ] != null ) {
result += "$('#DailyReport" + date.format( 'YYYYMMDD' ) + "WorkContent').val('" + value[ 4 ] + "');\n";
}
});
platform_result.innerHTML = result;
};
// コピペを簡単にする
$( '#platform_result' ).click( function() {
var
range = document.createRange(),
selection = window.getSelection();
range.selectNodeContents( this );
selection.removeAllRanges();
selection.addRange( range );
});
})();
var grid = {};
( function() {
"use strict";
var
container = document.getElementById( 'grid' ),
year_ele = document.getElementById( 'year' ),
month_ele = document.getElementById( 'month' ),
// 時間のプルダウンリスト
time_list = function () {
var
m = moment().startOf( 'day' ),
i = 0,
end_time_count = 96,
add_minute = 15,
list = [];
for ( ; i < end_time_count; i++ ) {
list.push( m.format( 'HH:mm' ) );
m.add( add_minute, 'minute' );
}
return list;
};
// グリッドのインスタンス生成
grid = new Handsontable( container, {
// バインドされる値
data: data,
// ヘッダー
colHeaders: ['　日付　', '　開始　', '　終了　', '　休憩　', '　作業内容　'],
// 行ごとの状態
columns: [
{ readOnly: true },
{ type: 'dropdown', source: time_list() },
{ type: 'dropdown', source: time_list() },
{ type: 'dropdown', source: time_list() },
{}
],
// グリッドの更新後に実行されるやつ
afterRender: function ( changes, source ) {
platform_editor.setText();
},
// セルの大きさ変更禁止
afterCreateRow: function( index, amount ){
data.splice( index, amount )
}
});
( function() {
$( '#year' ).val( moment().get( 'year' ) ).change( function () {
change_date();
});
$( '#month' ).val( moment().get( 'month' ) ).change( function () {
change_date();
});
})();
})();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

var data = init_data();

// データ初期化

function init_data() {

var

m = moment().startOf( 'month' ),

end_date = m.daysInMonth();

return create_data( m, end_date );

}

// Data作成

function create_data( m, end_date ) {

var

i = 0,

data_list = [];

for ( ; i < end_date; i++ ) {

d = [];

d.push( m.format( 'MM/DD (ddd)' ) );

m.add( 1, 'day' );

data_list.push( d );

}

return data_list;

}

// 年月が変更された時にグリッドを変更する

function change_date() {

var m = moment();

m.set( 'year', $( '#year' ).val() );

m.set( 'month', $( '#month' ).val() );

data = create_data( m.startOf( 'month' ), m.startOf( 'month' ).daysInMonth() );

grid.loadData( data );

}

var platform_editor = {};

( function() {

"use strict";

var platform_result = document.getElementById( 'platform_result' );

// プラットフォームのjQuery実行内容出力結果

platform_editor.setText = function() {

var result = '';

// 一行づつ作成する

$.each( data, function( i, value ) {

var date = moment( $( '#year' ).val() + '/' + value[ 0 ], 'YYYY/MM/DD (dd)' );

// 作業時間と休憩時間を生成

$.each( [ 'start_time', 'end_time', 'relax_time' ], function( j, category ) {

if ( value[ j + 1 ] == null ) return;

result +=

"$('#" + date.format( 'YYYYMMDD' ) + category + "').val('" + value[ j + 1 ] + "').trigger('focusout');\n";

});

// 作業内容生成

if ( value[ 4 ] != null ) {

result += "$('#DailyReport" + date.format( 'YYYYMMDD' ) + "WorkContent').val('" + value[ 4 ] + "');\n";

}

});

platform_result.innerHTML = result;

};

// コピペを簡単にする

$( '#platform_result' ).click( function() {

var

range = document.createRange(),

selection = window.getSelection();

range.selectNodeContents( this );

selection.removeAllRanges();

selection.addRange( range );

});

})();

var grid = {};

( function() {

"use strict";

var

container = document.getElementById( 'grid' ),

year_ele = document.getElementById( 'year' ),

month_ele = document.getElementById( 'month' ),

// 時間のプルダウンリスト

time_list = function () {

var

m = moment().startOf( 'day' ),

i = 0,

end_time_count = 96,

add_minute = 15,

list = [];

for ( ; i < end_time_count; i++ ) {

list.push( m.format( 'HH:mm' ) );

m.add( add_minute, 'minute' );

}

return list;

};

// グリッドのインスタンス生成

grid = new Handsontable( container, {

// バインドされる値

data: data,

// ヘッダー

colHeaders: ['　日付　', '　開始　', '　終了　', '　休憩　', '　作業内容　'],

// 行ごとの状態

columns: [

{ readOnly: true },

{ type: 'dropdown', source: time_list() },

{}

// グリッドの更新後に実行されるやつ

afterRender: function ( changes, source ) {

platform_editor.setText();

// セルの大きさ変更禁止

afterCreateRow: function( index, amount ){

data.splice( index, amount )

}

});

( function() {

$( '#year' ).val( moment().get( 'year' ) ).change( function () {

change_date();

});

$( '#month' ).val( moment().get( 'month' ) ).change( function () {

change_date();

});

})();

解説

一番最初あたりにある変数のdataと言うのが入力されているセルの情報を保持するものです。
それを初期化したり年月変更したりするメソッドがちらほらあります。

そのdataの中には常に入力された最新の内容があるため、
afterRender: function ( changes, source ) {のfunctionが実行されるたびに
jQueryのソースコードが最新化されます。

Handsontableのバグなのかなんなのかわからないですが、
セルを下の方にドラッグすると自動で行が追加されてしまいます。
そこでafterCreateRow: function( index, amount ){で対応してます。
[Handsontable.js]ドラッグで行追加を禁止にする方法

眠いので以上。

あとmoment.jsが便利だった。

参考

レバテックプラットフォームハック
 日付を扱うJAVASCRIPTライブラリMOMENT.JSの使い方
 JavaScriptで日付を扱うならこれ！「moment.js」
Handsontable 使い方メモ２（グリッドのオプション）
Handsontable 使い方メモ４（メソッド）
セレクトボックスを作る
 JavaScriptで先頭、末尾の文字を削除する方法

解説

参考

関連