From 231321f8475c72a9b253b71ca7f99f2745e44535 Mon Sep 17 00:00:00 2001 From: Seshu-Kumar-M Date: Sat, 11 Feb 2017 03:06:54 +0530 Subject: Client framework usage guide Client framework usage guide. Issue-Id : CLIENT-163 Change-Id: Id5acaa5b3ee3f62279d3bdcb98558a1c2984cf69 Signed-off-by: Seshu-Kumar-M --- .../src/main/webapp/usageguide/browser/index.html | 52 + .../src/main/webapp/usageguide/browser/js/app.js | 1484 ++++++++++++++++++++ .../src/main/webapp/usageguide/browser/js/rest.js | 150 ++ .../usageguide/browser/templates/accordion.html | 46 + .../usageguide/browser/templates/buttons.html | 130 ++ .../usageguide/browser/templates/checkBoxes.html | 60 + .../usageguide/browser/templates/courses.html | 32 + .../usageguide/browser/templates/dropdown.html | 83 ++ .../usageguide/browser/templates/functional.html | 48 + .../webapp/usageguide/browser/templates/home.html | 159 +++ .../webapp/usageguide/browser/templates/label.html | 94 ++ .../webapp/usageguide/browser/templates/list.html | 93 ++ .../webapp/usageguide/browser/templates/login.html | 40 + .../usageguide/browser/templates/management.html | 173 +++ .../usageguide/browser/templates/notification.html | 48 + .../usageguide/browser/templates/radioButtons.html | 58 + .../usageguide/browser/templates/register.html | 47 + .../webapp/usageguide/browser/templates/table.html | 90 ++ .../webapp/usageguide/browser/templates/tabs.html | 53 + .../usageguide/browser/templates/textarea.html | 150 ++ .../webapp/usageguide/browser/templates/tree.html | 41 + .../usageguide/browser/templates/verticalTab.html | 47 + 22 files changed, 3178 insertions(+) create mode 100644 common/src/main/webapp/usageguide/browser/index.html create mode 100644 common/src/main/webapp/usageguide/browser/js/app.js create mode 100644 common/src/main/webapp/usageguide/browser/js/rest.js create mode 100644 common/src/main/webapp/usageguide/browser/templates/accordion.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/buttons.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/checkBoxes.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/courses.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/dropdown.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/functional.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/home.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/label.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/list.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/login.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/management.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/notification.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/radioButtons.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/register.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/table.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/tabs.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/textarea.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/tree.html create mode 100644 common/src/main/webapp/usageguide/browser/templates/verticalTab.html (limited to 'common/src/main/webapp/usageguide/browser') diff --git a/common/src/main/webapp/usageguide/browser/index.html b/common/src/main/webapp/usageguide/browser/index.html new file mode 100644 index 00000000..891ae0e2 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/index.html @@ -0,0 +1,52 @@ + + + + + + + + + Usage Guide + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/common/src/main/webapp/usageguide/browser/js/app.js b/common/src/main/webapp/usageguide/browser/js/app.js new file mode 100644 index 00000000..75c95fed --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/js/app.js @@ -0,0 +1,1484 @@ +/* + + Copyright 2017, Huawei Technologies Co., Ltd. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +*/ + + +var app = angular.module("POCApp", ["ui.router", "ngTable"]) + + /*.run(function($rootScope, $location, $state, LoginService) { + $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){ + if (toState.authenticate && !LoginService.isAuthenticated()){ + // User isn’t authenticated + $state.transitionTo("login"); + event.preventDefault(); + } + }); + })*/ + .config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){ + //$routeProvider.caseInsensitiveMatch = true; + $urlMatcherFactoryProvider.caseInsensitive(true); + $urlRouterProvider.otherwise('/login'); + //$locationProvider.html5Mode(true).hashPrefix('!'); + $stateProvider + .state('login', { + url : '/login', + templateUrl : 'templates/login.html', + controller : 'LoginController', + authenticate: false + }) + .state('register', { + url : '/register', + templateUrl : 'templates/register.html', + controller : 'registerController', + authenticate: false + }) + .state("home", { + url: "/home", + templateUrl : "templates/home.html", + controller : "homeCtrl", + authenticate: true + }) + .state("home.tree", { + url: "/tree", + templateUrl : "templates/tree.html", + controller : "treeCtrl", + authenticate: true + }) + .state("home.accordion", { + url: "/accordion", + templateUrl : "templates/accordion.html", + controller : "accordionCtrl", + authenticate: true + }) + .state("home.tabs", { + url: "/tabs", + templateUrl : "templates/tabs.html", + controller : "tabsCtrl", + authenticate: true + }) + .state("home.vtabs", { + url: "/vtabs", + templateUrl : "templates/verticalTab.html", + controller : "vTabCtrl", + authenticate: true + }) + .state("home.table", { + url: "/table", + templateUrl : "templates/table.html", + controller : "tableCtrl", + authenticate: true + }) + .state("home.buttons", { + url: "/buttons", + templateUrl : "templates/buttons.html", + controller : "buttonsCtrl", + authenticate: true + }) + /*state for radio button and checkboxes-------------------------------------------------*/ + .state("home.radiobuttons", { + url: "/radiobuttons", + templateUrl : "templates/radioButtons.html", + controller : "radioCtrl", + authenticate: true + }) + .state("home.checkboxes", { + url: "/checkboxes", + templateUrl : "templates/checkBoxes.html", + controller : "checkBoxCtrl", + authenticate: true + }) + .state("home.dropdown", { + url: "/dropdown", + templateUrl: "templates/dropdown.html", + controller: "dropdownCtrl", + authenticate: true + }) + + .state("home.list", { + url: "/list", + /*template:"

Under Progress

",*/ + templateUrl : "templates/list.html", + controller : "listCtrl", + authenticate: true + }) + + .state("home.provinceMgmt", { + url: "/management", + templateUrl : "templates/management.html", + controller : "managementCtrl", + authenticate: true + }) + .state("home.tooltip", { + url: "/textarea", + templateUrl : "templates/textarea.html", + controller : "toolCtrl", + authenticate: true + }) + + .state("home.notification", { + url: "/notification", + templateUrl : "templates/notification.html", + controller : "notificationCtrl", + authenticate: true + }) + .state("home.functional", { + url: "/functional", + templateUrl : "templates/functional.html", + controller : "functionalCtrl", + authenticate: true + }) + .state("home.labels", { + url: "/labels", + templateUrl : "templates/label.html", + authenticate: true + }) + + + }) + .controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) { + $rootScope.title = "AngularJS Login Sample"; + + $scope.formSubmit = function() { + LoginService.login($scope.user) + .then(function (data) { + if (data) { + $scope.error = ''; + $scope.user.username = ''; + $scope.user.password = ''; + $state.transitionTo('home.tree'); + } + else { + $scope.error = "Incorrect username/password !"; + } + }, function (reason) { + $scope.error = "Incorrect username/password !"; + }); + }; + + }) + .controller('registerController', function($scope, $state, LoginService){ + $scope.formSubmit = function() { + if($scope.user.password === $scope.user.confpassword) { + LoginService.registerUser($scope.user) + .then(function (data) { + $state.transitionTo("login"); + }, function () { + console.log("Failed to register"); + }); + } + else { + console.log("Password not matched..."); + var dialog_tpl = $(modelTemplate).filter('#personDialog').html(); + var data = {'title':'Error',showClose:true, 'closeBtnTxt':'Ok', 'icon':'glyphicon glyphicon-exclamation-sign','iconColor':'icon_error','msg':'Password and Confirm password does not match.', buttons:[]}; + var html = Mustache.to_html(dialog_tpl, data); + $(html).modal({backdrop: "static"}); //backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*/ + } + }; + }) + .controller("homeCtrl", function($scope, $state, DataService){ + $scope.message = "Home Page"; + + /*$scope.geticonClass = function() { + if($( "#panel1" ).hasClass( "in" )){ + return "openo_accordion_ui-icon-expand"; + } + else{ + return "openo_accordion_ui-icon-expand.current"; + } + + + }*/ + + + + /* $scope.accordionLoaded = function() { + if(modelTemplate != null) { + console.log("left menu loading.."); + menuaccordion(); + return true; + } + console.log("left menu not loading.."); + return false; + } + + function menuaccordion() { + var accordion_tpl = $(modelTemplate).filter('#menu_accordion').html(); + + $.getJSON('./data/homelinks.json', function (accordion) { + var html = Mustache.to_html(accordion_tpl, accordion.accordion_data); + $('#accordionmenuid').html(html); + }); + }*/ + + }) + + /* Tree Controller */ + .controller("treeCtrl", function($scope,DataService,$log){ + $scope.message = "Tree Data"; + var setting = {}; + /*$scope.treeLoaded = function() { + if(modelTemplate != null) { + console.log("Tree data loading.."); + tree(); + return true; + } + console.log("Tree data not loading.."); + return false; + }*/ + $scope.init = function() { + $scope.param="treeData"; + $scope.shortNote="shortNote"; + DataService.getAllJSONData($scope.param) + .then(function(data){ + $scope.treeData = data.data; + tree(); + console.log("inside tree"); + $log.info($scope.treeData); + }); + DataService.getAllJSONData($scope.shortNote) + .then(function(data1){ + $scope.treeTip = data1.data.treeTip; + console.log("inside treeTip"); + $log.info(data1); + }); + } + function tree() { + zNodes = $scope.treeData; + $.fn.zTree.init($("#tree1"), setting, zNodes); + + } + }) + + /* Accordian Controller */ + .controller("accordionCtrl", function($scope,DataService, $log){ + + $scope.message = "Accordion"; + + $scope.accordionLoaded = function() { + if(modelTemplate != null) { + console.log("accordion loading.."); + + accordion(); + return true; + } + console.log("accordion not loading.."); + return false; + } + + $scope.init = function() { + $scope.param="accordionData"; + $scope.accordionTip="shortNote"; + DataService.getAllJSONData($scope.param) + .then(function(data){ + $scope.accordion = data.data; + accordion(); + console.log("inside accordion"); + $log.info(data); + }); + DataService.getAllJSONData($scope.accordionTip) + .then(function(data){ + $scope.accordionTipData = data.data.accordionTip; + console.log("inside accordion"); + $log.info(data); + }); + } + + function accordion() { + + var accordion_tpl = $(modelTemplate).filter('#accordion').html(); + console.log("in acc" ); + var html = Mustache.to_html(accordion_tpl, $scope.accordion.accordion_data); + $('#accordion').html(html); + } + }) + .controller("tabsCtrl", function($scope, $state, DataService, $log){ + $scope.message = "Tabs"; + $scope.tabLoaded = function() { + if(modelTemplate != null) { + console.log("Tab is loading.."); + loadTabData(); + return true; + } + console.log("Not ready.."); + return false; + } + + $scope.init = function() { + $scope.param="tabData"; + $scope.tabTip="shortNote"; + DataService.getAllJSONData($scope.param) + .then(function(data){ + $scope.tabdata = data.data; + loadTabData(); + console.log("inside tabs"); + $log.info(data); + }); + DataService.getAllJSONData($scope.tabTip) + .then(function(data){ + $scope.tabTipData = data.data.tabTip; + $log.info(data); + }); + } + + function loadTabData() { + var tab_tpl = $(modelTemplate).filter('#tabs').html(); + var html = Mustache.to_html(tab_tpl, $scope.tabdata.tabData); + $('#tabArea').html(html); + } + + }) + .controller("vTabCtrl", function($scope, $state, DataService){ + $scope.message = "Vertical Tabs"; + + $scope.vtabLoaded = function() { + if(modelTemplate != null) { + console.log("Vertical Tab is loading.."); + loadvTabData(); + return true; + } + console.log("Not ready.."); + return false; + } + + $scope.init = function() { + $scope.param="vtabData"; + $scope.vtabTip="shortNote"; + DataService.getAllJSONData($scope.param) + .then(function(vtabdata){ + $scope.data = vtabdata.data; + loadvTabData(); + console.log("inside vTab"); + }); + DataService.getAllJSONData($scope.vtabTip) + .then(function(vtabdata){ + $scope.vtabTipdata = vtabdata.data.vtabTip; + console.log("inside vTab"); + }); + } + + function loadvTabData() { + + var vtab_tpl = $(modelTemplate).filter('#vtabs').html(); + var html = Mustache.to_html(vtab_tpl, $scope.data.vtabData); + $('#vtabArea').html(html); + } + }) + .controller("tableCtrl", function($scope, $state, DataService, NgTableParams){ + $scope.message = "Tables"; + + $scope.tableLoaded = function() { + if(modelTemplate != null) { + console.log("Table is loading.."); + loadTableData(); + return true; + } + console.log("Not ready.."); + return false; + } + + $scope.init = function() { + $scope.param="tableData"; + $scope.tableTip="shortNote"; + DataService.getAllJSONData($scope.param) + .then(function(data){ + $scope.tableData = data.data; + loadTableData(); + console.log("inside table"); + }); + + DataService.getAllJSONData($scope.tableTip) + .then(function(data){ + $scope.tableTipData = data.data.tableTip; + console.log("inside table"); + }); + } + + function loadTableData() { + + var table_tpl = $(modelTemplate).filter('#table').html(); + + var html = Mustache.to_html(table_tpl, $scope.tableData.basic_table_data); + $('#basictableArea').html(html); + + var html = Mustache.to_html(table_tpl, $scope.tableData.str_table_data); + $('#strippedtableArea').html(html); + /* $scope.tableParams = new NgTableParams({count: 5, sorting: {FirstName: 'asc'} //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'} + }, { counts:[5, 10, 20, 50], dataset: $scope.tableData.str_table_data});*/ + + + /*var html = Mustache.to_html(table_tpl, $scope.tableData.cond_table_data); + $('#condensedtableArea').html(html);*/ + $scope.tableParams = new NgTableParams({ + count: 5, sorting: {language: 'asc'} //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'} + }, {counts: [5, 10, 20, 50], dataset: $scope.tableData.cond_table_data}); + } + } + ) + + /* Buttons Controller */ + .controller("buttonsCtrl", function($scope,DataService,$log){ + $scope.message = "Types of Buttons"; + $scope.buttonTip="shortNote"; + + $scope.init = function() { + $scope.param="buttonsData"; + DataService.getAllJSONData($scope.param) + .then(function(data){ + $scope.buttons = data.data; + defaultButtons(); + visualButtons(); + sizeButtons(); + iconButtons(); + console.log("inside accordion"); + $log.info(data); + }); + DataService.getAllJSONData($scope.buttonTip) + .then(function(data){ + $scope.buttonTipData = data.data.buttonTip; + console.log("inside table"); + }); + } + + function defaultButtons(){ + console.log("Default buttons Loaded.."); + //Here your view content is fully loaded !! + var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html(); + var def_icon_button_tpl = $(modelTemplate).filter('#defaultIconButtons').html(); + + var html = Mustache.to_html(def_button_tpl, $scope.buttons.default_btn_data.def_button); + $('#defaultButtonArea').html(html); + + var html = Mustache.to_html(def_icon_button_tpl, $scope.buttons.default_btn_data.def_print_button); + $('#defaultButtonArea').append(html); + + var html = Mustache.to_html(def_icon_button_tpl, $scope.buttons.default_btn_data.def_print_button_right); + $('#defaultButtonArea').append(html); + } + + + function visualButtons(){ + console.log("Loaded.."); + //Here your view content is fully loaded !! + var visual_button_tpl = $(modelTemplate).filter('#visualButtons').html(); + + var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_pri_btn_data); + $('#visualButtonArea').html(html); + + var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_sec_btn_data); + $('#visualButtonArea').append(html); + + var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_succ_btn_data); + $('#visualButtonArea').append(html); + + var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_inf_btn_data); + $('#visualButtonArea').append(html); + + var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_warn_btn_data); + $('#visualButtonArea').append(html); + + var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_dang_btn_data); + $('#visualButtonArea').append(html); + + var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_link_btn_data); + $('#visualButtonArea').append(html); + } + + function sizeButtons() { + var size_button_tpl = $(modelTemplate).filter('#sizeButtons').html(); + + var html = Mustache.to_html(size_button_tpl, $scope.buttons.diffSize_btn_data.size_small_btn_data); + $('#sizeButtonArea').html(html); + + var html = Mustache.to_html(size_button_tpl, $scope.buttons.diffSize_btn_data.size_large_btn_data); + $('#sizeButtonArea').append(html); + + var html = Mustache.to_html(size_button_tpl, $scope.buttons.diffSize_btn_data.size_block_btn_data); + $('#sizeButtonArea').append(html); + + } + + function iconButtons() { + var icon_button_tpl = $(modelTemplate).filter('#iconButtons').html(); + + var html = Mustache.to_html(icon_button_tpl, $scope.buttons.icon_btn_data.search_icon_btn_data); + $('#iconButtonArea').html(html); + + var html = Mustache.to_html(icon_button_tpl, $scope.buttons.icon_btn_data.search_icon_styled_btn_data); + $('#iconButtonArea').append(html); + + var html = Mustache.to_html(icon_button_tpl, $scope.buttons.icon_btn_data.print_icon_btn_data); + $('#iconButtonArea').append(html); + + } + + $scope.defaultButtonsLoaded = function() { + if(modelTemplate != null) { + console.log("default buttons loading.."); + defaultButtons(); + return true; + } + console.log("default buttons not loading.."); + return false; + } + + $scope.visualButtonsLoaded = function() { + if(modelTemplate != null) { + console.log("visual buttons loading.."); + visualButtons(); + return true; + } + console.log("visual buttons not loading.."); + return false; + } + + $scope.sizeButtonsLoaded = function() { + if(modelTemplate != null) { + console.log("size buttons loading.."); + sizeButtons(); + return true; + } + console.log("size buttons not loading.."); + return false; + } + + $scope.iconButtonsLoaded = function() { + if(modelTemplate != null) { + console.log("icon buttons loading.."); + iconButtons(); + return true; + } + console.log("icon buttons not loading.."); + return false; + } + }) + /* Drop down----------------------*/ + .controller("dropdownCtrl", function($scope, DataService) { + $scope.message = "You selected drop down"; + $scope.subIsLoaded = function () { + if (modelTemplate != null) { + console.log("Loading.."); + loadDrop(); + return true; + } + console.log("Not Loaded.."); + return false; + } + + $scope.init = function() { + $scope.param="dropdownData"; + $scope.dropdownTip="shortNote"; + DataService.getAllJSONData($scope.param) + .then(function(data){ + $scope.dropdown = data.data; + loadDrop(); + }); + DataService.getAllJSONData($scope.dropdownTip) + .then(function(data){ + $scope.dropdownTipData = data.data.dropdownTip; + console.log("inside table"); + }); + } + function loadDrop() { + var drop_tpl = $(modelTemplate).filter('#dropDown').html(); + var dropHeader_tpl = $(modelTemplate).filter('#dropDownHeader').html(); + var dropSimple_tpl = $(modelTemplate).filter('#simpleDropdownTmpl').html(); + + var html = Mustache.to_html(drop_tpl, $scope.dropdown.dropped_down_data); + $('#dropArea').html(html); + + var html = Mustache.to_html(drop_tpl, $scope.dropdown.dropped_up_data); + $('#dropAreaUP').html(html); + + var html = Mustache.to_html(dropHeader_tpl, $scope.dropdown.dropHeader_data); + $('#dropAreaHeader').html(html); + + var html = Mustache.to_html(dropSimple_tpl, $scope.dropdown.dropSimple_data); + $('#plainDropDown').html(html); + + } + }) + .controller("radioCtrl", function($scope, DataService, $log) { + $scope.message = "You selected radio button tab"; + var lodedOnce = false; + $scope.subIsLoaded = function() { + if(modelTemplate != null) { + console.log("Loading.."); + loadRadioBtn(); + return true; + } + console.log("Not Loaded.."); + return false; + } + + $scope.init = function() { + $scope.param="radioData"; + $scope.radioTip="shortNote"; + DataService.getAllJSONData($scope.param) + .then(function(data){ + $scope.radioButton = data.data; + loadRadioBtn(); + console.log("inside button"); + $log.info(data); + }); + + DataService.getAllJSONData($scope.radioTip) + .then(function(data){ + $scope.radioTipData = data.data.radioTip; + console.log("inside table"); + }); + } + function loadRadioBtn(){ + console.log("lodedOnce : "+lodedOnce); + + var radio_button_tpl = $(modelTemplate).filter('#radioButtons').html(); + var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_default_data); + $('#radioBtnArea').html(html); + + var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_primary_data); + $('#radioBtnArea').append(html); + + var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_success_data); + $('#radioBtnArea').append(html); + + var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_danger_data); + $('#radioBtnArea').append(html); + + var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_Warn_data); + $('#radioBtnArea').append(html); + + var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_info_data); + $('#radioBtnArea').append(html); + + } + }) + .controller("checkBoxCtrl", function($scope, DataService) { + $scope.message = "You selected checkbox tab"; + $scope.subIsLoaded = function() { + if(modelTemplate != null) { + console.log("Loading.."); + loadCheckBox(); + return true; + } + console.log("Not Loaded.."); + return false; + } + $scope.init = function() { + $scope.param="checkboxData"; + $scope.checkboxTip="shortNote"; + DataService.getAllJSONData($scope.param) + .then(function(data){ + $scope.checkBox = data.data; + loadCheckBox(); + }); + DataService.getAllJSONData($scope.checkboxTip) + .then(function(data){ + $scope.checkboxTipData = data.data.checkboxTip; + console.log("inside table"); + }); + } + function loadCheckBox() { + var check_box_tpl = $(modelTemplate).filter('#checkBoxes').html(); + + var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_default_data); + $('#CheckBoxArea').html(html); + + var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_primary_data); + $('#CheckBoxArea').append(html); + + var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_success_data); + $('#CheckBoxArea').append(html); + + var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_danger_data); + $('#CheckBoxArea').append(html); + + var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_warn_data); + $('#CheckBoxArea').append(html); + + var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_info_data); + $('#CheckBoxArea').append(html); + + /*$.getJSON('./data/checkboxData.json', function(c_data) { + var html = Mustache.to_html(check_box_tpl, c_data.checkbox_default_data); + $('#CheckBoxArea').html(html); + + var html = Mustache.to_html(check_box_tpl, c_data.checkbox_primary_data); + $('#CheckBoxArea').append(html); + + var html = Mustache.to_html(check_box_tpl, c_data.checkbox_success_data); + $('#CheckBoxArea').append(html); + + var html = Mustache.to_html(check_box_tpl, c_data.checkbox_danger_data); + $('#CheckBoxArea').append(html); + + var html = Mustache.to_html(check_box_tpl, c_data.checkbox_warn_data); + $('#CheckBoxArea').append(html); + + var html = Mustache.to_html(check_box_tpl, c_data.checkbox_info_data); + $('#CheckBoxArea').append(html); + });*/ + } + }) + + /* Reference Code -- Remove after use */ + .controller("coursesCtrl", function($scope, DataService){ + $scope.message = "Courses Offered"; + $scope.courses = ["Java", "C/C++", "JavaScript", "AngularJS", "NodeJS", "HTML", "Python", "Action Script"]; + $scope.showDialog = function() { + /*var dialog_tpl = $(modelTemplate).filter('#personDialog').html(); + var data = {'title':'Shahid Noor','showClose':true,'closeBtnTxt':'Cancel','icon':'glyphicon glyphicon-off','iconColor':'icon_warn','msg':'Good! There is a message that can be used to show on the screen. There is a message that can be used to show on the screen', buttons:[{"text": "Ok", 'action':'callThis()'},{"text": "Show"}]}; + var html = Mustache.to_html(dialog_tpl, data); + $(html).modal({backdrop: "static"}); //backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*/ + + var def_button_tpl = $(modelTemplate).filter('#visualButtons').html(); + var def_btn_data = {'title':"asas", 'type':'primary'}; + var html = Mustache.to_html(def_button_tpl, def_btn_data); + $('#sampleArea').html(html); + }; + + // $scope.$on('$viewContentLoaded', function(){ + function loaded(){ + console.log("Loaded.."); + //Here your view content is fully loaded !! + var def_button_tpl = $(modelTemplate).filter('#dropDown').html(); + var def_btn_data = {'title':'Shahid Noor','position':'down', items:[{"itemLabel": "Ok"},{"itemLabel": "Show"}]}; + var html = Mustache.to_html(def_button_tpl, def_btn_data); + $('#sampleArea').html(html); + + } + $scope.subIsLoaded = function() { + if(modelTemplate != null) { + console.log("Loading.."); + loaded(); + return true; + } + console.log("Not Loaded.."); + return false; + } + }) + + .controller("toolCtrl", function($scope, DataService, $compile, $log){ + $scope.toolTip = "shortNote"; + $scope.toolTipContent = "textArea"; + + DataService.getAllJSONData($scope.toolTipContent) + .then(function(data){ + $log.info(data.data.Note.placement); + $scope.noteContent = data.data.Note.message; + $scope.notePlacement = data.data.Note.placement; + $scope.textareaContent = data.data; + console.log($scope.noteContent + " " + $scope.notePlacement); + loadTextArea(); + }); + DataService.getAllJSONData($scope.toolTip) + .then(function(data){ + $scope.toolTipData = data.data.toolTip; + //loadTextArea(); + }); + + //$('[data-toggle="popover"]').popover(); + + + + function loadTextArea() { + var text = $(modelTemplate).filter('#textfield').html(); + var email = $(modelTemplate).filter('#email').html(); + var url = $(modelTemplate).filter('#url').html(); + var password = $(modelTemplate).filter('#password').html(); + var numeric = $(modelTemplate).filter('#numeric').html(); + var dot = $(modelTemplate).filter('#dot').html(); + var dateinput = $(modelTemplate).filter('#dateinput').html(); + var monthinput = $(modelTemplate).filter('#monthinput').html(); + var weekinput = $(modelTemplate).filter('#weekinput').html(); + var timeinput = $(modelTemplate).filter('#timeinput').html(); + var ipv4 = $(modelTemplate).filter('#ipv4').html(); + var ipv6 = $(modelTemplate).filter('#ipv6').html(); + var textarea = $(modelTemplate).filter('#textarea').html(); + + var note = $(modelTemplate).filter('#note').html(); + + var html = Mustache.to_html(text, $scope.textareaContent.Textbox); + $('#fname').html($compile(html)($scope)); + + var html = Mustache.to_html(email, $scope.textareaContent.Email); + $('#email').html($compile(html)($scope)); + + var html = Mustache.to_html(url, $scope.textareaContent.Url); + $('#url').html($compile(html)($scope)); + + var html = Mustache.to_html(password, $scope.textareaContent.Password); + $('#password').html($compile(html)($scope)); + + + var html = Mustache.to_html(numeric, $scope.textareaContent.Number); + $('#numeric').html($compile(html)($scope)); + + + var html = Mustache.to_html(dot, $scope.textareaContent.Datetime); + $('#dot').html($compile(html)($scope)); + + var html = Mustache.to_html(dateinput, $scope.textareaContent.Date); + $('#dateinput').html($compile(html)($scope)); + + var html = Mustache.to_html(monthinput, $scope.textareaContent.Month); + $('#monthinput').html($compile(html)($scope)); + + var html = Mustache.to_html(weekinput, $scope.textareaContent.Week); + $('#weekinput').html($compile(html)($scope)); + + var html = Mustache.to_html(timeinput, $scope.textareaContent.Time); + $('#timeinput').html($compile(html)($scope)); + + + var html = Mustache.to_html(ipv4, $scope.textareaContent.Ipv4); + $('#ipv4').html($compile(html)($scope)); + + var html = Mustache.to_html(ipv6, $scope.textareaContent.Ipv6); + $('#ipv6').html($compile(html)($scope)); + + var html = Mustache.to_html(textarea, $scope.textareaContent.TextArea); + $('#textarea').html($compile(html)($scope)); + + + + var html = Mustache.to_html(note, {"placement":$scope.notePlacement}); + $('#note').html(html); + $("#noteanchor").popover({ + template: '
'+$scope.noteContent+'
' + }); + + $scope.validatetextbox = function (value){ + if($scope.textbox) { + $scope.textboxErr = false; + } + else + $scope.textboxErr = true; + + } + $scope.validateemail = function (value){ + if($scope.email) { + $scope.emailErr = false; + } + else + $scope.emailErr = true; + + } + $scope.validateurl = function (value){ + if($scope.url) { + $scope.urlErr = false; + } + else + $scope.urlErr = true; + + } + $scope.validatepassword = function (value){ + if($scope.password) { + $scope.passwordErr = false; + } + else + $scope.passwordErr = true; + + } + $scope.validatenumeric = function (value){ + if($scope.number) { + $scope.numericErr = false; + } + else + $scope.numericErr = true; + + } + $scope.validatedot = function (value){ + if($scope.datetime) { + $scope.dotErr = false; + } + else + $scope.dotErr = true; + + } + $scope.validatedateinput = function (value){ + if($scope.date) { + $scope.dateinputErr = false; + } + else + $scope.dateinputErr = true; + + } + $scope.validatemonthinput = function (value){ + if($scope.month) { + $scope.monthinputErr = false; + } + else + $scope.monthinputErr = true; + + } + $scope.validateweek = function (value){ + if($scope.week) { + $scope.weekinputErr = false; + } + else + $scope.weekinputErr = true; + + } + $scope.validatetime = function (value){ + if($scope.time) { + $scope.timeinputErr = false; + } + else + $scope.timeinputErr = true; + + } + $scope.validateipv4 = function (value){ + if($scope.ipv4) { + $scope.ipv4Err = false; + } + else + $scope.ipv4Err = true; + + } + $scope.validateipv6 = function (value){ + if($scope.ipv6) { + $scope.ipv6Err = false; + } + else + $scope.ipv6Err = true; + + } + + $scope.validatetextarea = function (value){ + if($scope.textarea) { + $scope.textareaErr = false; + } + else + $scope.textareaErr = true; + + } + + + + } + + + }) + + .controller("notificationCtrl", function($scope, DataService){ + $scope.message = "Notification and Messages"; + $scope.notificationTip = "shortNote"; + + var dialog_tpl; + $scope.templateLoaded = function() { + if(modelTemplate != null) { + console.log("Loading.."); + + return true; + } + console.log("Not Loaded.."); + return false; + } + $scope.init = function() { + $scope.param="notificationData"; + $scope.notificationTip="shortNote"; + DataService.getAllJSONData($scope.param) + .then(function(data){ + $scope.notification = data.data; + }); + DataService.getAllJSONData($scope.notificationTip) + .then(function(data){ + $scope.notificationTipData = data.data.notificationTip; + }); + } + + $scope.showError = function() { + dialog_tpl = $(modelTemplate).filter('#personDialog').html(); + var html = Mustache.to_html(dialog_tpl, $scope.notification.err_data); + $(html).modal({backdrop: "static"});//backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*! + } + + $scope.showWarning = function() { + dialog_tpl = $(modelTemplate).filter('#personDialog').html(); + var html = Mustache.to_html(dialog_tpl, $scope.notification.warn_data); + $(html).modal(); + } + + $scope.showInfo = function() { + dialog_tpl = $(modelTemplate).filter('#personDialog').html(); + var html = Mustache.to_html(dialog_tpl, $scope.notification.info_data); + $(html).modal(); + } + $scope.showConfirm = function() { + dialog_tpl = $(modelTemplate).filter('#personDialog').html(); + var html = Mustache.to_html(dialog_tpl, $scope.notification.confirm_data); + $(html).modal({backdrop: "static"}); //backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*!/ + } + + }) + + .controller("functionalCtrl", function($scope, DataService, $compile){ + $scope.message = "Functional Flow"; + + var dialog_tpl; + $scope.templateLoaded = function() { + if(modelTemplate != null) { + console.log("Loading.."); + + return true; + } + console.log("Not Loaded.."); + return false; + } + + $scope.init = function() { + $scope.param="functionalData"; + $scope.functionalTip="shortNote"; + DataService.getAllJSONData($scope.param) + .then(function(data){ + $scope.functional = data.data; + addButtons(); + }); + DataService.getAllJSONData($scope.functionalTip) + .then(function(data){ + $scope.functionalTipData = data.data.functionalTip; + }); + } + function addButtons() { + var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html(); + var def_iconbutton_tpl = $(modelTemplate).filter('#defaultIconButtons').html(); + var add_data = {"title":"Create", "type":"btn btn-default", "gType": "plus-icon", "iconPosition":"left", "clickAction":"showCreate()"}; + var edit_data={"title":"Modify", "type":"btn btn-default", "gType": "edit-icon", "iconPosition":"left", "clickAction":"showModify()"}; + var delete_data = {"title":"Delete", "type":"btn btn-default", "gType": "delete-icon", "iconPosition":"left", "clickAction":"showDelete()"}; + var workflow_data = {"title":"WorkFlow", "type":"btn btn-default", "clickAction":"showWorkflow()"}; + var addhtml = Mustache.to_html(def_iconbutton_tpl, add_data); + var edithtml = Mustache.to_html(def_iconbutton_tpl, edit_data); + var deletehtml = Mustache.to_html(def_iconbutton_tpl, delete_data); + var workflowhtml = Mustache.to_html(def_button_tpl, workflow_data); + $('#functionalArea #buttonArea').html($compile(addhtml)($scope)); + $('#functionalArea #buttonArea').append($compile(edithtml)($scope)); + $('#functionalArea #buttonArea').append($compile(deletehtml)($scope)); + $('#functionalArea #buttonArea').append($compile(workflowhtml)($scope)); + } + + $scope.showCreate = function() { + dialog_tpl = $(modelTemplate).filter('#functionalDialog').html(); + var html = Mustache.to_html(dialog_tpl, $scope.functional.create_data); + $(html).modal(); + } + $scope.showModify = function() { + dialog_tpl = $(modelTemplate).filter('#functionalDialog').html(); + var html = Mustache.to_html(dialog_tpl, $scope.functional.modify_data); + $(html).modal(); + } + $scope.showDelete = function() { + dialog_tpl = $(modelTemplate).filter('#functionalDialog').html(); + var html = Mustache.to_html(dialog_tpl, $scope.functional.delete_data); + $(html).modal(); + } + $scope.showWorkflow = function() { + dialog_tpl = $(modelTemplate).filter('#functionalDialog').html(); + var html = Mustache.to_html(dialog_tpl, $scope.functional.workflow_data); + $(html).modal(); + } + }) + + .controller("listCtrl", function($scope, $log, DataService){ + $scope.message = "List Page"; + $scope.listTip = "shortNote"; + $scope.init = function() { + console.log("Shahid... ng-init"); + $scope.param="list"; + DataService.getAllJSONData($scope.param) + .then(function(data){ + $scope.mainlistItem = data.data; + }, function(reason){ + $scope.portfolios = []; + + }); + + DataService.getAllJSONData($scope.listTip) + .then(function(data){ + $scope.listTipData = data.data.listTip; + }); + } + $scope.loadSubMenuPage = function(index) { + $log.info($scope.mainlistItem); + $scope.subMenuListItem = $scope.mainlistItem[index].subMenu; + $scope.subsubMenuListItem = []; + } + $scope.loadSubSubMenuPage = function(index) { + $log.info($scope.subMenuListItem); + console.log("index: "+index); + $scope.subsubMenuListItem = $scope.subMenuListItem[index].subsubMenu; + } + }) + + .controller("managementCtrl", function($scope, $log, DataService, $state, $compile, NgTableParams){ + $scope.message = "Management"; + $scope.provinceTip = "shortNote"; + /*$scope.provinceData = [ + {id:1, province_name:'First', ip:'192.168.1.45', port:'8080'}, + {id:2, province_name:'Second', ip:'192.168.1.5', port:'8081'}, + {id:3, province_name:'Third', ip:'192.168.1.15', port:'8082'}, + {id:4, province_name:'Fourth', ip:'192.168.1.28', port:'8083'}, + {id:5, province_name:'Fifth', ip:'192.168.1.19', port:'8084'} + ];*/ + + $scope.init = function() { + //console.log("Shahid... ng-init"); + DataService.getAllProvinceData() + .then(function(data){ + $scope.provinceData = data.provinceData; + console.log("Data: "); + loadButtons(); + $log.info(data.provinceData); + }, function(reason){ + $scope.message = "Error is :" + JSON.stringify(reason); + }); + + DataService.getAllJSONData($scope.provinceTip) + .then(function(data){ + $scope.provinceTipData = data.data.provinceTip; + }); + } + + /*DataService.getAllProvinceData() + .then(function(data){ + $scope.provinceData = data.provinceData; + console.log("Data: "); + $log.info(data.provinceData); + }, function(reason){ + $scope.message = "Error is :" + JSON.stringify(reason); + });*/ + /*DataService.getAllData($scope.provinceTip) + .then(function(data){ + $scope.provinceTipData = data.provinceTip; + });*/ + + function loadButtons() { + /*console.log("modelTemplate in ProvinceMgmt is :"+modelTemplate); + var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html(); + var dialog = $(modelTemplate).filter('#dialog').html(); + var add_data = {"title":"Add", "clickAction":"showAddModal()"}; + var delete_data = {"title":"Delete Selected", "clickAction":"deleteData()"}; + var addhtml = Mustache.to_html(def_button_tpl, add_data); + var deletehtml = Mustache.to_html(def_button_tpl, delete_data); + $('#provinceAction').html($compile(addhtml)($scope)); + $('#provinceAction').append($compile(deletehtml)($scope));*/ + console.log("modelTemplate in ProvinceMgmt is :"+modelTemplate); + var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html(); + var def_iconbutton_tpl = $(modelTemplate).filter('#defaultIconButtons').html(); + var dialog = $(modelTemplate).filter('#dialog').html(); + /*var add_data = {"title":"Add", "clickAction":"showAddModal()"};*/ + var add_data = {"title":"Create", "type":"btn btn-default", "gType": "plus-icon", "iconPosition":"left", "clickAction":"showAddModal()"}; + /*var delete_data = {"title":"Delete Selected", "clickAction":"deleteData()"};*/ + var delete_data = {"title":"Delete Selected", "type":"btn btn-default", "gType": "delete-icon", "iconPosition":"left", "clickAction":"deleteData()"}; + var addhtml = Mustache.to_html(def_iconbutton_tpl, add_data); + var deletehtml = Mustache.to_html(def_iconbutton_tpl, delete_data); + $('#provinceAction').html($compile(addhtml)($scope)); + + //$('#provinceAction #iconBtn').append(''); + + $('#provinceAction').append($compile(deletehtml)($scope)); + //$('#provinceAction #iconBtn').append(''); + $('#managementDialog').html($compile(dialog)($scope)); + + $scope.checkboxes = { 'checked': false, items: {} }; + + //var data = [{id: 1, name: "Moroni", age: 50}, {id: 2, name: "ABC", age: 30}, {id: 3, name: "Morhoni", age: 10}, {id: 4, name: "DABC", age: 31}, {id: 5, name: "Noor", age: 30}, {id: 6, name: "ABCD", age: 40}, {id: 7, name: "DABC", age: 31}, {id: 8, name: "Noor", age: 30}, {id: 9, name: "ABCD", age: 40}, {id: 10, name: "DABC", age: 31}, {id: 11, name: "Noor", age: 30}, {id: 12, name: "ABCD", age: 40}]; + $scope.tableParams = new NgTableParams({count: 5, sorting: {province_name: 'asc'} //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'} + }, { counts:[5, 10, 20, 50], dataset: $scope.provinceData}); + + $scope.$watch('checkboxes.checked', function(value) { + angular.forEach($scope.provinceData, function(item) { + if (angular.isDefined(item.id)) { + $scope.checkboxes.items[item.id] = value; + } + }); + }); + + var text = $(modelTemplate).filter('#textfield').html(); + var ipv4 = $(modelTemplate).filter('#ipv4').html(); + var number = $(modelTemplate).filter('#numeric').html(); + + $('#managementDialog .modalHeader').html('
Modal Header
'); + $('#managementDialog .modalBodyContent').html('
'); + $('#managementDialog .modalBodyContent').append('
'); + $('#managementDialog .modalBodyContent').append('
'); + + + + + var dataText = {"ErrMsg" : {"errmsg" : "Please input Name.", "modalVar":"province.province_name", "placeholder":"Name", "errtag":"ptextboxErr", "errfunc":"validatetextbox"}}; + $('#managementDialog .provinceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope)); + + + + var dataIP = {"ErrMsg" : {"errmsg" : "Please input IP Address.", "modalVar":"province.ip", "placeholder":"IP Address", "errtag":"pipv4Err", "errfunc":"validateipv4"}}; + $('#managementDialog .ipAddress').html($compile(Mustache.to_html(ipv4, dataIP.ErrMsg))($scope)); + + var dataNum = {"ErrMsg" : {"errmsg" : "Please input port.", "modalVar":"province.port", "placeholder":"Port", "errtag":"pnumericErr", "errfunc":"validatenumeric"}}; + $('#managementDialog .port').html($compile(Mustache.to_html(number, dataNum.ErrMsg))($scope)); + + var modelSubmit_data = {"title":"OK", "clickAction":"saveData(province.id)"}; + var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data); + $('#managementDialog #footerBtns').html($compile(modelSubmit_html)($scope)); + + var modelDelete_data = {"title":"Cancel", "clickAction":"closeModal()"}; + var modelDelete_html = Mustache.to_html(def_button_tpl, modelDelete_data); + $('#managementDialog #footerBtns').append($compile(modelDelete_html)($scope)); + } + + $scope.validatetextbox = function (value){ + if($scope.province.province_name) { + $scope.ptextboxErr = false; + } + else + $scope.ptextboxErr = true; + } + + + + $scope.validateipv4 = function (value){ + if($scope.province.ip) { + $scope.pipv4Err = false; + } + else + $scope.pipv4Err = true; + } + $scope.validatenumeric = function (value){ + if($scope.province.port) { + $scope.pnumericErr = false; + } + else + $scope.pnumericErr = true; + } + + $scope.closeModal = function() { + console.log("Closing Modal..."); + $('#uniModal').modal('hide'); + } + + + $scope.checkAll = function() { + console.log("Checked .."); + angular.forEach($scope.provinceData, function(data) { + //data.select = $scope.selectAll; + $scope.checkboxes.items[user.id] + }); + }; + + $scope.showAddModal = function() { + console.log("Showing Modal to Add data"); + $scope.province = {}; + $scope.textboxErr = false; + $scope.ipv4Err = false; + $scope.numericErr = false; + //$("#myModal").modal(); + $("#uniModal").modal({}).draggable(); + } + $scope.saveData = function(id) { + if(id) { + //edit data + console.log("Editing data.." + JSON.stringify($scope.province)); + DataService.editProvinceData($scope.province) + .then(function (data) { + $scope.message = "Success :-)"; + $state.reload(); + //$state.go($state.current.name, {}, {reload: true}) + }, + function (reason) { + //$log.info(reason); + $scope.message = reason.status + " " + reason.statusText; + }); + } + else { + console.log("Adding data.." + JSON.stringify($scope.province)); + DataService.addProvinceData($scope.province) + .then(function (data) { + $scope.message = "Success :-)"; + $state.reload(); + //$state.go($state.current.name, {}, {reload: true}) + }, + function (reason) { + //$log.info(reason); + $scope.message = reason.status + " " + reason.statusText; + }); + } + $('#uniModal').modal('hide'); + } + + /*$scope.deleteData = function() { + var deleteArr = []; + //$log.info($scope.checkboxes); + angular.forEach($scope.checkboxes.items, function(value , key) { + //$log.info(data); + if(value) { + deleteArr.push(key); + } + }); + + console.log("To be deleted : "+deleteArr); + //$log.info(deleteArr); + DataService.deleteProvinceData(deleteArr) + .then(function(data){ + $scope.message = "Successfully deleted :-)"; + $state.reload(); + }, + function(reason){ + //$log.info(reason); + $scope.message = reason.status + " " + reason.statusText; + }); + }*/ + + $scope.deleteIndividualData = function(id) { + var deleteArr = []; + //$log.info($scope.checkboxes); + deleteArr.push(id); + + console.log("To be deleted : "+deleteArr); + //$log.info(deleteArr); + + + DataService.deleteProvinceData(deleteArr) + .then(function(data){ + $scope.message = "Successfully deleted :-)"; + $state.reload(); + }, + function(reason){ + //$log.info(reason); + $scope.message = reason.status + " " + reason.statusText; + }); + } + $scope.deleteData = function(id) { + var confirmation=false; + var dialog_tpl = $(modelTemplate).filter('#personDialog').html(); + var error = {"err_data" : { "title": "Error", + "showClose": "true", + "closeBtnTxt": "Cancel", + "icon": "glyphicon glyphicon-exclamation-sign", + "iconColor": "icon_error", + "msg": "Do you really wanted to Delete?.", + "buttons": [ + { + "text": "OK", "action": "deleteConfirmation("+id+")" + }] + }}; + var html = Mustache.to_html(dialog_tpl, error.err_data); + $($compile(html)($scope)).modal({backdrop: "static"}); + } + + $scope.deleteConfirmation = function(id) { + console.log("data in province data is :"); + $log.info($scope.provinceData); + var deleteArr = []; + if (typeof id !== "undefined"){ + + deleteArr.push(id); + }else{ + angular.forEach($scope.checkboxes.items, function (value, key) { + if (value) { + console.log("deleting name is :" + key); + deleteArr.push(key); + } + }); + + } + + console.log("To be deleted : " + deleteArr); + DataService.deleteProvinceData(deleteArr) + .then(function (data) { + $scope.message = "Successfully deleted :-)"; + $state.reload(); + }, + function (reason) { + $scope.message = reason.status + " " + reason.statusText; + }); + } + + $scope.editData = function(id) { + $scope.textboxErr = false; + $scope.ipv4Err = false; + $scope.numericErr = false; + console.log("To be edited : " + id); + var dataFound = false; + angular.forEach($scope.provinceData, function(data) { + if(!dataFound) { + if (data.id == id) { + console.log("Found : " + data.id); + $scope.province = data; + /*$scope.province.province_name = data.province_name; + $scope.province.ip = data.ip; + $scope.province.port = data.port;*/ + + $("#uniModal").modal(); + dataFound = true; + } + } + }); + } + + }) + +/*var modelTemplate; +function loadTemplate() { + $.get('template.html', function(template) { + modelTemplate = template; + }); +}*/ + +var modelTemplate = ""; +function loadTemplate() { + $.get('/framework/template.html', function (template) { + modelTemplate += template; + }); + $.get('/framework/templateContainer.html', function (template) { + modelTemplate += template; + }); + $.get('/framework/templateWidget.html', function (template) { + //console.log("Template is : "+template); + modelTemplate += template; + }); + $.get('/framework/templateNotification.html', function (template) { + modelTemplate += template; + }); + $.get('/framework/templateFunctional.html', function (template) { + modelTemplate += template; + }); +} + +function callThis() { + alert("Going Great!"); +} + +function searchTable() { + var filter, table, tr, td; + filter = $("#myInput").val().toUpperCase(); + table = $("#myTable_search"); + tr = $("#myTable_search tr"); + + // Loop through all table rows, and hide those who don't match the search query + for (var i = 0; i < tr.length; i++) { + td = tr[i].getElementsByTagName("td")[0]; + if (td) { + if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { + tr[i].style.display = ""; + } else { + tr[i].style.display = "none"; + } + } + } +} + +function linkClicked(state) { + console.log("State to : " + state); +} \ No newline at end of file diff --git a/common/src/main/webapp/usageguide/browser/js/rest.js b/common/src/main/webapp/usageguide/browser/js/rest.js new file mode 100644 index 00000000..a9637926 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/js/rest.js @@ -0,0 +1,150 @@ +/* + + Copyright 2017, Huawei Technologies Co., Ltd. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +*/ + + + +app.factory("DataService", function($http, $log){ + return { + /*getAllData: function (value) { + //var value = $scope.param; + return $http({ + url: 'http://localhost:8080/POC_NodeToServletPorting_Server/?widgetType=' + value, + headers: {'Content-Type': 'application/json'}, + method: 'GET' + }).then(function (response) { + $log.info(response.data); + return response.data; + }) + },*/ + getAllJSONData : function(wdgtType) { + return $http({ + url: 'http://localhost:4000/api/getAllJSONData', + method: 'POST', + data: {"wdgtType":wdgtType}, + headers: {'Content-Type': 'application/json '} + }).then(function(response){ + console.log("Response : "); + $log.info(response.data); + return response.data; + }); + }, + getAllProvinceData : function() { + return $http({ + url: 'http://localhost:4000/api/getAllProvinceData', + method: 'GET', + headers: {'Content-Type': 'application/json'} + }).then(function(response){ + //$log.info(response); + return response.data; + }); + }, + addProvinceData : function(provinceDetail) { + return $http({ + url: 'http://localhost:4000/api/addProvinceData', + method: 'POST', + data: provinceDetail, + headers: {'Content-Type': 'application/json '} + }).then(function(response){ + console.log("Response : "); + $log.info(response.data); + return response.data; + }); + }, + deleteProvinceData : function(idList) { + return $http({ + url: 'http://localhost:4000/api/deleteProvinceData', + method: 'POST', + data: {'idList':idList}, + headers: {'Content-Type': 'application/json'} + }).then(function(response){ + console.log("Successfully Deleted.."); + $log.info(response); + return response.data; + }); + }, + editProvinceData : function(provinceDetail) { + return $http({ + url: 'http://localhost:4000/api/editProvinceData', + method: 'POST', + data: provinceDetail, + headers: {'Content-Type': 'application/json'} + }).then(function(response){ + console.log("Successfully Edited..."); + $log.info(response); + return response.data; + }); + } + } +}); + +app.factory('LoginService', function($http, $log) { + var admin = 'admin'; + var pass = 'pass'; + var isAuthenticated = false; + + return { + login : function(user) { + console.log(user); + return $http({ + url: 'http://localhost:8081/api/signin',//http://192.168.4.161:3000/api/login + method: 'POST', + data: {'name':user.username, 'pswd':user.password}, + headers: {'Content-Type': 'application/json'} + }).then(function(response){ + $log.info(response); + if(response.status == 200) { + console.log("Success"); + //Success + isAuthenticated = true; + } + else { + console.log("Fail"); + isAuthenticated = false; + } + console.log("isAuthenticated: " + isAuthenticated); + return isAuthenticated; + }, function(reason){ + $log.info(reason); + console.log("Fail"); + isAuthenticated = false; + return reason; + }); + /*isAuthenticated = user.username === admin && user.password === pass; + return isAuthenticated;*/ + }, + isAuthenticated : function() { + return isAuthenticated; + }, + registerUser: function(user){ + console.log("New Registration: " + JSON.stringify(user)); + return $http({ + url: 'http://localhost:8081/api/signup',//http://192.168.4.161:3000/api/login + method: 'POST', + data: {'name':user.username, 'pswd':user.password, 'email':user.email}, + headers: {'Content-Type': 'application/json'} + }).then(function(response){ + $log.info(response); + },function(reason){ + $log.info(reason); + }); + + + } + }; + +}); \ No newline at end of file diff --git a/common/src/main/webapp/usageguide/browser/templates/accordion.html b/common/src/main/webapp/usageguide/browser/templates/accordion.html new file mode 100644 index 00000000..e081c0f8 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/accordion.html @@ -0,0 +1,46 @@ + + +
+

Accordion

+
+
+
Usage
+
Create a div tag in html file with specific id for example accordionArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
HTML file:
+ 
<div id="accordionArea" ng-init="init()"></div>
+
+
Javascript file:
+ 

+        var data ={"accordion_data": {"items": [{"tabId": "tab1","header": "Tab1","isActive": true,
+        "msg": "This is in Collapsible Group 1 and this attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown."};
+
+        $scope.init = function() {
+             accordion();
+        }
+
+        function accordion() {
+            var accordion_tpl = $(modelTemplate).filter('#accordion').html();
+            var html = Mustache.to_html(accordion_tpl, data.accordion_data);
+            $('#accordion').html(html);
+        }
+ +
+
+ diff --git a/common/src/main/webapp/usageguide/browser/templates/buttons.html b/common/src/main/webapp/usageguide/browser/templates/buttons.html new file mode 100644 index 00000000..6261d5a2 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/buttons.html @@ -0,0 +1,130 @@ + + +

Types of Buttons

+ +
+

Default Buttons

+
+

Visual Buttons

+
+

Different Sized Buttons

+
+

Icon Buttons

+
+ +
+
+
Usage
+
Create a div tag in html file with specific id for example defaultButtonArea,visualButtonArea, sizeButtonArea,iconButtonArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
HTML file:
+ 
<div id="buttonArea" ng-init="init()"></div>
+ 
<div id="defaultButtonArea" ></div>
+ 
<div id="visualButtonArea" ></div>
+ 
<div id="sizeButtonArea" ></div>
+ 
<div id="iconButtonArea" ></div>
+
+
Javascript file:
+ 

+       var data ={"default_btn_data" : {"def_button" : {"title":"Default"},"def_print_button" : {"title":"Print", "type":"btn btn-default", "gType": "glyphicon-print", "iconPosition":"left"},"def_print_button_right" : {"title":"Search", "type":"btn btn-default", "gType": "glyphicon-search", "iconPosition":"right"}},"visual_btn_data" : { "vis_pri_btn_data" : {"title":"Primary", "type":"primary"},"vis_sec_btn_data" : {"title":"Secondary", "type":"secondary"},"vis_succ_btn_data" : {"title":"Success", "type":"success"},"vis_inf_btn_data" : {"title":"Info", "type":"info"},"vis_warn_btn_data" : {"title":"Warning", "type":"warning"},"vis_dang_btn_data" : {"title":"Danger", "type":"danger"},"vis_link_btn_data" : {"title":"Link", "type":"link"}},"diffSize_btn_data" : {"size_small_btn_data" : {"title": "Small Button", "type": "primary", "size": "btn-sm"},"size_large_btn_data" : {"title": "Large Button", "type": "primary", "size": "btn-lg"},"size_block_btn_data" : {"title": "Large Block Button", "type": "primary", "size": "btn-lg btn-block"}},"icon_btn_data" : {"search_icon_btn_data" : {"title": "Search Icon", "type": "btn-default", "gType": "glyphicon-search"},"search_icon_styled_btn_data" : {"title": "Styled Search Icon", "type": "primary", "gType": "glyphicon-search"},"print_icon_btn_data" : {"title": "Print", "type": "primary btn-lg", "gType": "glyphicon-print"}}};
+
+        $scope.init = function() {
+                    defaultButtons();
+                    visualButtons();
+                    sizeButtons();
+                    iconButtons();
+        }
+
+           function defaultButtons(){
+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
+            var def_icon_button_tpl = $(modelTemplate).filter('#defaultIconButtons').html();
+
+            var html = Mustache.to_html(def_button_tpl, data.default_btn_data.def_button);
+            $('#defaultButtonArea').html(html);
+
+            var html = Mustache.to_html(def_icon_button_tpl, data.default_btn_data.def_print_button);
+            $('#defaultButtonArea').append(html);
+
+            var html = Mustache.to_html(def_icon_button_tpl, data.default_btn_data.def_print_button_right);
+            $('#defaultButtonArea').append(html);
+        }
+
+
+        function visualButtons(){
+
+            var visual_button_tpl = $(modelTemplate).filter('#visualButtons').html();
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_pri_btn_data);
+            $('#visualButtonArea').html(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_sec_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_succ_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_inf_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_warn_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_dang_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_link_btn_data);
+            $('#visualButtonArea').append(html);
+        }
+
+        function sizeButtons() {
+            var size_button_tpl = $(modelTemplate).filter('#sizeButtons').html();
+
+            var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_small_btn_data);
+            $('#sizeButtonArea').html(html);
+
+            var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_large_btn_data);
+            $('#sizeButtonArea').append(html);
+
+            var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_block_btn_data);
+            $('#sizeButtonArea').append(html);
+
+        }
+
+        function iconButtons() {
+            var icon_button_tpl = $(modelTemplate).filter('#iconButtons').html();
+
+            var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.search_icon_btn_data);
+            $('#iconButtonArea').html(html);
+
+            var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.search_icon_styled_btn_data);
+            $('#iconButtonArea').append(html);
+
+            var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.print_icon_btn_data);
+            $('#iconButtonArea').append(html);
+
+        }
+ + + + +
+ + + + diff --git a/common/src/main/webapp/usageguide/browser/templates/checkBoxes.html b/common/src/main/webapp/usageguide/browser/templates/checkBoxes.html new file mode 100644 index 00000000..aab3bfe1 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/checkBoxes.html @@ -0,0 +1,60 @@ + + +

