<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/zircle@0.9.0-rc.5"></script>
<link href="https://unpkg.com/zircle@0.9.0-rc.5/dist/zircle.css" rel="stylesheet">
<div id="app">
  <z-canvas :views='$options.components' style="background-color: #34495e">
  </z-canvas>
</div>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
const store = {
  debug: true,
  state: {
    counter: 0,
    counterName: 'Get up early',
    counterGoal: true,
    counterGoalVal: 10
  },
  setCounterValue (newValue, msg) {
    if (this.debug) console.log('setCounterValue triggered with ' + msg, newValue)
    this.state.counter = newValue
  },
  setCounterName (newValue, msg) {
    if (this.debug) console.log('setCounterName triggered with ' + msg, newValue)
    this.state.counterName = newValue
  },
  setCounterGoal () {
    if (this.debug) console.log('counterGoal enabled')
    if (this.state.counterGoal !== true) this.state.counterGoal = true
  },
  setCounterGoalVal (newValue, msg) {
    if (this.debug) console.log('setCounterGoalVal triggered with ' + msg, newValue)
    this.state.counterGoalVal = newValue
  },
  resetCounter () {
    this.state.counter = 0
    this.state.counterName = ''
    this.state.counterGoal = false,
    this.state.counterGoalVal = 0
  }
}
const home = {
  template:
  `<z-view slider :progress="progress">
    <p style="font-size: calc(50px + 2vmax)">{{ sharedState.counter }}</p> 
    <h4>{{ sharedState.counterName }}</h4>
    <h6 v-if="sharedState.counterGoal">{{ goal }} 
    <i style="color: green;" v-if="sharedState.counterGoal && sharedState.counterGoalVal === sharedState.counter" class="fa fa-trophy"></i>
    </h6>
    <section slot="extension">
      <z-spot button :angle="-15" size="medium"  @click.native="increment"><i class="fa fa-plus"></i></z-spot>
      <z-spot button :angle="15" size="small"  @click.native="decrement"><i class="fa fa-minus"></i></z-spot>
      <z-spot button angle="40" size="small"  @click.native="reset"><i class="fa fa-refresh"></i></z-spot>
      <z-spot :angle="180"  size="small" to-view="config"><i class="fa fa-cogs"></i></z-spot>
    </section>
  </z-view>`,
  data () {
    return {
      sharedState: store.state
    }
  },
  computed: {
    goal () {
      if (this.sharedState.counterGoal) {
        var diff = this.sharedState.counterGoalVal - this.sharedState.counter
        if (diff > 0) {
          return diff + ' to go'
        } else if (diff < 0) {
          return -diff + ' above'
        } else {
          return 'Goal reached '
        }
      }
    },
    progress () {
      if (this.sharedState.counterGoal && this.sharedState.counterGoalVal !== 0) {
        return this.sharedState.counter * 100 / this.sharedState.counterGoalVal
      }
    }
  },
  methods: {
    increment () {
      store.setCounterValue(this.sharedState.counter += 1, 'Increment')
    },
    decrement () {
      store.setCounterValue(this.sharedState.counter -= 1, 'Decrement')
    },
    reset () {
      store.setCounterValue(this.sharedState.counter = 0, 'Reset')
    }

  }
}
const config = {
  name: 'config',
  data () {
    return {
      sharedState: store.state
    }
  },
  computed: {
    name () {
      return this.sharedState.counterName
    },
    goal () {
      return this.sharedState.counterGoalVal
    }
  },
  methods: {
    updateName (e) {
      if (e) {
        store.setCounterName(e.target.value)
      }
    },
    updateGoal (e) {
      if (e !== 0) {
        store.setCounterGoal()
        store.setCounterGoalVal(Math.ceil(e.target.value))
      }
    }
  },
  template:
  `<z-view color="accent">
    <i class="fa fa-cogs"></i>
    <input type="text" placeholder="counter name" :value="name" @input="updateName">
    <input type="number" placeholder="set goal" :value="goal" @input="updateGoal">
  
  </z-view>`
}

new Vue({
  el: '#app',
  components: {
    home,
    config
  },
  created () {
    this.$zircle.config({
      style: {
        theme: 'blue'
      }
    })
  },
  mounted () {
    this.$zircle.setView('home')
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.