pomodoro

index.html

<div id="container" style="margin-top:50px;"></div>
<template class="column" id="template">
  <div class="ui grid text container">
    <div class="row">
      <div class="column">
        <h1>Pomodoro</h1>
        
        <div class="ui centered card">
          <div class="content">
            <div class="header">
              {{elapsed |remaining }} <small class="right floated">{{this[timerType]}}:00</small>
            </div>
            <div class="meta">{{timerType|capitalize}}
              <div class="ui {{status}} progress"><!-- red in break; olive in session; gray [none] in pause/ready -->
                <div class="bar" style="transition-duration: 300ms; width: {{elapsed|percentOf this[timerType]}}%;">
                  <div class="progress">{{elapsed|percentOf this[timerType]}}%</div>
                </div>
                <!-- <div class="label">{{elapsed|percentOf this[timerType]}} %</div> -->
                
              </div>
              <span class="right floated">Session {{break}}Min</span>
              <span>Break {{session}}Min</span>
            </div>
          </div>
          <div class="extra content">
            <span class="right floated">
              <a href="#" @click="toggleEditing"><i class="icon pencil"></i></a>
              <!-- <a href="#"><i class="icon plus"></i></a> -->
            </span>
            <a href="#" @click="startTicker"><i class="icon play"></i></a>
            <a href="#" @click="pauseTicker"><i class="icon pause"></i></a>
            <a href="#" @click="stopTicker"><i class="icon stop"></i></a>
          </div>
          <div class="extra content" v-show="editing">
            <b>Session</b>
            <div class="ui small action fluid input">
            <input v-model='session' type="text" />
            <button @click="update('session',-1)" class="ui icon button"><i class="icon minus"></i></button>
            <button @click="update('session',1)" class="ui icon button"><i class="icon plus"></i></button>
            <button @click="doneUpdate" class="ui icon primary button"><i class="icon check"></i></button>
            </div>
            <b>Break</b>
            <div class="ui small action fluid input">
            <input v-model='break' type="text" />
            <button @click="update('break',-1)" class="ui icon button"><i class="icon minus"></i></button>
            <button @click="update('break',1)" class="ui icon button"><i class="icon plus"></i></button>
            <button @click="doneUpdate" class="ui icon primary button"><i class="icon check"></i></button>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</template>

pomodoro.markdown

pomodoro

Otro de los ejercicios propuestos en freecodecampo.com

A Pen by Aldo Mendez Reyes on CodePen.

License.

script.js

Vue.filter('capitalize', function(val){
  return val.charAt(0).toUpperCase() + val.slice(1);
});
Vue.filter('remaining', function(val){
  var remaining = this[this.timerType]*60 - this.elapsed;
  var minutes = "0"+ Math.floor(remaining / 60);
  var seconds = "0"+ ( remaining - minutes*60);
  return minutes.substr(-2) + ":" + seconds.substr(-2);;
});
Vue.filter('percentOf', function(value, final){
  if (value == 0){ 
    return '0';
  }else{
    return Math.floor((value/(final*60))* 100);
  }
});

vm = new Vue({
  el:'#container',
  template:'#template',
  data:{
    state:'editing',
    status:'',
    editing: false,
    timerType:'session',
    session:25,
    break:5,
    elapsed:0,
    interval:null
  },
  methods:{
    toggleEditing:function(){
      this.editing= !this.editing;      
    },
    stopTicker:function(){
      this.status = 'big'
      this.elapsed = 0;
      clearInterval(this.interval);
      this.interval = null;
    },
    pauseTicker:function(){
      this.status = 'big';
      clearInterval(this.interval);
      this.interval = null;
    },
    setStatus:function(sw){
      if(this.timerType === 'session'){
        this.status = 'active big olive'
        if(sw){this.timerType = 'break'};
      } else {
        this.status ='active big red'
        if(sw){this.timerType = 'session'};
      }
    },
    startTicker:function(){
      if(this.interval){return true;}
      this.setStatus();
      _this = this;
      this.interval = setInterval(function(){
        if(_this[_this.timerType]* 60 <= _this.elapsed){
          _this.elapsed = 0;
          _this.setStatus(true);
        } else {
          _this.elapsed++;
        }
      },1000);
    },
    doneUpdate: function (){
      this.editing = false;
    },
    update:function (variable, value){
      this[variable] = parseInt(this[variable]);
      if ( value >= 0 || this[variable] > 1){
        this[variable]+= value;
      }
    }
  },
  created:function(){
    this.startTicker();
    return true;
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.css" rel="stylesheet" />