[#3] スタートボタン前後で提出用のボタンを有効・無効化切り替えの処理を追加

Natsukingdom · Aug 27, 2018 · 88a3846 · 88a3846
1 parent 2e0b7a7
commit 88a3846
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/app/assets/javascripts/timer.js b/app/assets/javascripts/timer.js
@@ -1,15 +1,15 @@
 var timer;
 var counter = 0;
 var startTime;
-const POMO_SECONDS = 5;
+const POMO_SECONDS = 1500;
 document.addEventListener('DOMContentLoaded', function() {
         setSeconds(counter);
         setRestSeconds(counter);
-//        var button = document.getElementById('btn');
-//        if(!button) {
-//            return;
-//        }
-        document.getElementById('btn').addEventListener('click', function(e) {
+        var button = document.getElementById('start-stop-btn');
+        if(!button) {
+            return;
+        }
+        button.addEventListener('click', function(e) {
             toggleBtnFunction();
             window.addEventListener('beforeunload', beforeUnloadHandler);
         });
@@ -26,16 +26,20 @@ var beforeUnloadHandler = function(e) {
 }
 
 function toggleBtnFunction() {
-    var button = document.getElementById('btn');
-    if(button.value == 'Start') {
+    var control_btn = document.getElementById('start-stop-btn');
+    var submit_btn = document.getElementById('submit-btn');
+    if(control_btn.value == 'Start') {
         startTimer();
-        button.value = 'Stop';
-    } else if(button.value == 'Stop') {
+        control_btn.value = 'Stop';
+        submit_btn.setAttribute('disabled', 'disabled');
+    } else if(control_btn.value == 'Stop') {
         stopTimer();
-        button.value = 'ReStart';
-    } else if(button.value == 'ReStart') {
+        control_btn.value = 'ReStart';
+        submit_btn.removeAttribute('disabled');
+    } else if(control_btn.value == 'ReStart') {
         restartTimer();
-        button.value = 'Stop';
+        control_btn.value = 'Stop';
+        submit_btn.setAttribute('disabled', 'disabled');
     }
 }
 
@@ -70,7 +74,13 @@ function setRestSeconds(passageSeconds) {
     if(!restInput) {
         return;
     }
-    restInput.textContent = (POMO_SECONDS - passageSeconds) || 0;
+    restInput.textContent = restTime(POMO_SECONDS - passageSeconds) || 0;
+}
+
+function restTime(restSeconds) {
+    let minutes = restSeconds / 60 | 0;
+    let seconds = restSeconds % 60;
+    return minutes + '分' + seconds + '秒';
 }
 
 function restartTimer() {
@@ -108,7 +118,3 @@ function setPassageSeconds() {
     }
     passageInput.value = counter;
 }
-
-function confirmLeave() {
-    window.confirm('このウェブページを離脱しますか？')
-}
diff --git a/app/views/pomos/_form.html.erb b/app/views/pomos/_form.html.erb
@@ -41,11 +41,11 @@
   </div>
 
   <div>
-    <input type="button" id="btn" class="start-timer" value="Start"/>
+    <input type="button" id="start-stop-btn" class="start-timer" value="Start"/>
   </div>
 
   <div class="actions">
-    <%= form.submit %>
+    <%= form.submit id: 'submit-btn', disabled: 'disabled' %>
   </div>
 
 <% end %>