Vue

by taowen

HTML

<div id="el"></div>

<script type="text/x-template" id="step1-template">
<div>
		<div>current: {{ input.current}}</div>
    <div>
      <input type="radio" id="step1_add"
       name="method_name" value="step1_add" v-model="method_name">
      <label for="step1_add">step1_add</label>

      <input type="radio" id="step1_sub"
       name="method_name" value="step1_sub" v-model="method_name">
      <label for="step1_sub">step1_sub</label>
    </div>
    
    <div><label>b:</label><input type="text" v-model="args.b"></input></div>
    
    <div>
    <button @click="submit">submit</button>
    </div>
</div>
</script>

<script type="text/x-template" id="show-msg-template">
<span>{{ input.msg }}</span>
</script>

<script type="text/x-template" id="entry-template">
<div>
  <button @click="launch" v-if="!step_ui">launch task</button>
  <component :is="step_ui" v-if="step_ui" :callback="step_callback" :input="step_ui_input"/>
</div>
</script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: white;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

Vue

async function sub1_task() {
  let result = 1
  while (true) {
    await scheduler.user_input('step1', {current: result}, {
      step1_add: args => {
        result = result + args.b
        return ['show-msg', {msg: `add result: ${result}`}]
      },
      step1_sub: args => {
        result = result - args.b
        return ['show-msg', {msg: `sub result: ${result}`}]
      }
    })
    await scheduler.sleep(1)
  }
}

Vue.component('step1', {
  template: '#step1-template',
  props: ['input', 'callback'],
  data: function(){return {
  	method_name: null,
    args: {b: 2},
  }},
  methods: {
  	submit: function() {
    	this.callback(this.method_name, this.args)
    }
  }
})

Vue.component('show-msg', {
  template: '#show-msg-template',
  props: ['input']
})

let scheduler = new Vue({
  el: '#el',
  template: '#entry-template',
  data: {
  	step_ui: null,
    step_callback: null,
    step_ui_input: null
  },
  methods: {
  	launch: () => sub1_task(),
    user_input: (step_ui, step_ui_input, methods) => new Promise(resolve => {
    	scheduler.step_callback = (method_name, args) => {
      	let result = methods[method_name](args)
        scheduler.step_ui = result[0]
        scheduler.step_ui_input = result[1]
      	resolve(result)
      }
      scheduler.step_ui_input = step_ui_input
    	scheduler.step_ui = step_ui
    }),
    sleep: (seconds) => new Promise(resolve => setTimeout(resolve, seconds * 1000))
  }
})