Labels

Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Wednesday, January 18, 2017

301 Create Ionic Sales Record Book Summary Apps


.
301 Create Ionic Sales Record Book Summary Apps
Building On Codepen Platform

1) Create Summary {Year:{Month/Total}}

HTML
<html>
  <head>
    <meta charset="utf-8">
    <title>Diary</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <!-- Internal Library
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    -->
    <!-- Cloud Library -->
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="cordova.js"></script>
  </head>
    <body ng-app="app">
  <div>
  <div>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </div>
</div>
     
     <script id="home.html" type="text/ng-template">
<ion-view title="Home" id="page1">
  <ion-nav-buttons side="right" class="has-header">
        <button class="button button-icon" ng-click="insertRecord()">
        <i class="icon ion-compose"></i>
      </button>
  </ion-nav-buttons>
  <ion-content padding="true" class="has-header">
{{date}}
<br/>
{{details}}
<br/>
{{summary}}
  <h2>DETAILS</h2>
  <div class = "row">
           <div class = "col"><b>Date</b></div>
           <div class = "col"><b>Sales</b></div>    
        </div>
  <div class = "row" ng-class-odd="'odd'" ng-class-even="'even'"
  ng-repeat="detail in details"
 >
           <div class = "col">{{detail.date  | date:'yyyy-MM-dd HH:mm:ss Z'}}</div>
     <div class = "col">{{detail.value}}</div>    
        </div>  
       </ion-content>
</ion-view>
    </script>    
 <script id="insertRecord.html" type="text/ng-template">
  <div class="modal">
    <!-- Modal header bar -->
    <ion-header-bar class="bar-secondary">
      <h1 class="title">Insert Record</h1>
      <button class="button button-clear button-positive" ng-click="closeInsertRecord()">Cancel</button>
    </ion-header-bar>
    <!-- Modal content area -->
    <ion-content>
      <form ng-submit="submitInsertRecord(record)">
        <div class="list">
          <label class="item item-input">
            <input type="date" placeholder="Transaction Date" ng-model="record.date">
          </label>
                                        <label class="item item-input">
            <input type="text" placeholder="Transaction Value" ng-model="record.value">
          </label>
        </div>
        <div class="padding">
          <button type="submit" class="button button-block button-positive">Insert Record</button>
        </div>
      </form>
    </ion-content>
  </div>
</script>        
  </body>
</html>
JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope', '$stateParams', '$ionicModal',
function ($scope, $stateParams, $ionicModal) {
  $scope.date=new Date();

  var dataTrunk1={"details":[
    {date:$scope.date,value:100.50},
    {date:$scope.date,value:200.25}
  ]};
  $scope.details = dataTrunk1.details;

     
   
  function summarize() {
// convert to array
var datevalue=[];
  $scope.details.forEach(function(d){
    var  tmp = '{"' + d.date.toISOString().substring(0, 10) + '":'+ d.value +'}';  
    var obj =JSON.parse(tmp);
  datevalue.push(obj);
  });      
   
   
   
    var response = {};
   
    datevalue.forEach(function(d){
      console.log(d);
        for (var k in d) {
            var _ = k.split("-");
            var year = _[0];
            var month = _[1];        
         
            if (!response[year]) response[year] = {total: 0};
            response[year][month] = response[year][month] ? response[year][month]+d[k] : d[k];
            response[year].total+= d[k];
        }
    });
    console.log(response);
    return response;
}
$scope.summary=summarize();



  // Create and load the Modal
  $ionicModal.fromTemplateUrl('insertRecord.html', function(modal) {
    $scope.insertRecordModal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });
  // Called when the form is submitted
  $scope.submitInsertRecord = function(record) {
    $scope.details.push({
      date: record.date,
      value: record.value
    });
$scope.summary=summarize();
    record.date="";
    record.value = "";
    $scope.insertRecordModal.hide();
  };
  // Open our new task modal
  $scope.insertRecord = function() {
    $scope.insertRecordModal.show();
  };
  // Close the new task modal
  $scope.closeInsertRecord = function() {
    $scope.insertRecordModal.hide();
  };
   


}])
   