Checkboxes

+ +
+
+
Usage
+
Create a div tag in html file with specific id for example CheckBoxArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
HTML file:
+ 
<div id="CheckBoxArea" ng-init="init()"></div>
+
+
Javascript file:
+ 

+        var data ={"checkbox_default_data" : {"id":1, "label":"Default check box", "type":"default", "checked":true},"checkbox_primary_data" : {"id":2, "label":"Primary check box", "type":"primary", "checked":false},"checkbox_success_data" : {"id":3, "label":"Success check box", "type":"success", "checked":true},"checkbox_danger_data" : {"id":4, "label":"Error check box", "type":"danger", "checked":true},"checkbox_warn_data" : {"id":5, "label":"Warn check box", "type":"warning", "checked":false},"checkbox_info_data" : {"id":6, "label":"Info check box", "type":"info", "checked":true}};
+
+        $scope.init = function() {
+            loadCheckBox();
+        }
+
+         function loadCheckBox() {
+            var check_box_tpl = $(modelTemplate).filter('#checkBoxes').html();
+
+            var html = Mustache.to_html(check_box_tpl, data.checkbox_default_data);
+            $('#CheckBoxArea').html(html);
+
+            var html = Mustache.to_html(check_box_tpl, data.checkbox_primary_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, data.checkbox_success_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, data.checkbox_danger_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, data.checkbox_warn_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, data.checkbox_info_data);
+            $('#CheckBoxArea').append(html);
+        }
+ +
+ diff --git a/common/src/main/webapp/usageguide/browser/templates/courses.html b/common/src/main/webapp/usageguide/browser/templates/courses.html new file mode 100644 index 00000000..34dde6c3 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/courses.html @@ -0,0 +1,32 @@ + + + +

