@webos-tools/cli 3.1.2 → 3.2.0

package/files/templates/signage-sdk-templates/Price_Board_for_QSR/css/styles.css

@@ -0,0 +1,163 @@
+/**
+ *HTML5 CSS RESET
+ */
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    background: transparent;
+}
+body {
+    line-height: 1;
+}
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+nav ul {
+    list-style: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+/* change border colour if Required */
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 2px solid black;
+    margin: 0 2%;
+    padding: 0;
+}
+/**
+ *Page css
+ */
+
+@font-face {
+    font-family: 'MS300';
+    src: url('../fonts/MuseoSans300.otf');
+}
+@font-face {
+    font-family: 'MS500';
+    src: url('../fonts/MuseoSans500.otf');
+}
+@font-face {
+    font-family: 'MS700';
+    src: url('../fonts/MuseoSans700.otf');
+}
+@font-face {
+    font-family: 'MSI700';
+    src: url('../fonts/MuseoSans700Italic.otf');
+}
+html, body {
+    width: 1920px;
+    height: 1080px;
+    color: black;
+    background: white;
+}
+header {
+    width: 1920px;
+    height: 120px;
+    background: #a10910;
+    position: relative;
+}
+.wrapper {
+    width: 1815px;
+    height: 900px;
+    background: #ffffff;
+    margin: 60px 0px 0px 105px;
+}
+.topBg {
+    width: 335px;
+    height: 120px;
+}
+.logo {
+    width: 100px;
+    height: 120px;
+    position: absolute;
+    left: 41px;
+}
+.hdrTitle {
+    font-size: 66px;
+    text-align: left;
+    color: #ffffff;
+    width: 595px;
+    position: absolute;
+    left: 166px;
+    top: 31px;
+    font-family: 'MS500';
+}
+.hdrContent {
+    font-size: 32px;
+    text-align: left;
+    color: #eedede;
+    position: absolute;
+    left: 761px;
+    top: 36px;
+    font-family: 'MS300';
+}
+.wrapper section {
+    width: 589px;
+    height: 885px;
+    float: left;
+}
+.wrpContent {
+    width: 589px;
+    height: 295px;
+}
+.wrpContent img {
+    width: 250px;
+    float: left;
+}
+.contentInfo {
+    margin-left: 25px;
+    width: 314px;
+    height: 295px;
+    float: left;
+}
+.burgerTitleLar {
+    width: 314px;
+    height: 49px;
+    margin-top: 45px;
+    font-size: 42px;
+    color: #b71219;
+    font-family: 'MS700';
+}
+.burgerTitleMid {
+    width: 314px;
+    height: 78px;
+    margin-top: 16px;
+    font-size: 30px;
+    color: #b71219;
+    font-family: 'MS700';
+}
+.contentInfo label {
+    display: inline-block;
+    height: 57px;
+    width: 114px;
+    font-size: 20px;
+    color: #714e50;
+    font-family: 'MS300';
+}
+.contentInfo table {
+    height: 144px;
+    width: 314px;
+    font-size: 20px;
+    text-align: left;
+    color: #714e50;
+    font-family: 'MS500';
+}
+.contentInfo table tr:first-child {
+    height: 35px;
+}
+.contentInfo table td:first-child {
+    width: 114px;
+}
+.contentInfo table td:last-child {
+    width: 200px;
+}

package/files/templates/signage-sdk-templates/Price_Board_for_QSR/data/data.json

