Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

[guide] mall - Display slots and counters

  • Loading branch information...
commit 0300f052943d1efe42653c96df8c2a512a144f27 1 parent 650875b
@piuccio piuccio authored
View
23 latest/guides/mall/Controller.js
@@ -0,0 +1,23 @@
+Aria.classDefinition({
+ $classpath : "ariadoc.guides.mall.Controller",
+ $extends : "aria.templates.ModuleCtrl",
+ $implements : ["ariadoc.guides.mall.IController"],
+ $dependencies : ["ariadoc.guides.mall.Data"],
+ $prototype : {
+ $publicInterfaceName : "ariadoc.guides.mall.IController",
+
+ init : function (initArgs, callback) {
+ this._data = ariadoc.guides.mall.Data.getViewData();
+
+ // Propagate data change to the template
+ ariadoc.guides.mall.Data.$on({
+ "dataChange" : {
+ fn : this.$raiseEvent,
+ scope : this
+ }
+ });
+
+ this.$callback(callback);
+ }
+ }
+})
View
40 latest/guides/mall/Data.js
@@ -0,0 +1,40 @@
+Aria.classDefinition({
+ $classpath : "ariadoc.guides.mall.Data",
+ $singleton : true,
+ $dependencies : ["ariadoc.guides.mall.Beans", "aria.core.JsonValidator", "ariadoc.guides.mall.Random"],
+ $events : {
+ "dataChange" : "Raised when the data model is updated"
+ },
+ $constructor : function () {
+ var court = {};
+
+ aria.core.JsonValidator.normalize({
+ json : court,
+ beanName : "ariadoc.guides.mall.Beans.Court"
+ });
+
+ court.counters = ariadoc.guides.mall.Random.generateCounters(10);
+ court.slots = ariadoc.guides.mall.Random.generateSlots(10);
+
+ this.internalData = court;
+ },
+ $prototype : {
+ getViewData : function () {
+ var data = this.internalData;
+
+ // Recursive listener on the datamodel
+ aria.utils.Json.addListener(data, null, {
+ fn : this.stateChange,
+ scope : this
+ }, false, true);
+
+ return data;
+ },
+
+ stateChange : function (change) {
+ var counter = change.dataHolder;
+
+ this.$raiseEvent("dataChange");
+ }
+ }
+});
View
7 latest/guides/mall/IController.js
@@ -0,0 +1,7 @@
+Aria.interfaceDefinition({
+ $classpath : "ariadoc.guides.mall.IController",
+ $extends : "aria.templates.IModuleCtrl",
+ $events : {
+ "dataChange" : "Raised when the data model is updated"
+ }
+});
View
122 latest/guides/mall/Main.tpl
@@ -0,0 +1,122 @@
+{Template {
+ $classpath : "ariadoc.guides.mall.Main",
+ $css : ["ariadoc.guides.mall.Style"],
+ $hasScript : true
+}}
+{macro main()}
+ // Slots
+ <div class="court">
+ {foreach slot in data.slots}
+ {call slot(slot) /}
+
+ {if slot_ct === 5}
+ <div class="clear">&nbsp;</div>
+ {/if}
+ {/foreach}
+ </div>
+
+ <div class="clear">&nbsp;</div>
+
+ // Counters
+ {foreach counter in data.counters}
+ {if !counter.slot}
+ {call counter(counter) /}
+ {/if}
+ {/foreach}
+{/macro}
+
+{macro slot(slot)}
+ <div class="slot {if !slot.usable}locked{/if}">
+ Slot ${slot.position}<br>
+
+ {if slot.counter}
+ {call counter(slot.counter)/}
+ {/if}
+ </div>
+{/macro}
+
+{macro counter(counter)}
+ {var width = 100 /}
+ <div class="counter">
+ {@aria:CheckBox {
+ label : "Open",
+ bind : {
+ value : {
+ inside : counter,
+ to : "open"
+ }
+ },
+ block : true
+ }/}
+
+ {@aria:TextField {
+ label : "Type",
+ readOnly : true,
+ value : counter.type,
+ block : true,
+ labelPos : "top",
+ width : width
+ }/}
+
+ {@aria:NumberField {
+ label : "Owners",
+ bind : {
+ value : {
+ inside : counter,
+ to : "owners"
+ }
+ },
+ block : true,
+ labelPos : "top",
+ width : width
+ }/}
+
+ {@aria:NumberField {
+ label : "Employees",
+ bind : {
+ value : {
+ inside : counter,
+ to : "employees"
+ }
+ },
+ block : true,
+ labelPos : "top",
+ width : width
+ }/}
+
+ {@aria:NumberField {
+ label : "Total",
+ bind : {
+ value : {
+ inside : counter,
+ to : "people"
+ }
+ },
+ labelPos : "top",
+ width : width
+ }/}
+
+ {@aria:Select {
+ label : "Slot",
+ value : "" + (counter.slot ? counter.slot.position : -1),
+ options : buildOptions(),
+ labelPos : "top",
+ width : width,
+ bind : {
+ value : {
+ inside : counter,
+ to : "assignedTo",
+ transform : {
+ fromWidget : function (value) {
+ return parseInt(value, 10);
+ },
+ toWidget : function (value) {
+ return "" + value;
+ }
+ }
+ }
+ }
+ }/}
+ </div>
+{/macro}
+{/Template}
View
26 latest/guides/mall/MainScript.js
@@ -0,0 +1,26 @@
+Aria.tplScriptDefinition({
+ $classpath : "ariadoc.guides.mall.MainScript",
+ $prototype : {
+ buildOptions : function () {
+ var options = [{
+ value : "" + -1,
+ label : "Select"
+ }];
+
+ for (var i = 0; i < 10; i += 1) {
+ options.push({
+ value : "" + i,
+ label : "Slot " + i
+ });
+ }
+
+ return options;
+ },
+
+ onModuleEvent : function (evt) {
+ if (evt.name === "dataChange") {
+ this.$refresh();
+ }
+ }
+ }
+})
View
78 latest/guides/mall/Random.js
@@ -0,0 +1,78 @@
+Aria.classDefinition({
+ $classpath : "ariadoc.guides.mall.Random",
+ $singleton : true,
+ $dependencies : ["ariadoc.guides.mall.Beans"],
+ $prototype : {
+ types : ["thai", "french", "italian", "pizza", "fast food", "chinese", "japanese"],
+
+ bool : function () {
+ return Math.random() > 0.5;
+ },
+
+ integer : function () {
+ return Math.floor(Math.random() * 10) + 1;
+ },
+
+ type : function () {
+ return this.types[Math.floor(Math.random() * this.types.length) % this.types.length];
+ },
+
+ generateCounters : function (size) {
+ var counters = [];
+
+ for (var i = 0; i < size; i += 1) {
+ var counter = {};
+ aria.core.JsonValidator.normalize({
+ json : counter,
+ beanName : "ariadoc.guides.mall.Beans.Counter"
+ });
+
+ counter.open = this.bool();
+ counter.type = this.type();
+ counter.owners = this.integer();
+ counter.employees = this.integer();
+
+ counter.people = counter.owners + counter.employees;
+
+ counters.push(counter);
+ }
+
+ return counters;
+ },
+
+ generateSlots : function (count) {
+ var slots = [];
+
+ for (var i = 0; i < count; i += 1) {
+ var slot = {};
+ aria.core.JsonValidator.normalize({
+ json : slot,
+ beanName : "ariadoc.guides.mall.Beans.Slot"
+ });
+ slot.position = i;
+
+ slots.push(slot);
+ }
+
+ for (var i = 0; i < count; i += 1) {
+ var next = i + 1;
+ if (next % (count / 2) !== 0) {
+ // next one on new line
+ slots[i].neighbours.push(slots[next]);
+ }
+
+ var prev = i - 1;
+ if (i % (count / 2) !== 0) {
+ // this is on new line
+ slots[i].neighbours.push(slots[prev]);
+ }
+
+ var topBottom = (i + (count / 2)) % count;
+ // just because it's on two lines
+ slots[i].neighbours.push(slots[topBottom]);
+ }
+
+ return slots;
+ }
+ }
+})
View
37 latest/guides/mall/Style.tpl.css
@@ -0,0 +1,37 @@
+{CSSTemplate {
+ $classpath : "ariadoc.guides.mall.Style"
+}}
+{macro main()}
+.court {
+ position : relative;
+ padding : 10px;
+}
+
+.clear {
+ clear : both;
+ position : relative;
+}
+
+.slot {
+ float: left;
+ width : 150px;
+ height : 300px;
+ border : 1px solid #868585;
+ margin-left : 10px;
+ background-color: #ebebeb;
+}
+
+.locked {
+ background-color : #ccc;
+}
+
+.counter {
+ float: left;
+ width: 110px;
+ border: 1px solid #774F38;
+ margin: 9px;
+ padding: 10px;
+ background-color : #C5E0DC;
+}
+{/macro}
+{/CSSTemplate}
View
35 latest/guides/mall/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>Aria Templates</title>
+
+ <script type="text/javascript">
+ Aria = {
+ debug : true
+ };
+ </script>
+
+ <script type="text/javascript" src="/aria-templates/aria/aria-templates-1.3.1.js"></script>
+ <script type="text/javascript" src="/aria-templates/aria/css/atskin-1.3.1.js"></script>
+</head>
+<body>
+
+<div id="container"></div>
+
+<script type="text/javascript">
+
+Aria.loadTemplate({
+ div : "container",
+ classpath : "ariadoc.guides.mall.Main",
+ moduleCtrl : {
+ classpath : "ariadoc.guides.mall.Controller"
+ }
+});
+
+</script>
+
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.