[#3] タイマー設置中

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

Hide file tree

Showing 7 changed files with 90 additions and 56 deletions.
diff --git a/Gemfile b/Gemfile
@@ -19,8 +19,6 @@ gem 'postgresql'
 
 # Use CoffeeScript for .coffee assets and views
 gem 'coffee-rails', '~> 4.2'
-# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
-gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.5'
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -216,9 +216,6 @@ GEM
       sprockets (>= 3.0.0)
     thor (0.20.0)
     thread_safe (0.3.6)
-    turbolinks (5.1.1)
-      turbolinks-source (~> 5.1)
-    turbolinks-source (5.1.0)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
     uglifier (4.1.14)
@@ -264,7 +261,6 @@ DEPENDENCIES
   selenium-webdriver
   spring
   spring-watcher-listen (~> 2.0.0)
-  turbolinks (~> 5)
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console (>= 3.3.0)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -11,5 +11,4 @@
 // about supported directives.
 //
 //= require rails-ujs
-//= require turbolinks
 //= require_tree .
diff --git a/app/assets/javascripts/timer.js b/app/assets/javascripts/timer.js
@@ -1,12 +1,29 @@
 var timer;
-var counter = 60 * 25
+var counter = 0;
+var startTime;
+const POMO_SECONDS = 5;
 document.addEventListener('DOMContentLoaded', function() {
         setSeconds(counter);
-        document.getElementById('btn').addEventListener('click', function() {
+        setRestSeconds(counter);
+//        var button = document.getElementById('btn');
+//        if(!button) {
+//            return;
+//        }
+        document.getElementById('btn').addEventListener('click', function(e) {
             toggleBtnFunction();
-        })
+            window.addEventListener('beforeunload', beforeUnloadHandler);
+        });
+        document.getElementById('pomo_form').addEventListener('submit', function(e) {
+            window.removeEventListener('beforeunload', beforeUnloadHandler);
+        });
     }
-)
+);
+
+var beforeUnloadHandler = function(e) {
+    let msg = '入力したデータが消えてしまう可能性があります．'
+    e.returnValue = msg;
+    return msg;
+}
 
 function toggleBtnFunction() {
     var button = document.getElementById('btn');
@@ -16,37 +33,82 @@ function toggleBtnFunction() {
     } else if(button.value == 'Stop') {
         stopTimer();
         button.value = 'ReStart';
-    } else if(button.value == 'Restart') {
+    } else if(button.value == 'ReStart') {
         restartTimer();
         button.value = 'Stop';
     }
 }
 
-
 function startTimer() {
-    timer = setInterval(countTimer, 1000)
+    timer = setInterval(countTimer, 1000);
+    setStartTime();
     // now を id=start-timeのvalueに設定する。
 }
 
+function finishTimer() {
+    stopTimer();
+    setEndTime();
+    setPassageSeconds();
+    window.alert('おつかれさま！');
+    // 通知する処理を入れる．
+}
+
+function setStartTime() {
+    startTime = new Date().toString();
+    var startTimeInput = document.getElementById('start_time');
+    startTimeInput.value = startTime;
+}
+
 function stopTimer() {
     clearInterval(timer);
-    //
+    setEndTime();
+    setPassageSeconds();
 }
 