@@ -0,0 +1,92 @@
+{
+    "headerInfo": {
+        "headerBG": "res/images/tpl_04_bg_top.png",
+        "headerLogo": "res/images/tpl_04_logo.png",
+        "headerTitle": "TITLE TEXT",
+        "headerContent": "CATCHPHRASE"
+    },
+    "menuData": {
+        "firstItem": {
+            "image": "res/images/tpl_04_img_menu_01.png",
+            "title": "TITLE1",
+            "extraInfo": "CONTENT1",
+            "itemName": "CONTENT2",
+            "itemValue": "CONTENT2-1",
+            "optionName": "CONTENT3",
+            "optionValue": "CONTENT3-1"
+        },
+        "secondItem": {
+            "image": "res/images/tpl_04_img_menu_02.png",
+            "title": "TITLE1",
+            "extraInfo": "CONTENT1",
+            "itemName": "CONTENT2",
+            "itemValue": "CONTENT2-1",
+            "optionName": "CONTENT3",
+            "optionValue": "CONTENT3-1"
+        },
+        "thirdItem": {
+            "image": "res/images/tpl_04_img_menu_03.png",
+            "title": "TITLE1",
+            "extraInfo": "CONTENT1",
+            "itemName": "CONTENT2",
+            "itemValue": "CONTENT2-1",
+            "optionName": "CONTENT3",
+            "optionValue": "CONTENT3-1"
+        },
+        "fourthItem": {
+            "image": "res/images/tpl_04_img_menu_04.png",
+            "title": "TITLE1",
+            "extraInfo": "CONTENT1",
+            "itemName": "CONTENT2",
+            "itemValue": "CONTENT2-1",
+            "optionName": "CONTENT3",
+            "optionValue": "CONTENT3-1"
+        },
+        "fifthItem": {
+            "image": "res/images/tpl_04_img_menu_05.png",
+            "title": "TITLE1",
+            "extraInfo": "CONTENT1",
+            "itemName": "CONTENT2",
+            "itemValue": "CONTENT2-1",
+            "optionName": "CONTENT3",
+            "optionValue": "CONTENT3-1"
+        },
+        "sixthItem": {
+            "image": "res/images/tpl_04_img_menu_06.png",
+            "title": "TITLE1",
+            "extraInfo": "CONTENT1",
+            "itemName": "CONTENT2",
+            "itemValue": "CONTENT2-1",
+            "optionName": "CONTENT3",
+            "optionValue": "CONTENT3-1"
+        },
+        "seventhItem": {
+            "image": "res/images/tpl_04_img_menu_07.png",
+            "title": "TITLE1",
+            "extraInfo": "CONTENT1",
+            "itemName": "CONTENT2",
+            "itemValue": "CONTENT2-1",
+            "optionName": "CONTENT3",
+            "optionValue": "CONTENT3-1"
+        },
+        "eighthItem": {
+            "image": "res/images/tpl_04_img_menu_08.png",
+             "title": "TITLE1",
+            "extraInfo": "CONTENT1",
+            "itemName": "CONTENT2",
+            "itemValue": "CONTENT2-1",
+            "optionName": "CONTENT3",
+            "optionValue": "CONTENT3-1"
+        },
+        "ninthItem": {
+            "image": "res/images/tpl_04_img_menu_09.png",
+            "title": "TITLE1",
+            "extraInfo": "CONTENT1",
+            "itemName": "CONTENT2",
+            "itemValue": "CONTENT2-1",
+            "optionName": "CONTENT3",
+            "optionValue": "CONTENT3-1"
+        }
+    }
+
+}