{{message}}

+ + + + + + +
diff --git a/common/src/main/webapp/usageguide/browser/templates/dropdown.html b/common/src/main/webapp/usageguide/browser/templates/dropdown.html new file mode 100644 index 00000000..cb974775 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/dropdown.html @@ -0,0 +1,83 @@ + + + +
+

Drop Down

+ + +
+
Usage
+
Create a div tag in html file with specific id for example plainDropDown,dropArea,dropAreaUP,dropAreaHeader and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
HTML file:
+ 
<div id="dropdown" ng-init="init()"></div>
+ 
<div id="plainDropDown" ></div>
+ 
<div id="dropArea" ></div>
+ 
<div id="dropAreaUP" ></div>
+ 
<div id="dropAreaHeader" ></div>
+ + +
+
Javascript file:
+ 

+        var data ={"dropped_down_data" :{"title":"DropDown","position":"down", "items":[{"itemLabel": "Node JS"},{"itemLabel": "JS"}]},"dropped_up_data" :{"title":"DropUp","position":"up", "items":[{"itemLabel": "PHP"},{"itemLabel": "ASP"}]},"dropHeader_data" :{"title":"DropHeader","position":"down","items":[{"itemLabel": "Web UI", "isheader":true},{"itemLabel": "HTML", "isheader":false},{"itemLabel": "CSS", "isheader":false},{"itemLabel": "JS", "isheader":false},{"itemLabel": "Programming", "isheader":true},{"itemLabel": "C", "isheader":false},{"itemLabel": "C++", "isheader":false}]},"dropSimple_data" : {"title":"--PleaseSelect--","items":[{"itemLabel": "Cameras"},{"itemLabel": "Mobile Phones"},{"itemLabel": "Computers"},{"itemLabel": "Monitors"},{"itemLabel": "Tablets"},{"itemLabel": "Others"}]}};
+
+        $scope.init = function() {
+               loadDrop();
+        }
+
+         function loadDrop() {
+            var drop_tpl = $(modelTemplate).filter('#dropDown').html();
+            var dropHeader_tpl = $(modelTemplate).filter('#dropDownHeader').html();
+            var dropSimple_tpl = $(modelTemplate).filter('#simpleDropdownTmpl').html();
+
+            var html = Mustache.to_html(drop_tpl, data.dropped_down_data);
+            $('#dropArea').html(html);
+
+            var html = Mustache.to_html(drop_tpl, data.dropped_up_data);
+            $('#dropAreaUP').html(html);
+
+            var html = Mustache.to_html(dropHeader_tpl, data.dropHeader_data);
+            $('#dropAreaHeader').html(html);
+
+            var html = Mustache.to_html(dropSimple_tpl, data.dropSimple_data);
+            $('#plainDropDown').html(html);
+
+        }
+ + + + +
+
+ + + + + diff --git a/common/src/main/webapp/usageguide/browser/templates/functional.html b/common/src/main/webapp/usageguide/browser/templates/functional.html new file mode 100644 index 00000000..126deed7 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/functional.html @@ -0,0 +1,48 @@ + + +

