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>