package/files/templates/signage-sdk-templates/Price_Board_for_QSR/index.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Digital Signage priceBoard</title>
+
+    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+
+    <!-- CSS Files -->
+    <link rel='stylesheet' type='text/css' href='css/styles.css'>
+
+</head>
+
+<body>
+    <!-- 
+		data-bind-*(Ex:data-bind-AppFour) is a custom attribute, which represents data source.
+		Multiple data sources can be bound by changing the * value with dataSource name.
+		
+		`startersTitle`, `starters`,`mainMealsTitle` ... are the attributes or properties inside a data source.
+	-->
+
+    <header>
+        <img class='topBg' data-bind-appFour='headerBgImg' />
+        <img class='logo' data-bind-appFour='headerLogoImg' />
+        <h1 class='hdrTitle' data-bind-appFour='headerTitle'></h1>
+        <p class='hdrContent' data-bind-appFour='headerContent'></p>
+    </header>
+    <article class='wrapper'>
+        <section>
+            <article class='wrpContent'>
+                <img data-bind-appFour='firstItemImage' />
+                <div class='contentInfo'>
+                    <p class='burgerTitleLar' data-bind-appFour='firstItemTitle'></p>
+                    <label data-bind-appFour='firstItemextraInfo'></label>
+                    <table>
+                        <tr>
+                            <td data-bind-appFour='firstItemItemName'></td>
+                            <td data-bind-appFour='firstItemItemValue'></td>
+                        </tr>
+                        <tr>
+                            <td data-bind-appFour='firstItemOptionName'></td>
+                            <td data-bind-appFour='firstItemOptionValue'></td>
+                        </tr>
+                    </table>
+                </div>
+            </article>
+            <article class='wrpContent'>
+                <img data-bind-appFour='secondItemImage' />
+                <div class='contentInfo'>
+                    <p class='burgerTitleMid' data-bind-appFour='secondItemTitle'></p>
+                    <label data-bind-appFour='secondItemextraInfo'></label>
+                    <table>
+                        <tr>
+                            <td data-bind-appFour='secondItemItemName'></td>
+                            <td data-bind-appFour='secondItemItemValue'></td>
+                        </tr>
+                        <tr>
+                            <td data-bind-appFour='secondItemOptionName'></td>
+                            <td data-bind-appFour='secondItemOptionValue'></td>
+                        </tr>
+                    </table>
+                </div>
+            </article>
+            <article class='wrpContent'>
+                <img data-bind-appFour='thirdItemImage' />
+                <div class='contentInfo'>
+                    <p class='burgerTitleMid' data-bind-appFour='thirdItemTitle'></p>
+                    <label data-bind-appFour='thirdItemextraInfo'></label>
+                    <table>
+                        <tr>
+                            <td data-bind-appFour='firstItemItemName'></td>
+                            <td data-bind-appFour='thirdItemItemValue'></td>
+                        </tr>
+                        <tr>
+                            <td data-bind-appFour='thirdItemOptionName'></td>
+                            <td data-bind-appFour='thirdItemOptionValue'></td>
+                        </tr>
+                    </table>
+                </div>
+            </article>
+        </section>
+        <section>
+            <article class='wrpContent'>
+                <img data-bind-appFour='fourthItemImage' />
+                <div class='contentInfo'>
+                    <p class='burgerTitleMid' data-bind-appFour='fourthItemTitle'></p>
+                    <label data-bind-appFour='fourthItemextraInfo'></label>
+                    <table>
+                        <tr>
+                            <td data-bind-appFour='fourthItemItemName'></td>
+                            <td data-bind-appFour='fourthItemItemValue'></td>
+                        </tr>
+                        <tr>
+                            <td data-bind-appFour='fourthItemOptionName'></td>
+                            <td data-bind-appFour='fourthItemOptionValue'></td>
+                        </tr>
+                    </table>
+                </div>
+            </article>
+            <article class='wrpContent'>
+                <img data-bind-appFour='fifthItemImage' />
+                <div class='contentInfo'>
+                    <p class='burgerTitleMid' data-bind-appFour='fifthItemTitle'></p>
+                    <label data-bind-appFour='fifthItemextraInfo'></label>
+                    <table>
+                        <tr>
+                            <td data-bind-appFour='fifthItemItemName'></td>
+                            <td data-bind-appFour='fifthItemItemValue'></td>
+                        </tr>
+                        <tr>
+                            <td data-bind-appFour='fifthItemOptionName'></td>
+                            <td data-bind-appFour='fifthItemOptionValue'></td>
+                        </tr>
+                    </table>
+                </div>
+            </article>
+            <article class='wrpContent'>
+                <img data-bind-appFour='sixthItemImage' />
+                <div class='contentInfo'>
+                    <p class='burgerTitleMid' data-bind-appFour='sixthItemTitle'></p>
+                    <label data-bind-appFour='sixthItemextraInfo'></label>
+                    <table>
+                        <tr>
+                            <td data-bind-appFour='sixthItemItemName'></td>
+                            <td data-bind-appFour='sixthItemItemValue'></td>
+                        </tr>
+                        <tr>
+                            <td data-bind-appFour='sixthItemOptionName'></td>
+                            <td data-bind-appFour='sixthItemOptionValue'></td>
+                        </tr>
+                    </table>
+                </div>
+            </article>
+        </section>
+        <section>
+            <article class='wrpContent'>
+                <img data-bind-appFour='seventhItemImage' />
+                <div class='contentInfo'>
+                    <p class='burgerTitleLar' data-bind-appFour='seventhItemTitle'></p>
+                    <label data-bind-appFour='seventhItemextraInfo'></label>
+                    <table>
+                        <tr>
+                            <td data-bind-appFour='seventhItemItemName'></td>
+                            <td data-bind-appFour='seventhItemItemValue'></td>
+                        </tr>
+                        <tr>
+                            <td data-bind-appFour='seventhItemOptionName'></td>
+                            <td data-bind-appFour='seventhItemOptionValue'></td>
+                        </tr>
+                    </table>
+                </div>
+            </article>
+            <article class='wrpContent'>
+                <img data-bind-appFour='eighthItemImage' />
+                <div class='contentInfo'>
+                    <p class='burgerTitleMid' data-bind-appFour='eighthItemTitle'></p>
+                    <label data-bind-appFour='eighthItemextraInfo'></label>
+                    <table>
+                        <tr>
+                            <td data-bind-appFour='eighthItemItemName'></td>
+                            <td data-bind-appFour='eighthItemItemValue'></td>
+                        </tr>
+                        <tr>
+                            <td data-bind-appFour='eighthItemOptionName'></td>
+                            <td data-bind-appFour='eighthItemOptionValue'></td>
+                        </tr>
+                    </table>
+                </div>
+            </article>
+            <article class='wrpContent'>
+                <img data-bind-appFour='ninthItemImage' />
+                <div class='contentInfo'>
+                    <p class='burgerTitleLar' data-bind-appFour='ninthItemTitle'></p>
+                    <label data-bind-appFour='ninthItemextraInfo'></label>
+                    <table>
+                        <tr>
+                            <td data-bind-appFour='ninthItemItemName'></td>
+                            <td data-bind-appFour='ninthItemItemValue'></td>
+                        </tr>
+                        <tr>
+                            <td data-bind-appFour='ninthItemOptionName'></td>
+                            <td data-bind-appFour='ninthItemOptionValue'></td>
+                        </tr>
+                    </table>
+                </div>
+            </article>
+        </section>
+    </article>
+
+    <!-- Script Files -->
+    <script src='js/helpers/util.js'></script>
+    <script src='js/controller.js'></script>
+
+</body>
+
+</html>