.config(function($stateProvider, $urlRouterProvider) {
  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider
   

      .state('home', {
    url: '/page1',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  })
$urlRouterProvider.otherwise('/page1')

});

2) Modify Summary {Year-Month:Total}

JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope', '$stateParams', '$ionicModal',
function ($scope, $stateParams, $ionicModal) {
  $scope.date=new Date();

  var dataTrunk1={"details":[
    {date:$scope.date,value:100.50},
    {date:$scope.date,value:200.25}
  ]};
  $scope.details = dataTrunk1.details;

     
   
  function summarize() {
// convert to array
var datevalue=[];
  $scope.details.forEach(function(d){
  var obj =JSON.parse('{"' + d.date.toISOString().substring(0, 10) + '":'+ d.value +'}');
  datevalue.push(obj);
  });      
   
   
   
    var response = {};
   
    datevalue.forEach(function(d){
      console.log(d);
        for (var k in d) {
            var _ = k.split("-");
            var year = _[0];
            var month = _[1];        
         
            if (!response[year+"-"+month]) response[year+"-"+month] =  d[k];
            else response[year+"-"+month] = response[year+"-"+month]+d[k];
        }
    });
    console.log(response);
    return response;
}
$scope.summary=summarize();



  // Create and load the Modal
  $ionicModal.fromTemplateUrl('insertRecord.html', function(modal) {
    $scope.insertRecordModal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });
  // Called when the form is submitted
  $scope.submitInsertRecord = function(record) {
    $scope.details.push({
      date: record.date,
      value: record.value
    });
$scope.summary=summarize();
    record.date="";
    record.value = "";
    $scope.insertRecordModal.hide();
  };
  // Open our new task modal
  $scope.insertRecord = function() {
    $scope.insertRecordModal.show();
  };
  // Close the new task modal
  $scope.closeInsertRecord = function() {
    $scope.insertRecordModal.hide();
  };
   


}])
   
.config(function($stateProvider, $urlRouterProvider) {
  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider
   

      .state('home', {
    url: '/page1',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  })
$urlRouterProvider.otherwise('/page1')

});

3) Add YEAR-MONTH Summary Display

HTML
<html>
  <head>
    <meta charset="utf-8">
    <title>Diary</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <!-- Internal Library
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    -->
    <!-- Cloud Library -->
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="cordova.js"></script>
  </head>
    <body ng-app="app">
  <div>
  <div>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </div>
</div>
     
     <script id="home.html" type="text/ng-template">
<ion-view title="Home" id="page1">
  <ion-nav-buttons side="right" class="has-header">
        <button class="button button-icon" ng-click="insertRecord()">
        <i class="icon ion-compose"></i>
      </button>
  </ion-nav-buttons>
  <ion-content padding="true" class="has-header">
{{date}}
<br/>
{{details}}
<br/>
{{summary}}
  <h2>DETAILS</h2>
  <div class = "row">
           <div class = "col"><b>Date</b></div>
           <div class = "col"><b>Sales</b></div>    
        </div>
  <div class = "row" ng-class-odd="'odd'" ng-class-even="'even'"
  ng-repeat="detail in details"
 >
           <div class = "col">{{detail.date  | date:'yyyy-MM-dd HH:mm:ss Z'}}</div>
     <div class = "col">{{detail.value}}</div>    
        </div>  
  <h2>YEAR-MONTH SUMMARY</h2>
  <div class = "row">
           <div class = "col"><b>Date</b></div>
           <div class = "col"><b>Sales</b></div>    
        </div>
  <div class = "row" ng-class-odd="'odd'" ng-class-even="'even'"
  ng-repeat="(keyvalue)  in summary">
                <div class = "col">{{key}}</div>
                <div class = "col">{{value}}</div>  
        </div>  
       </ion-content>