{{message}}

+ +
+ +
+
+
Usage
+
Create a button in html file and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
HTML file:
+ 
<button type="button" class="btn btn-default" ng-click="showCreate()">Create</button>
+
+
Javascript file:
+ 

+        var data={"create_data" : {"title":"Create", "labels":[{"text": "Username", "input_id":"username", "type":"text"},{"text": "Password", "input_id":"username", "type":"password"}], "showClose":"true","closeBtnTxt":"Cancel","msg":"This is Create dialog box", "buttons":[{"text": "Ok"}]}};
+
+        $scope.showCreate = function() {
+        dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();
+        var html = Mustache.to_html(dialog_tpl, data.create_data);
+        $(html).modal();
+        }
+ + +
+
+ + diff --git a/common/src/main/webapp/usageguide/browser/templates/home.html b/common/src/main/webapp/usageguide/browser/templates/home.html new file mode 100644 index 00000000..1f65dfa9 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/home.html @@ -0,0 +1,159 @@ + + +
+
+
+
+ + +
+
+ + +
+
+
+
\ No newline at end of file diff --git a/common/src/main/webapp/usageguide/browser/templates/label.html b/common/src/main/webapp/usageguide/browser/templates/label.html new file mode 100644 index 00000000..41282121 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/label.html @@ -0,0 +1,94 @@ + + + +
+ + OPEN-O +
+ +
+ Info: This Header is using labelHeader as CSS +
+
+
Use labelHeader class of open-ostye.css for all the message information
+
+
<span class="labelHeader">OPEN-O</span>
+ +
+
+ +
+ OPEN-O +
+ +
+ Info: This Title is using labelTitle as CSS +
+
+
Use labelTitle class of open-ostye.css for all the message information
+
+
<span class="labelTitle">OPEN-O</span>
+
+
+ + +
+ OPEN-O +
+
+ Info: This Message is using titlestyle as CSS +
+
+
Use message class of open-ostye.css for all the message information
+
+
<span class="message">OPEN-O</span>
+
+
+ + +
+ OPEN-O +
+
+ Info: This label is using labelstyle as CSS +
+
+
Use labelstyle class of open-ostye.css for all the message information
+
+
<span class="labelstyle">OPEN-O</span>
+
+
+ + +
+ OPEN-O +
+
+ Info: This Note is using shortnoteText as CSS +
+
+
Use shortnoteText class of open-ostye.css for all the message information
+
+
<span class="shortnoteText">OPEN-O</span>
+
+
+ + + diff --git a/common/src/main/webapp/usageguide/browser/templates/list.html b/common/src/main/webapp/usageguide/browser/templates/list.html new file mode 100644 index 00000000..6b4fb8a2 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/list.html @@ -0,0 +1,93 @@ + + +
+