package/files/templates/signage-sdk-templates/Price_Board_for_QSR/js/controller.js

@@ -0,0 +1,158 @@
+/*jslint browser:true, indent: 4 */
+/*global console, BindClass */
+
+/**
+ * @file 'appFour' represents one source of data.
+ * Whenever a change occurs in this app, associated data attributes shall be updated.
+ * In one page we can have multiple sources like 'appOne' which represents multiple data sources.
+ * But everything has to be instantiated using BindClass.
+ * 
+ * Manages the configuration of this HTML application. 
+ * Loads JSON data into application to bind the data to the View(HTML page).
+ * @author CSP-1
+ */
+
+/** @module ApplicationFour */
+var ApplicationFour = (function () {
+    'use strict';
+    /**
+     * @constructor App
+     * @property {Object} info Data Binding Object.
+     */
+    var App = function () {
+        this.info = new BindClass('appFour');
+    };
+     /**
+     * Represents a bindingInstance. 
+     * Data is bound using the `set()` method to a view (Html page).</br>
+     * @example
+     * 
+     * Example: this.info.set('headerLogoImg', headerData.headerLogo);</br>
+     * It updates the bindings which has data attribute `headerLogoImg` in respected View(Html page).
+     * This will be an instance member, App#getSetConstructor.
+     * @memberof App.prototype
+     * @param {Object} dataArray - data to set the bindings.
+     */
+    App.prototype.getSetConstructor = function (dataArray) {
+        var headerData = dataArray.headerInfo,
+            menuInfoData = dataArray.menuData;
+        //Header Info
+        this.info.set('headerBgImg', headerData.headerBG);
+        this.info.set('headerLogoImg', headerData.headerLogo);
+        this.info.set('headerTitle', headerData.headerTitle);
+        this.info.set('headerContent', headerData.headerContent);
+
+        //MenuData firstItem
+        this.info.set('firstItemImage', menuInfoData.firstItem.image);
+        this.info.set('firstItemTitle', menuInfoData.firstItem.title);
+        this.info.set('firstItemextraInfo', menuInfoData.firstItem.extraInfo);
+        this.info.set('firstItemItemName', menuInfoData.firstItem.itemName);
+        this.info.set('firstItemItemValue', menuInfoData.firstItem.itemValue);
+        this.info.set('firstItemOptionName', menuInfoData.firstItem.optionName);
+        this.info.set('firstItemOptionValue', menuInfoData.firstItem.optionValue);
+
+        //MenuData SecondItem
+        this.info.set('secondItemImage', menuInfoData.secondItem.image);
+        this.info.set('secondItemTitle', menuInfoData.secondItem.title);
+        this.info.set('secondItemextraInfo', menuInfoData.secondItem.extraInfo);
+        this.info.set('secondItemItemName', menuInfoData.secondItem.itemName);
+        this.info.set('secondItemItemValue', menuInfoData.secondItem.itemValue);
+        this.info.set('secondItemOptionName', menuInfoData.secondItem.optionName);
+        this.info.set('secondItemOptionValue', menuInfoData.secondItem.optionValue);
+
+        //MenuData ThirdItem
+        this.info.set('thirdItemImage', menuInfoData.thirdItem.image);
+        this.info.set('thirdItemTitle', menuInfoData.thirdItem.title);
+        this.info.set('thirdItemextraInfo', menuInfoData.thirdItem.extraInfo);
+        this.info.set('thirdItemItemName', menuInfoData.thirdItem.itemName);
+        this.info.set('thirdItemItemValue', menuInfoData.thirdItem.itemValue);
+        this.info.set('thirdItemOptionName', menuInfoData.thirdItem.optionName);
+        this.info.set('thirdItemOptionValue', menuInfoData.thirdItem.optionValue);
+
+        //MenuData FourthItem
+        this.info.set('fourthItemImage', menuInfoData.fourthItem.image);
+        this.info.set('fourthItemTitle', menuInfoData.fourthItem.title);
+        this.info.set('fourthItemextraInfo', menuInfoData.fourthItem.extraInfo);
+        this.info.set('fourthItemItemName', menuInfoData.fourthItem.itemName);
+        this.info.set('fourthItemItemValue', menuInfoData.fourthItem.itemValue);
+        this.info.set('fourthItemOptionName', menuInfoData.fourthItem.optionName);
+        this.info.set('fourthItemOptionValue', menuInfoData.fourthItem.optionValue);
+
+        //MenuData FifthItem
+        this.info.set('fifthItemImage', menuInfoData.fifthItem.image);
+        this.info.set('fifthItemTitle', menuInfoData.fifthItem.title);
+        this.info.set('fifthItemextraInfo', menuInfoData.fifthItem.extraInfo);
+        this.info.set('fifthItemItemName', menuInfoData.fifthItem.itemName);
+        this.info.set('fifthItemItemValue', menuInfoData.fifthItem.itemValue);
+        this.info.set('fifthItemOptionName', menuInfoData.fifthItem.optionName);
+        this.info.set('fifthItemOptionValue', menuInfoData.fifthItem.optionValue);
+
+        //MenuData SixthItem
+        this.info.set('sixthItemImage', menuInfoData.sixthItem.image);
+        this.info.set('sixthItemTitle', menuInfoData.sixthItem.title);
+        this.info.set('sixthItemextraInfo', menuInfoData.sixthItem.extraInfo);
+        this.info.set('sixthItemItemName', menuInfoData.sixthItem.itemName);
+        this.info.set('sixthItemItemValue', menuInfoData.sixthItem.itemValue);
+        this.info.set('sixthItemOptionName', menuInfoData.sixthItem.optionName);
+        this.info.set('sixthItemOptionValue', menuInfoData.sixthItem.optionValue);
+
+
+        //MenuData SeventhItem
+        this.info.set('seventhItemImage', menuInfoData.seventhItem.image);
+        this.info.set('seventhItemTitle', menuInfoData.seventhItem.title);
+        this.info.set('seventhItemextraInfo', menuInfoData.seventhItem.extraInfo);
+        this.info.set('seventhItemItemName', menuInfoData.seventhItem.itemName);
+        this.info.set('seventhItemItemValue', menuInfoData.seventhItem.itemValue);
+        this.info.set('seventhItemOptionName', menuInfoData.seventhItem.optionName);
+        this.info.set('seventhItemOptionValue', menuInfoData.seventhItem.optionValue);
+
+        //MenuData EighthItem
+        this.info.set('eighthItemImage', menuInfoData.eighthItem.image);
+        this.info.set('eighthItemTitle', menuInfoData.eighthItem.title);
+        this.info.set('eighthItemextraInfo', menuInfoData.eighthItem.extraInfo);
+        this.info.set('eighthItemItemName', menuInfoData.eighthItem.itemName);
+        this.info.set('eighthItemItemValue', menuInfoData.eighthItem.itemValue);
+        this.info.set('eighthItemOptionName', menuInfoData.eighthItem.optionName);
+        this.info.set('eighthItemOptionValue', menuInfoData.eighthItem.optionValue);
+
+        //MenuData NinthItem
+        this.info.set('ninthItemImage', menuInfoData.ninthItem.image);
+        this.info.set('ninthItemTitle', menuInfoData.ninthItem.title);
+        this.info.set('ninthItemextraInfo', menuInfoData.ninthItem.extraInfo);
+        this.info.set('ninthItemItemName', menuInfoData.ninthItem.itemName);
+        this.info.set('ninthItemItemValue', menuInfoData.ninthItem.itemValue);
+        this.info.set('ninthItemOptionName', menuInfoData.ninthItem.optionName);
+        this.info.set('ninthItemOptionValue', menuInfoData.ninthItem.optionValue);
+    };
+    /**
+     * Represents a Ajax Request.
+     * This will be an instance member, App#reqMethod.
+     * @memberof App.prototype
+     * @param {string} method - method of the request.
+     * @param {string} url - The URL of the request.
+     */
+    App.prototype.reqMethod = function (method, url) {
+        try {
+            var req = new XMLHttpRequest(),
+                dataset = "",
+                that = this;
+
+            req.open(method, url, false);
+            req.onload = function () {
+                dataset = JSON.parse(req.responseText);
+                that.getSetConstructor(dataset);
+            };
+            req.onerror = function () {
+                throw 'Cannot load file ' + url;
+            };
+            req.send();
+
+        } catch (e) {
+            console.log('%c Error: Issue in js/controller.js/reqMethod -- ' + e.message, 'background-color:red;color:white;');
+        }
+    };
+    return App;
+}());
+
+var appInstance = new ApplicationFour();
+appInstance.reqMethod('GET', 'data/data.json');