Tunnel example

by Simon Boddy

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--script src="https://unpkg.com/vue-router/dist/vue-router.js"></script-->
<div id="vueRoot">
  <camera ref="camera"></camera>
  <choix-note ref="choixNote"></choix-note>
  <choix-nature ref="choixNature"></choix-nature>
  <choix-frais-carte ref="choixFraisCarte"></choix-frais-carte>
</div>

JavaScript

//----------------------Photo Justif------------------------------------
Vue.component('camera',{
	template : `
  <div v-if="active">
  	<input type="file" @change="finalise"></input>
  </div>
  `,
  data(){return {active:false,resolve:null}; },
  methods :{
  	getPhotoJustif(){
    	var me = this;
      me.active = true;
      return new Promise(function(resolve,reject){
				me.resolve = resolve;
      })
    },
    finalise(event){
    	var me = this;
      var file = event.target.files[0]; // FileList object
      var reader = new FileReader();
      reader.onload = function () {
        me.active = false;
        me.resolve(reader.result)
      };
      reader.readAsDataURL(file);
    }
  }
});

//------------------Note-----------------------------------------------
Vue.component('choix-note',{
	template : `<div v-if="active"><h2>Choix Note</h2>
  	<input type="radio" name="idNote" value="1">Note num 1. Note Standard. 1/1/2018</input><br>
  	<input type="radio" name="idNote" value="2">Note num 2. Note Comité de direction. 2/1/2018</input><br>
  	<input type="radio" name="idNote" value="3">Note num 3. Note Standard. 3/1/2018</input><br>
    <input type="button" value="OK" @click="finalise"></input>
  </div>`,
  data(){return {active:false,resolve:null}; },
  methods : {
  	choose(){
    	var me = this;
      me.active = true;
      return new Promise(function(resolve,reject){
				me.resolve = resolve;
      })
    },
    finalise(event){
    	this.active = false;
			return this.resolve(this.picked);
    }
  }
});

//----------------Nature-----------------------------------------------
Vue.component('choix-nature',{
	template : `<div v-if="active"><h2>Choix Nature</h2>
  	<input type="radio" value="1" v-model="picked">Repas midi</input><br>
  	<input type="radio" value="2" v-model="picked">Repas soir</input><br>
  	<input type="radio" value="3" v-model="picked">Invitation</input> <br>
    <input type="button" value="OK" @click="finalise"></input>
  </div>`,
 ...