{{message}}

+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+ + +
+
Usage
+
Create a div tag in html file with specific id for example listArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
HTML file:
+ 
 <div id="listArea" ng-init="init()">
+        <div id="list1">
+            <div ng-repeat="item in mainlistItem">
+                <button type="button" class="btn btn-primary btn-block" ng-click="loadSubMenuPage($index)">{ {item.title} }</button>
+            </div>
+        </div>
+        <div id="list2">
+            <div ng-repeat="subitem in subMenuListItem">
+                <button type="button" class="btn btn-primary btn-block" ng-click="loadSubSubMenuPage($index)">{ {subitem.title} }</button>
+            </div>
+        </div>
+        <div id="list3">
+            <div ng-repeat="subsubitem in subsubMenuListItem">
+                <button type="button" class="btn btn-primary btn-block">{ {subsubitem.title} }</button>
+            </div>
+        </div>
+
+    </div>
+
+
Javascript file:
+ 

+        var data ={"id": "113","title": "Movies","subMenu": [{"title":"Sci-fi","subsubMenu":[{"title":"Intersteller"},{"title":"Inception"},{"title":"The Arrival"},
+            {"title":"The Paycheck"}]}};
+
+        $scope.init = function() {
+            $scope.mainlistItem = data;
+        }
+
+        $scope.loadSubMenuPage = function(index) {
+            $log.info($scope.mainlistItem);
+            $scope.subMenuListItem = $scope.mainlistItem[index].subMenu;
+            $scope.subsubMenuListItem = [];
+        }
+        $scope.loadSubSubMenuPage = function(index) {
+            $log.info($scope.subMenuListItem);
+            console.log("index: "+index);
+            $scope.subsubMenuListItem = $scope.subMenuListItem[index].subsubMenu;
+        }
+ + + + + +
+
+ + diff --git a/common/src/main/webapp/usageguide/browser/templates/login.html b/common/src/main/webapp/usageguide/browser/templates/login.html new file mode 100644 index 00000000..026b670d --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/login.html @@ -0,0 +1,40 @@ + + +
+

Login

+ +
+
+
+ +
+ +
+ +
+ +
+ + {{ error }} +
+ Register + +
+
+
\ No newline at end of file diff --git a/common/src/main/webapp/usageguide/browser/templates/management.html b/common/src/main/webapp/usageguide/browser/templates/management.html new file mode 100644 index 00000000..59d8e587 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/management.html @@ -0,0 +1,173 @@ + + +

{{message}}

+

+
+ + +
+
+
+ + + + + + + + + + +
+ + + {{provinceData.province_name}} + + {{provinceData.ip}} + + {{provinceData.port}} + + + +
+ + + + +
+ + + +
+
+
Usage
+
Create a div tag in html file with specific id for example managementDialog and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
NOTE: Creation of Table and Buttons are explained in previous sections
+
+
HTML file:
+ 
<div id="provinceAction" ng-init="init()"></div>
+ 
<div id="managementDialog"></div>
+
+
Javascript file:
+ 

+
+        $scope.init = function() {
+            loadprv();
+        }
+
+          function loadprv() {
+             var dialog = $(modelTemplate).filter('#dialog').html();
+             var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
+             $('#managementDialog').html($compile(dialog)($scope));
+             $('#managementDialog .modalHeader').html('<h5 class="modal-title titlestyle">Modal Header</h5>');
+             $('#managementDialog .modalBodyContent').html('<div class="form-group row"> <label class="col-xs-4 col-form-label labelstyle">Name</label> <div class="col-xs-8 provinceName" > </div> </div>');
+              var dataText = {"ErrMsg" :     {"errmsg" : "Please input Name.", "modalVar":"province.province_name", "placeholder":"Name", "errtag":"ptextboxErr", "errfunc":"validatetextbox"}};
+             $('#managementDialog .provinceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));
+             var modelSubmit_data = {"title":"OK", "clickAction":"saveData(province.id)"};
+             var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);
+             $('#managementDialog #footerBtns').html($compile(modelSubmit_html)($scope));
+             var modelDelete_data = {"title":"Cancel", "clickAction":"closeModal()"};
+             var modelDelete_html = Mustache.to_html(def_button_tpl, modelDelete_data);
+             $('#managementDialog #footerBtns').append($compile(modelDelete_html)($scope));
+             $scope.validatetextbox = function (value){
+            if($scope.province.province_name) {
+                $scope.ptextboxErr = false;
+            }
+            else
+                $scope.ptextboxErr = true;
+        }
+        }
+
+ + + + + +
+ diff --git a/common/src/main/webapp/usageguide/browser/templates/notification.html b/common/src/main/webapp/usageguide/browser/templates/notification.html new file mode 100644 index 00000000..a4b9cee4 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/notification.html @@ -0,0 +1,48 @@ + + +

{{message}}

+ +
+ + + + + + + +
+
Usage
+
Create a button in html file and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
HTML file:
+ 
<button type="button" class="btn btn-default" ng-click="showError()">Create</button>
+
+
Javascript file:
+ 

+        var data = {"err_data" : {"title": "Error","showClose": "true","closeBtnTxt": "Ok","icon": "glyphicon glyphicon-exclamation-sign","iconColor": "icon_error","msg":"<>","buttons": []}};
+
+            $scope.showError = function() {
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+            var html = Mustache.to_html(dialog_tpl, data.err_data);
+            $(html).modal({backdrop: "static"});//backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*!
+        }
+ +
+
+ diff --git a/common/src/main/webapp/usageguide/browser/templates/radioButtons.html b/common/src/main/webapp/usageguide/browser/templates/radioButtons.html new file mode 100644 index 00000000..87477182 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/radioButtons.html @@ -0,0 +1,58 @@ + + + +

Radio Buttons

+ +
+
+
Usage
+
Create a div tag in html file with specific id for example radioBtnArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
HTML file:
+ 
<div id="radioBtnArea" ng-init="init()"></div>
+
+
Javascript file:
+ 

+        var data ={"radio_btn_default_data" : {"id":1, "label":"Default Radio Btn"},"radio_btn_primary_data" : {"id":2, "label":"Primary Radio Btn"}};
+
+        $scope.init = function() {
+            loadRadioBtn();
+        }
+
+         function loadRadioBtn(){
+
+            var radio_button_tpl = $(modelTemplate).filter('#radioButtons').html();
+            var html = Mustache.to_html(radio_button_tpl, data.radio_btn_default_data);
+            $('#radioBtnArea').html(html);
+
+            var html = Mustache.to_html(radio_button_tpl, data.radio_btn_primary_data);
+            $('#radioBtnArea').append(html);
+
+
+        }
+ + + + + + +
+ + + diff --git a/common/src/main/webapp/usageguide/browser/templates/register.html b/common/src/main/webapp/usageguide/browser/templates/register.html new file mode 100644 index 00000000..ff934267 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/register.html @@ -0,0 +1,47 @@ + + +
+

Register

+ +
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ Login + +
+
+
\ No newline at end of file diff --git a/common/src/main/webapp/usageguide/browser/templates/table.html b/common/src/main/webapp/usageguide/browser/templates/table.html new file mode 100644 index 00000000..3daa2a57 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/table.html @@ -0,0 +1,90 @@ + + +
+

{{message}}

+ +
+ +

Basic Table (with hover)

+
+ +

Stripped Table (Condensed & with border)

+
+ +

Search Table

+
+ + + + + +
+ {{siteData.countryName}} + + {{siteData.language}} +
+
+
+
+
Usage
+
Create a div tag in html file with specific id for example basictableArea,strippedtableArea,condensedtableArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
HTML file:
+ 
<div id="basictableArea"></div>
+ 
<div id="strippedtableArea"></div>
+ 
<div id="condensedtableArea"></div>
+            <table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">
+                <tr ng-repeat="siteData in $data">
+                    <td title="'Country'" filter="{ countryName: 'text'}" sortable="'countryName'">{ {siteData.countryName} }</td>
+                      <td title="'Language'" filter="{ type: 'text'}" sortable="'type'">{ {siteData.language} }</td>
+                </tr>
+            </table>
+
+
Javascript file:
+ 

+
+        var data ={"basic_table_data": {"itemHeader": ["First Name", "Last Name", "Age"],"rowitem": [{"values": ["A", "B","1"]},{"values": ["C", "D", "2"]},{"values": ["E", "F", "3"]}],"striped": false,"border": false,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""},
+        "str_table_data": {"itemHeader": ["First Name","Last Name","Age"],"rowitem": [{"values": ["A","B","1"]},{"values": ["C","D","2"]},{"values": ["E","F","3"]}],"striped": true,"border": true,"hover": false,"condensed": true,"filter": false,"action": "","searchField": ""},"cond_table_data": [{
+        "countryName": "China","language": "Mandrain"},{"countryName": "India","language": "English"},{"countryName": "USA","language": "English"}]};
+
+
+        $scope.init = function() {
+            loadTableData();
+        }
+
+         function loadTableData() {
+
+            var table_tpl = $(modelTemplate).filter('#table').html();
+
+            var html = Mustache.to_html(table_tpl, data.basic_table_data);
+            $('#basictableArea').html(html);
+
+            var html = Mustache.to_html(table_tpl,data.str_table_data);
+            $('#strippedtableArea').html(html);
+
+            $scope.tableParams = new NgTableParams({
+                count: 5, sorting: {language: 'asc'}
+            }, {counts: [5, 10, 20, 50], dataset: data.cond_table_data});
+        }
+ + + +
+
+ diff --git a/common/src/main/webapp/usageguide/browser/templates/tabs.html b/common/src/main/webapp/usageguide/browser/templates/tabs.html new file mode 100644 index 00000000..3b284713 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/tabs.html @@ -0,0 +1,53 @@ + + +
+

{{message}}

+
+ +
+
Usage
+
Create a div tag in html file with specific id for example tabArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
HTML file:
+ 
<div id="tabArea" ng-init="init()"></div>
+
+
Javascript file:
+ 

+        var data ={"tabData":{"items": [{"tablabel": "Why AngularJS?","isActive": true,"target": "tab1",
+        "msg": "HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop."};
+
+        $scope.init = function() {
+              loadTabData();
+        }
+
+         function loadTabData() {
+            var tab_tpl = $(modelTemplate).filter('#tabs').html();
+            var html = Mustache.to_html(tab_tpl, data.tabData);
+            $('#tabArea').html(html);
+        }
+ + + + + + + +
+
+ \ No newline at end of file diff --git a/common/src/main/webapp/usageguide/browser/templates/textarea.html b/common/src/main/webapp/usageguide/browser/templates/textarea.html new file mode 100644 index 00000000..9d885e60 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/textarea.html @@ -0,0 +1,150 @@ + + +

Text Area

+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+ + +
+ +
+
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+
+
Usage
+
Create a div tag in html file with specific id for example Email and write a specific function in javascript file to perform your business logic. An sample example as shown below for Email and Note, the same logic can be followed by all remaining text fields:
+
+
HTML file:
+ 
<div id="textArea" ng-init="init()"></div>
+ 
<div id="Email"></div>
+ 
<div id="note"></div>
+
+
Javascript file:
+ 

+        var data ={"Note" : {"message" : "Hi I am Note","placement" : "bottom"},"Email" : {"errmsg" : "The email is required.","placeholder" : "Email","modalVar":"email","errtag":"emailErr","errfunc":"validateemail"}};
+
+        $scope.init = function() {
+            loadTextArea();
+        }
+
+         function loadTextArea() {
+            var note = $(modelTemplate).filter('#note').html();
+            var email = $(modelTemplate).filter('#email').html();
+            var html = Mustache.to_html(email, data.Email);
+            $('#email').html($compile(html)($scope));
+            var html = Mustache.to_html(note, {"placement":data.Note.placement});
+            $('#note').html(html);
+            $("#noteanchor").popover({
+                template: '
'+data.Note.message+'
'
+            });
+
+        }
+ + +
+ + + diff --git a/common/src/main/webapp/usageguide/browser/templates/tree.html b/common/src/main/webapp/usageguide/browser/templates/tree.html new file mode 100644 index 00000000..41a09b29 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/tree.html @@ -0,0 +1,41 @@ + + +

{{message}}

+
+ +
+
Usage
+
Create a div tag in html file with specific id for example tree1 and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
HTML file:
+ 
<div id="tree1" class="ztree" ng-init="init()"></div>
+
+
Javascript file:
+ 

+        var data = {"name": "Java and its divisions","open": true,"children": [{ "name": "Java Standard Edition, J2SE" },{ "name": "Java Enterprise Edition, J2EE" },{ "name": "Java Mobile Edition, J2ME"}]};
+        $scope.init = function() {
+                tree();
+        }
+        function tree() {
+            zNodes = data;
+            $.fn.zTree.init($("#tree1"), setting, zNodes);
+        }
+ +
+ diff --git a/common/src/main/webapp/usageguide/browser/templates/verticalTab.html b/common/src/main/webapp/usageguide/browser/templates/verticalTab.html new file mode 100644 index 00000000..784475b8 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/verticalTab.html @@ -0,0 +1,47 @@ + + +
+

{{message}}

+ +
+ +
+
Usage
+
Create a div tag in html file with specific id for example vtabArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:
+
+
HTML file:
+ 
<div id="vtabArea" ng-init="init()"></div>
+
+
Javascript file:
+ 

+        var data= {"vtabData":{"items": [{"tablabel": "Why AngularJS?","isActive": true,"target": "tab1","msg": "HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop."};
+
+        $scope.init = function() {
+            loadvTabData();
+        }
+
+         function loadvTabData() {
+            var vtab_tpl = $(modelTemplate).filter('#vtabs').html();
+            var html = Mustache.to_html(vtab_tpl, data.vtabData);
+            $('#vtabArea').html(html);
+        }
+ +
+
+ \ No newline at end of file -- cgit 1.2.3-korg