renew options-page

ninoseki · Dec 20, 2012 · 7981d3e · 7981d3e
1 parent fe0ab70
commit 7981d3e
Show file tree

Hide file tree

Showing 17 changed files with 486 additions and 156 deletions.
diff --git a/README.md b/README.md
@@ -12,6 +12,7 @@ Contributors
 ============
 
 * [jcplessis](https://github.com/jcplessis)
+* [klamping](https://github.com/klamping)
 
 *Thank you!*
 

diff --git a/app/application.coffee b/app/application.coffee
@@ -15,6 +15,7 @@ Application =
     WorkingView = require 'views/working_view'
     RestingView = require 'views/resting_view'
     StatsView = require 'views/stats_view'
+
     MainRouter = require 'routers/main_router'
 
     @router = new MainRouter()
@@ -39,7 +40,7 @@ Application =
     @settings = {}
     @settings.date_format = "YYYY-MM-DD"
 
-    @development = true
+    @development = false
 
     # Freeze the object
     Object.freeze? Application

diff --git a/app/assets/javascripts/options.js b/app/assets/javascripts/options.js
@@ -31,9 +31,9 @@ function restore_options() {
 }
 
 $(function() {
-    restore_options();
+    OptionsView = require('/views/options_view');
+    optionsView = new OptionsView();
+    console.debug(optionsView);
+    optionsView.render();
 
-    $('#submit').click(function() {
-       save_options();
-    });
 });
diff --git a/app/assets/options.html b/app/assets/options.html
@@ -1,27 +1,38 @@
 <html>
-<head><title>Pomodoro Daisuki</title></head>
-<script type="text/javascript" src="javascripts/vendor.js"></script>
-<script type="text/javascript" src="javascripts/options.js"></script>
 
+<head>
+    <meta charset="utf-8">
+    <title>Pomodoro Daisuki</title>
+
+    <link rel="shortcut icon" href="images/tomato_16.png" type="image/png"/>
+    <link rel="stylesheet" href="stylesheets/app.css">
+    <link rel="stylesheet" href="stylesheets/options.css">
+    <script type="text/javascript" src="javascripts/vendor.js"></script>
+    <script type="text/javascript" src="javascripts/app.js"></script>
+    <script type="text/javascript" src="javascripts/options.js"></script>
+</head>
 <body>
-<table>
-    <tr>
-        <td>Duration of a pomodoro</td>
-        <td><input id="pomodoro-duration" size=2 value="25"/></td>
-        <td>minutes</td>
-    </tr>
-    <tr>
-        <td>Duration of a short break</td>
-        <td><input id="short-duration" size=2 value="5"/></td>
-        <td>minutes</td>
-    </tr>
-    <tr>
-        <td>Duration of a long break</td>
-        <td><input id="long-duration" size=2 value="15"/></td>
-        <td>minutes</td>
-    </tr>
-</table>
-<button id="submit">Save</button>
-<span id="status"></span>
+<!-- navbar -->
+<div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar-inner">
+        <div class="container">
+            <img class="brand-image" src="images/tomato_32.png" alt="tomato">
+            <a class="brand" href="#">Pomodoro Daisuki</a>
+        </div>
+    </div>
+</div>
+<!-- /navbar -->
+
+<!-- main -->
+<div id ="main">
+    <div class="container">
+        <div id="modal" class="modal">
+
+        </div>
+    </div>
+</div>
+<!-- /main -->
+
+
 </body>
 </html>
diff --git a/app/assets/stylesheets/options.css b/app/assets/stylesheets/options.css
@@ -0,0 +1,15 @@
+.form-horizontal .control-label {
+    float: left;
+    width: 240px;
+    padding-top: 5px;
+    text-align: right;
+}
+
+.form-horizontal .controls {
+    margin-left: 20px;
+}
+
+.form-horizontal .controls input {
+    height: auto;
+}
+
diff --git a/app/models/timer_config.coffee b/app/models/timer_config.coffee
@@ -0,0 +1,12 @@
+Model = require './model'
+
+module.exports = class TimerConfig extends Model
+  initialize: ->
+    @set 'pomodoroDuration', localStorage.getItem('pomodoroDuration') ? 25
+    @set 'shortBreakDuration', localStorage.getItem('shortBreakDuration') ? 5
+    @set 'longBreakDuration', localStorage.getItem('longBreakDuration') ? 15
+
+  update: (data) ->
+    for key, value of data
+      localStorage.setItem(key, value)
+      @set key, value
diff --git a/app/routers/main_router.coffee b/app/routers/main_router.coffee
@@ -1,35 +1,35 @@
 application = require 'application'
+TimerConfig = require '../models/timer_config'
 
 module.exports = class MainRouter extends Backbone.Router
   routes :
     "home"                : "home"
     "working"             : "working"
     "resting/:rest_type"  : "resting"
     "stats"               : "stats"
-    "small-timer"         : "small_timer"
+    "small-timer"         : "smallTimer"
 
-  home: ->
+  initialize: ->
+    @timerConfig = new TimerConfig()
+
+  home: (type) ->
     application.homeView.render()
     application.notes.fetch()
     application.columns.fetch()
 
-    application.states.setCurrentStateName('home')
-
+    if type != 'onWorking'
+      application.states.setCurrentStateName('home')
 
   working: ->
     application.workingView.render()
-    duration = localStorage["pomodoro-duration"]
-    if ! duration then duration = 25
+    duration = @timerConfig.get 'pomodoroDuration'
 
     application.workingView.startTimer(if application.development == true then 10 else duration * 60)
     application.states.setCurrentStateName('working')
 
-  resting: (rest_type) ->
+  resting: (restType) ->
     application.restingView.render()
-    duration = localStorage[rest_type + "-duration"]
-    if ! duration
-        if rest_type == "short" then duration = 5
-        if rest_type == "long" then duration = 15
+    duration = @timerConfig.get restType + 'BreakDuration'
     application.restingView.startTimer(if application.development == true then 10 else duration * 60)
 
     application.states.setCurrentStateName('resting/' + rest_type)
@@ -38,6 +38,7 @@ module.exports = class MainRouter extends Backbone.Router
     application.pomodoros.fetch()
     application.statsView.render()
 
-  small_timer: ->
+  smallTimer: ->
      $("#modal").modal("show")
-     application.router.navigate 'home', true
+
+     application.router.navigate 'home/onWorking', true
diff --git a/app/views/options_view.coffee b/app/views/options_view.coffee
@@ -0,0 +1,24 @@
+View = require './view'
+TimerConfig = require '../models/timer_config'
+template = require './templates/options'
+
+module.exports = class OptionsView extends View
+  template: template
+  el: "#modal"
+
+  events:
+    "click #update": "update"
+
+  initialize: ->
+    @timerConfig = new TimerConfig()
+
+  getRenderData: ->
+    @timerConfig.toJSON()
+
+  update: ->
+    data =
+      pomodoroDuration    : $('#inputPomodoroDuration').val()
+      shortBreakDuration  : $('#inputShortBreakDuration').val()
+      longBreakDuration   : $('#inputLongBreakDuration').val()
+
+    @timerConfig.update data
diff --git a/app/views/templates/options.eco b/app/views/templates/options.eco
@@ -0,0 +1,28 @@
+<div class="modal-header">
+    <h3>Options</h3>
+</div>
+<div class="modal-body">
+    <form class="form-horizontal">
+        <div class="control-group">
+            <label class="control-label" for="inputPomodoroDuration">Duration of a pomodoro</label>
+            <div class="controls input-append">
+                <input class="input-small" type="number" id="inputPomodoroDuration" value="<%= @pomodoroDuration %>"><span class="add-on">minutes</span>
+            </div>
+        </div>
+        <div class="control-group">
+            <label class="control-label" for="inputDurationShortBreak">Duration of a short break</label>
+            <div class="controls input-append">
+                <input class="input-small" type="number" id="inputShortBreakDuration" value="<%= @shortBreakDuration %>"><span class="add-on">minutes</span>
+            </div>
+        </div>
+        <div class="control-group">
+            <label class="control-label" for="inputDurationLongBreak">Duration of a long break</label>
+            <div class="controls input-append">
+                <input class="input-small" type="number" id="inputLongBreakDuration" value="<%= @longBreakDuration %>"><span class="add-on">minutes</span>
+            </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <a href="#" id="update" class="btn btn-primary">Save changes</a>
+</div>
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
    "name": "Pomodoro Daisuki",
-   "version": "0.48",
+   "version": "0.50",
    "manifest_version": 2,
    "description": "Tool for Pomodoro Technique",
     "icons": {