</ion-view>
    </script>    
 <script id="insertRecord.html" type="text/ng-template">
  <div class="modal">
    <!-- Modal header bar -->
    <ion-header-bar class="bar-secondary">
      <h1 class="title">Insert Record</h1>
      <button class="button button-clear button-positive" ng-click="closeInsertRecord()">Cancel</button>
    </ion-header-bar>
    <!-- Modal content area -->
    <ion-content>
      <form ng-submit="submitInsertRecord(record)">
        <div class="list">
          <label class="item item-input">
            <input type="date" placeholder="Transaction Date" ng-model="record.date">
          </label>
                                        <label class="item item-input">
            <input type="text" placeholder="Transaction Value" ng-model="record.value">
          </label>
        </div>
        <div class="padding">
          <button type="submit" class="button button-block button-positive">Insert Record</button>
        </div>
      </form>
    </ion-content>
  </div>
</script>        
  </body>
</html>
JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope', '$stateParams', '$ionicModal',
function ($scope, $stateParams, $ionicModal) {
  $scope.date=new Date();

  var dataTrunk1={"details":[
    {date:$scope.date,value:100.50},
    {date:$scope.date,value:200.25}
  ]};
  $scope.details = dataTrunk1.details;

     
   
  function summarize() {
// convert to array
var datevalue=[];
  $scope.details.forEach(function(d){
  var obj =JSON.parse('{"' + d.date.toISOString().substring(0, 10) + '":'+ d.value +'}');
  datevalue.push(obj);
  });      
   
   
   
    var response = {};
   
    datevalue.forEach(function(d){
      console.log(d);
        for (var k in d) {
            var _ = k.split("-");
            var year = _[0];
            var month = _[1];        
         
            if (!response[year+"-"+month]) response[year+"-"+month] =  d[k];
            else response[year+"-"+month] = response[year+"-"+month]+d[k];
        }
    });
    console.log(response);
    return response;
}
$scope.summary=summarize();



  // Create and load the Modal
  $ionicModal.fromTemplateUrl('insertRecord.html', function(modal) {
    $scope.insertRecordModal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });
  // Called when the form is submitted
  $scope.submitInsertRecord = function(record) {
    $scope.details.push({
      date: record.date,
      value: record.value
    });
$scope.summary=summarize();
    record.date="";
    record.value = "";
    $scope.insertRecordModal.hide();
  };
  // Open our new task modal
  $scope.insertRecord = function() {
    $scope.insertRecordModal.show();
  };
  // Close the new task modal
  $scope.closeInsertRecord = function() {
    $scope.insertRecordModal.hide();
  };
   


}])
   
.config(function($stateProvider, $urlRouterProvider) {
  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider
   

      .state('home', {
    url: '/page1',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  })
$urlRouterProvider.otherwise('/page1')

});

4) Add DAILY Summary.

HTML
<html>
  <head>
    <meta charset="utf-8">
    <title>Diary</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <!-- Internal Library
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    -->
    <!-- Cloud Library -->
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="cordova.js"></script>
  </head>
    <body ng-app="app">
  <div>
  <div>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </div>
</div>
     
     <script id="home.html" type="text/ng-template">
<ion-view title="Home" id="page1">
  <ion-nav-buttons side="right" class="has-header">
        <button class="button button-icon" ng-click="insertRecord()">
        <i class="icon ion-compose"></i>
      </button>
  </ion-nav-buttons>
  <ion-content padding="true" class="has-header">
{{date}}
<br/>
{{details}}
<br/>
{{summaryYearMonth}}
<br/>
{{summaryDay}}
  <h2>DETAILS</h2>
  <div class = "row">
           <div class = "col"><b>Date</b></div>
           <div class = "col"><b>Sales</b></div>    
        </div>
  <div class = "row" ng-class-odd="'odd'" ng-class-even="'even'"
  ng-repeat="detail in details"
 >
           <div class = "col">{{detail.date  | date:'yyyy-MM-dd HH:mm:ss Z'}}</div>
     <div class = "col">{{detail.value}}</div>    
        </div>  
  <h2>YEAR-MONTH SUMMARY</h2>
  <div class = "row">
           <div class = "col"><b>Date</b></div>
           <div class = "col"><b>Sales</b></div>    
        </div>
  <div class = "row" ng-class-odd="'odd'" ng-class-even="'even'"
  ng-repeat="(key, value)  in summaryYearMonth">
                <div class = "col">{{key}}</div>
                <div class = "col">{{value}}</div>  
        </div>  
  <h2>DAY SUMMARY</h2>
  <div class = "row">
           <div class = "col"><b>Date</b></div>
           <div class = "col"><b>Sales</b></div>    
        </div>
  <div class = "row" ng-class-odd="'odd'" ng-class-even="'even'"
  ng-repeat="(key, value)  in summaryDay">
                <div class = "col">{{key}}</div>
                <div class = "col">{{value}}</div>  
        </div>  

       </ion-content>
