前提・実現したいこと
・前提
PHP(Laravel)で実装中のシステム内で
勤務可能時間の申請を行う画面と機能を作っています。
4つのステータスを持つトグルスイッチとして実装していて
デフォルトは「未提出」という表示で
終日可、時間指定、出勤不可、といった3つのステータスに切り替わります。
一度申請した後は
申請したステータスが初期値として入り
修正を行うことができるものです。
そして、未提出に戻すことはできず
一週間以内のステータスに関しては
下位のものに変更ができなくなる制御を入れたいです。
(終日可→時間指定、時間指定→対応不可、終日可→対応不可)
このうち、ステータスが切り替わるところまでは実装ができ
時間指定を選択しているときには、時間の入力が可能なフォームを表示させるところまでは
実装することができました。
・実現したいこと
一週間以内のステータスに関する制御のうち
終日可→時間指定をできなくする制御が抜けているので
それを実装したい。
発生している問題
提出しているステータスのうち
1つだけ制御が抜けてしまっている。
該当のソースコード
javascript
1 2/** 3 * シフト提出 4 */ 5$(function () { 6 $('ul.shift-input li.lp-shift-level-none').on("click", function () { 7 setShift($(this)); 8 }); 9 $('ul.shift-input li.lp-shift-level-work').on("click", function () { 10 setShift($(this)); 11 }); 12 $('button#lp-shift-on-off').on("click", function () { 13 setShiftOnOff($(this)); 14 }); 15}); 16 17function setShift(obj) { 18 // シフトレベルクリック 待機開始時間を設定 19 20 let date = obj.attr('data-date'); 21 let hour = obj.attr('data-hour'); 22 let intHour = parseInt(obj.attr('data-hour')); 23 let lastTrain = $('input[name="last_train_time[' + date + ']"]').val(); 24 let intLastTrain = parseInt(lastTrain.replace(/:/g, '')); 25 26 if (intLastTrain > 1200 && intLastTrain < (intHour * 100)) { 27 alert('終電より遅いシフトは、提出できません。'); 28 return; 29 } 30 31 $('li[data-date='+ date +']').each(function () { 32 // アイコン付け替え 33 let intLiHour = parseInt($(this).attr('data-hour')); 34 if ($(this).hasClass('lp-shift-level-locked')) { 35 return; 36 } 37 let setLevel = function (eachObj, level, removeLevel) { 38 eachObj.removeClass('lp-shift-level-' + removeLevel); 39 eachObj.addClass('lp-shift-level-' + level); 40 eachObj.find('span').removeClass('lp-shift-level-' + removeLevel); 41 eachObj.find('span').addClass('lp-shift-level-' + level); 42 }; 43 intLiHour >= intHour ? setLevel($(this), 'work', 'none') : setLevel($(this), 'none', 'work'); 44 }); 45 $('input[name="stand_by_time[' + date + ']"]').val(hour + ':00'); 46} 47 48function setShiftOnOff(obj) { 49 // 出勤可不可の設定 50 let date = obj.attr('data-date'); 51 let hour = obj.attr('data-hour'); 52 let last = obj.attr('data-last'); 53 let on = obj.attr('data-on'); 54 let off = obj.attr('data-off'); 55 let one_week = obj.attr('data-week'); 56 let off_day = obj.attr('data-offable'); 57 58 // ボタンを押したときの動作 59 if (obj.hasClass('btn btn-secondary btn-sm') | obj.hasClass('btn btn-danger btn-sm') | (obj.hasClass('btn btn-info btn-sm') & !one_week & !off_day)){ 60 // 未提出or出勤不可→終日(1週間以内の場合は出勤不可にできない) 61 obj.removeClass('btn btn-secondary btn-sm'); 62 obj.removeClass('btn btn-danger btn-sm'); 63 obj.removeClass('btn btn-info btn-sm'); 64 obj.addClass('btn btn-primary btn-sm'); 65 $('button[name="shift_on_off[' + date + ']"]').html("終日</br>可"); 66 $('input[name="stand_by_time[' + date + ']"]').attr('type', 'hidden'); 67 $('input[name="last_train_time[' + date + ']"]').attr('type', 'hidden'); 68 $('input[name="stand_by_time[' + date + ']"]').val(hour + ':00'); 69 $('input[name="last_train_time[' + date + ']"]').val(last + ':00'); 70 $('input[name="shift_on_off[' + date + ']"]').val(on); 71 $('form#lp-action-form').find('div[name="shift_all_stand_by[' + date + ']"]').show(); 72 $('form#lp-action-form').find('div[name="shift_all_last_train[' + date + ']"]').show(); 73 } else if (obj.hasClass('btn btn-primary btn-sm')){ 74 // 終日可→時間入力 75 obj.removeClass('btn btn-primary btn-sm'); 76 obj.addClass('btn btn-info btn-sm'); 77 $('button[name="shift_on_off[' + date + ']"]').html("時間</br>入力"); 78 $('input[name="stand_by_time[' + date + ']"]').attr('type', 'time'); 79 $('input[name="last_train_time[' + date + ']"]').attr('type', 'time'); 80 $('input[name="stand_by_time[' + date + ']"]').val(hour + ':00'); 81 $('input[name="last_train_time[' + date + ']"]').val(hour + ':00'); 82 $('input[name="shift_on_off[' + date + ']"]').val(on); 83 $('form#lp-action-form').find('div[name="shift_all_stand_by[' + date + ']"]').hide(); 84 $('form#lp-action-form').find('div[name="shift_all_last_train[' + date + ']"]').hide(); 85 } else { 86 // 時間入力→出勤不可 87 obj.removeClass('btn btn-info btn-sm'); 88 obj.addClass('btn btn-danger btn-sm'); 89 $('#input_time[' + date + ']').hide(); 90 $('button[name="shift_on_off[' + date + ']"]').html("出勤</br>不可"); 91 $('input[name="stand_by_time[' + date + ']"]').attr('type', 'hidden'); 92 $('input[name="last_train_time[' + date + ']"]').attr('type', 'hidden'); 93 $('input[name="stand_by_time[' + date + ']"]').val(hour + ':00'); 94 $('input[name="last_train_time[' + date + ']"]').val(hour + ':00'); 95 $('input[name="shift_on_off[' + date + ']"]').val(off); 96 $('form#lp-action-form').find('div[name="shift_all_stand_by[' + date + ']"]').hide(); 97 $('form#lp-action-form').find('div[name="shift_all_last_train[' + date + ']"]').hide(); 98 } 99} 100 101
試したこと
else ifに下記を追加してみたが挙動が変わらなかった
javascript
1 } else if (obj.hasClass('btn btn-primary btn-sm') & !one_week & !off_day){ 2 obj.removeClass('btn btn-secondary btn-sm'); 3 obj.removeClass('btn btn-danger btn-sm'); 4 obj.removeClass('btn btn-info btn-sm'); 5 obj.addClass('btn btn-primary btn-sm'); 6 $('button[name="shift_on_off[' + date + ']"]').html("終日</br>可"); 7 $('input[name="stand_by_time[' + date + ']"]').attr('type', 'hidden'); 8 $('input[name="last_train_time[' + date + ']"]').attr('type', 'hidden'); 9 $('input[name="stand_by_time[' + date + ']"]').val(hour + ':00'); 10 $('input[name="last_train_time[' + date + ']"]').val(last + ':00'); 11 $('input[name="shift_on_off[' + date + ']"]').val(on); 12 $('form#lp-action-form').find('div[name="shift_all_stand_by[' + date + ']"]').show(); 13 $('form#lp-action-form').find('div[name="shift_all_last_train[' + date + ']"]').show();
補足情報(FW/ツールのバージョンなど)
PHP7系
Laravel5系です
このjsを利用しているviewは下記となります
https://ideone.com/ZhBAXA
利用しているビューコンポーザーは下記です
文字数オーバーしてしまったので外部に切り出しました。
宜しくお願い足します。