Home.html

<template id="home">
   <div>
       <h2>This is Home</h2>
  </div>
</template>
<script>
LotteryVue.Components.Home = Vue.extend({
    template: "#home",
    data: function() {
        return {
        }
    },
    computed: {
    },
    mounted : function() {
    },
    methods: {
    }
});
</script>

Lottery List.html

 <template id="lottery_list">
           <div>
             <h2>This is lottery List</h2>
          </div>
        </template>
        <script>
        LotteryVue.Components.LotteryList = Vue.extend({
            template: "#lottery_list",
            data: function() {
                return {
                }
            },
            computed: {
            },
            mounted : function() {
            },
            methods: {
            }
        });
</script>

Main.html

     <template id="app-template">
<div>
    <div><my-header></my-header></div>
    <div class="container" style="margin-top:80px"><router-view> </router-view></div>
    <div><my-footer></my-footer></div>
        </div>
     </template>
     <script>

     /* store definition
     var store = new Vuex.Store({
       state:   com.metastay.lotteryvue.store.StateInit().init(),
       mutations:  new com.metastay.lotteryvue.store.Mutations()
     })
     */

     var router = new VueRouter({
        routes: routes
     })
     Vue.use(VeeValidate)
     var App = new Vue({
         el: '#app',
         template: '#app-template',
         components: {
          'my-header': LotteryVue.Components.Header,
          'my-footer': LotteryVue.Components.Footer
       },
     //    store : store,
         router : router
     })
     </script>

Lottery Actions

package com.metastay.lotteryvue.actions

import com.iteration3.smilejs._
import com.iteration3.smilejs.util.{Toastr, VueRouter}

import scala.scalajs.js
import scala.scalajs.js.UndefOr
import scala.scalajs.js.{Array => JsArray, Date => JsDate}
import scala.scalajs.js.annotation.{JSExport, JSExportAll, ScalaJSDefined}
import scala.scalajs.js.JSConverters._
import scala.concurrent.ExecutionContext.Implicits.global
import com.iteration3.smilejs.{ClientErrors, ClientExceptions}
import com.metastay.lotteryvue.bus.LotteryBus
import com.metastay.lotteryvue.data.{LotteryDetails, LotteryForm}
import com.metastay.lotteryvue.service.lotteryreader.LotteryReaderBackend
import com.metastay.lotteryvue.service.lotterywriter.{AddParticipant, CreateLottery, LotteryWriterBackend, Run}


object LotteryActionsCode {
    def loadLotteryList: () => Unit = { () =>
        LotteryReaderBackend.lotteryList().onSuccess {
            case (xhr, Right(output)) =>
                val lotteryDetailsList: JsArray[LotteryDetails] = output.map(o => LotteryDetails.fromDynamic(o.toJson)).toJSArray
                LotteryBus.emitLotteryListAvailable(lotteryDetailsList)
            case (xhr, Left(error)) =>
                error match {
                    case ClientErrors(list) => Toastr.error(list.map(_.message).mkString("\n"));
                    case ClientExceptions(list) => Toastr.error("Error : " + list.map(_.message).mkString("\n"));
                    case _ => ;
                }
        }
    }
    def createLottery:  (LotteryForm) => Unit = { (lotteryForm:LotteryForm) =>
        val input = CreateLottery.Input.fromJson(lotteryForm.toJson)
        LotteryWriterBackend.createLottery(input).onSuccess {
            case (xhr, Right(output)) =>
                VueRouter.name("lotteryList").push()
                Toastr.success("Lottery Created");
            case (xhr, Left(error)) =>
                error match {
                    case ClientErrors(list) => Toastr.error(list.map(_.message).mkString("\n"));
                    case ClientExceptions(list) => Toastr.error("Error : " + list.map(_.message).mkString("\n"));
                    case _ => ;
                }
        }
    }
    def loadLotteryDetails:  (String) => Unit = { (lotteryName:String) =>
        val input = com.metastay.lotteryvue.service.lotteryreader.LotteryDetails.Input(lotteryName)
        LotteryReaderBackend.lotteryDetails(input).onSuccess {
            case (xhr, Right(output)) =>
                val lotteryDetails: LotteryDetails = LotteryDetails.fromDynamic(output.toJson)
                LotteryBus.emitLotteryDetailsAvailable(lotteryDetails)
            case (xhr, Left(error)) =>
                error match {
                    case ClientErrors(list) => Toastr.error(list.map(_.message).mkString("\n"));
                    case ClientExceptions(list) => Toastr.error("Error : " + list.map(_.message).mkString("\n"));
                    case _ => ;
                }
        }
    }
    def addParticipant:  (String,String) => Unit = { (lotteryName:String,participantName:String) =>
        val input = AddParticipant.Input(lotteryName,participantName)
        LotteryWriterBackend.addParticipant(input).onSuccess {
            case (xhr, Right(output)) =>
                loadLotteryDetails(lotteryName)
                Toastr.success("Participant Added");
            case (xhr, Left(error)) =>
                error match {
                    case ClientErrors(list) => Toastr.error(list.map(_.message).mkString("\n"));
                    case ClientExceptions(list) => Toastr.error("Error : " + list.map(_.message).mkString("\n"));
                    case _ => ;
                }
        }
    }
    def runLottery:  (String) => Unit = { (lotteryName:String) =>
        val input = Run.Input(lotteryName)
        LotteryWriterBackend.run(input).onSuccess {
            case (xhr, Right(output)) =>
                loadLotteryDetails(lotteryName)
                Toastr.success("Lottery ran successfully");
            case (xhr, Left(error)) =>
                error match {
                    case ClientErrors(list) => Toastr.error(list.map(_.message).mkString("\n"));
                    case ClientExceptions(list) => Toastr.error("Error : " + list.map(_.message).mkString("\n"));
                    case _ => ;
                }
        }
    }
}