</ion-view>
    </script>    
 <script id="insertRecord.html" type="text/ng-template">
  <div class="modal">
    <!-- Modal header bar -->
    <ion-header-bar class="bar-secondary">
      <h1 class="title">Insert Record</h1>
      <button class="button button-clear button-positive" ng-click="closeInsertRecord()">Cancel</button>
    </ion-header-bar>
    <!-- Modal content area -->
    <ion-content>
      <form ng-submit="submitInsertRecord(record)">
        <div class="list">
          <label class="item item-input">
            <input type="date" placeholder="Transaction Date" ng-model="record.date">
          </label>
                                        <label class="item item-input">
            <input type="text" placeholder="Transaction Value" ng-model="record.value">
          </label>
        </div>
        <div class="padding">
          <button type="submit" class="button button-block button-positive">Insert Record</button>
        </div>
      </form>
    </ion-content>
  </div>
</script>        
  </body>
</html>
JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope', '$stateParams', '$ionicModal',
function ($scope, $stateParams, $ionicModal) {
  $scope.date=new Date();

  var dataTrunk1={"details":[
    {date:$scope.date,value:100.50},
    {date:$scope.date,value:200.25}
  ]};
  $scope.details = dataTrunk1.details;

     
   
  function summarizeYearMonth() {
    // convert to array
    var datevalue=[];
    $scope.details.forEach(function(d){
      var obj =JSON.parse('{"' +
                          d.date.toISOString().substring(0, 10) +
                          '":'+ d.value +'}');
      datevalue.push(obj);
    });      
    var response = {};
    datevalue.forEach(function(d){
      console.log(d);
        for (var k in d) {
            var _ = k.split("-");
            var year = _[0];
            var month = _[1];
            var keyname = year+"-"+month;          
            if (!response[keyname]) response[keyname] =  d[k];
            else response[keyname] = response[keyname]+d[k];
        }
    });
    console.log(response);
    return response;
}
$scope.summaryYearMonth=summarizeYearMonth();

  function summarizeDay() {
    // convert to array
    var datevalue=[];
    $scope.details.forEach(function(d){
      var obj =JSON.parse('{"' +
                          d.date.toISOString().substring(0, 10) +
                          '":'+ d.value +'}');
      datevalue.push(obj);
    });      
    var response = {};
    datevalue.forEach(function(d){
      console.log(d);
        for (var k in d) {
            var _ = k.split("-");
            var year = _[0];
            var month = _[1];    
            var day = _[2];
            var keyname = year+"-"+month+"-"+day;
            if (!response[keyname]) response[keyname] =  d[k];
            else response[keyname] = response[keyname]+d[k];
        }
    });
    console.log(response);
    return response;
}
$scope.summaryDay=summarizeDay();  

  // Create and load the Modal
  $ionicModal.fromTemplateUrl('insertRecord.html', function(modal) {
    $scope.insertRecordModal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });
  // Called when the form is submitted
  $scope.submitInsertRecord = function(record) {
    $scope.details.push({
      date: record.date,
      value: record.value
    });
$scope.summaryYearMonth=summarizeYearMonth();
$scope.summaryDay=summarizeDay();   
    record.date="";
    record.value = "";
    $scope.insertRecordModal.hide();
  };
  // Open our new task modal
  $scope.insertRecord = function() {
    $scope.insertRecordModal.show();
  };
  // Close the new task modal
  $scope.closeInsertRecord = function() {
    $scope.insertRecordModal.hide();
  };
   


}])
   
.config(function($stateProvider, $urlRouterProvider) {
  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider
   

      .state('home', {
    url: '/page1',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  })
$urlRouterProvider.otherwise('/page1')

});

.

No comments:

Post a Comment