-function setSeconds(restSeconds) {
-    var seconds = document.getElementById('rest-time')
-    seconds.textContent = restSeconds;
+function setRestSeconds(passageSeconds) {
+    var restInput = document.getElementById('rest-time');
+    if(!restInput) {
+        return;
+    }
+    restInput.textContent = (POMO_SECONDS - passageSeconds) || 0;
 }
 
 function restartTimer() {
-
+    timer = setInterval(countTimer, 1000);
 }
 
 function countTimer() {
-    counter--;
-    setSeconds(60 * 25 - counter);
+    if(counter == POMO_SECONDS) {
+        finishTimer();
+        return;
+    }
+    counter++;
+    setSeconds(counter);
+    setRestSeconds(counter);
 }
 
-function submitTimer() {
+function setSeconds(passageSeconds) {
+    var passageInput = document.getElementById('passage_seconds');
+    if (!passageInput) {
+        return;
+    }
+    passageInput.value = passageSeconds;
+}
+
+
+function setEndTime() {
+    var stopTimeInput = document.getElementById('end_time');
+    stopTimeInput.value = new Date().toString();
+}
+
+function setPassageSeconds() {
+    var passageInput = document.getElementById('passage_seconds');
+    if (!passageInput) {
+        return;
+    }
+    passageInput.value = counter;
+}
 
+function confirmLeave() {
+    window.confirm('このウェブページを離脱しますか？')
 }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -4,8 +4,8 @@
   <title>GritShare</title>
   <%= csrf_meta_tags %>
 
-  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= stylesheet_link_tag    'application', media: 'all' %>
+  <%= javascript_include_tag 'application' %>
 </head>
 
 <body>

diff --git a/app/views/pomos/_form.html.erb b/app/views/pomos/_form.html.erb
@@ -1,4 +1,4 @@
-<%= form_with(model: pomo, url: [@user, pomo], local: true) do |form| %>
+<%= form_with(model: pomo, url: [@user, pomo], local: true, id: :pomo_form) do |form| %>
   <% if pomo.errors.any? %>
     <div id="error_explanation">
       <h2><%= pluralize(pomo.errors.count, "error") %> prohibited this pomo from being saved:</h2>
@@ -15,18 +15,15 @@
 
   <div class="field">
     <!-- 以下のフォームに関してコメント以外は概ね不可視化を行う。 -->
-    <%= form.label :start_time %>
-    <%= form.datetime_select :start_time, id: :start_time %>
+    <%= form.hidden_field :start_time, id: :start_time %>
   </div>
 
   <div class="field">
-    <%= form.label :stop_time %>
-    <%= form.datetime_select :stop_time, id: :stop_time %>
+    <%= form.hidden_field :stop_time, id: :stop_time %>
   </div>
 
   <div class="field">
-    <%= form.label :end_time %>
-    <%= form.datetime_select :end_time, id: :end_time %>
+    <%= form.hidden_field :end_time, id: :end_time %>
   </div>
 
   <div class="field">
@@ -35,39 +32,21 @@
   </div>
 
   <div class="field">
-    <%= form.label :passage_seconds %>
-    <%= form.number_field :passage_seconds, id: :passage_seconds %>
+    <%= form.hidden_field :passage_seconds, id: :passage_seconds %>
   </div>
 
   <div>
     <label>Rest seconds</label>
     <span id="rest-time"></span>
   </div>
 
+  <div>
+    <input type="button" id="btn" class="start-timer" value="Start"/>
+  </div>
+
   <div class="actions">
     <%= form.submit %>
   </div>
 
 <% end %>
 
-<br/>
-<br/>
-<br/>
-<br/>
-
-debug
-<br/>
-残り分数   <span id="minutes"></span>
-<br/>
-残り秒数   <span id="seconds"></span>
-<br/>
-経過秒数   <span id="passage"></span>
-<br/>
-
-<input type="button" id="btn" class="start-timer" value="Start"/>
-
-<br/>
-<br/>
-<br/>
-<br/>
-
diff --git a/app/views/pomos/index.html.erb b/app/views/pomos/index.html.erb
@@ -4,8 +4,8 @@
   <thead class="thead-light">
     <tr>
       <th>Start time</th>
-      <th>Stop time</th>
       <th>End time</th>
+      <th>Passage Seconds</th>
       <th>Comment</th>
       <th colspan="3"></th>
     </tr>
@@ -15,8 +15,8 @@
     <% @pomos.each do |pomo| %>
       <tr>
         <td><%= pomo.start_time %></td>
-        <td><%= pomo.stop_time %></td>
         <td><%= pomo.end_time %></td>
+        <td><%= pomo.passage_seconds %></td>
         <td><%= pomo.comment %></td>
         <td><%= link_to 'Show', user_pomo_url(@user, pomo) %></td>
         <td><%= link_to 'Edit', edit_user_pomo_path(@user, pomo) %></td>