Improved Lottery List

<template id="lottery_list">
        <div>
     <h2>This is lottery List</h2>
       <legend>Lotteries</legend>
       <bootstrap-grid
               id="table1"
               :grid-data="lotteryList"
               :grid-columns="columns"
               :grid-height="400"
               :grid-pagination="false">
       </bootstrap-grid>
          </div>
        </template>
        <script>
        LotteryVue.Components.LotteryList = Vue.extend({
            template: "#lottery_list",
            data: function() {
                return {
                lotteryList: [],
                columns: [
                        {
                            field: 'lotteryName',
                            title: 'Lottery Name',
                            formatter: this.navigateToLottery
                       },{
                            field: 'amount',
                            title: 'Amount'
                        },
                        {
                            field: 'status',
                            title: 'Status'
                        }
                    ]
              }
            },
            created : function() {
                 var vm = this
                 LotteryVue.LotteryBus.onLotteryListAvailable(function(dataList) {
                     vm.lotteryList =  dataList
                 });

            },
            computed: {
            },
            mounted : function() {
                LotteryVue.LotteryActions.loadLotteryList();
            },
            methods: {
                navigateToLottery: function(value, row, index) {
                        return '<a href="#/lottery-details/'+row.lotteryName+'">' + value + '</a>';
        }
         }
        });
</script>

Improved Create Lottery

    <template id="create_lottery">
<div class="col-md-6">
    <smile-form ref="lotteryFormRef" id="lotteryForm" :form-schema="lotteryFormSchema" form-name="lotteryFormName"
             v-model="lotteryForm" form-class="form-horizontal">
                        <a class="btn btn-primary" @click="submit">Create</a>
                        <router-link class="btn btn-primary" :to="{ name: 'lotteryList'}">Cancel</router-link>
              </smile-form>
</div>
            </template>
            <script>
            LotteryVue.Components.CreateLottery = Vue.extend({
                template: "#create_lottery",
                data: function() {
                    return {
                        lotteryForm : LotteryVue.LotteryFormData.createNew(),
                        lotteryFormSchema : LotteryVue.LotteryFormData.schemaInfo()
                    }
                },
                computed: {
                },
                mounted : function() {
                },
                methods: {
                    submit: function() {
                        var vm  = this
                        this.$refs.lotteryFormRef.validate(
                            function(){
                               LotteryVue.LotteryActions.createLottery(vm.lotteryForm);
                                toastr["success"]("Form Submitted Successfully");
                            }
                        )
                    }
                }
            });
    </script>

Improved Lottery Details

<template id="lottery_details">
    <div class="col-md-12">
        <legend>Lottery Details</legend>
        <display :data="lotteryDetails" id="lotteryDetails" ></display>
        <div class="form-group  col-md-8">
            <label class="control-label">Participant Name</label>
            <input type="text" v-model="partName"  id="partName">
        </div>
        <a class="btn btn-primary" @click="addParticipant">Add Participant</a>
        <a class="btn btn-primary" @click="runLottery">Run Lottery</a>
    </div>
</template>
<script>
LotteryVue.Components.LotteryDetails = Vue.extend({
    template: "#lottery_details",
    data: function() {
        return {
            lotteryName: this.$route.params.lotteryName,
            lotteryDetails:{},
            partName:""
        }
    },
    computed: {
    },
    created : function() {
         var vm = this
         LotteryVue.LotteryBus.onLotteryDetailsAvailable(function(data) {
             vm.lotteryDetails =  data
         });
    },
    mounted : function() {
        LotteryVue.LotteryActions.loadLotteryDetails(this.lotteryName)
    },
    methods: {
        addParticipant:function(){
            var vm = this
            LotteryVue.LotteryActions.addParticipant(vm.lotteryName,vm.partName)
            vm.partName = "";
        },
        runLottery:function(){
            var vm = this
            LotteryVue.LotteryActions.runLottery(vm.lotteryName)
        }
    }
});
</script>