.
302 Create Ionic Sales Record Book With Local Storage
Building On Codepen Platform
Continue from the previous tutorial, http://basic-steps.blogspot.my/2017/01/301-create-ionic-sales-record-book.html
1) Add Codes For Local Storage Handling
HTML (No changes)
<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 (Using Ionic Factory)
Handling Dates with JavaScript is quite tricky as JavaScript stores date in UTC format which may differ from user (Web Browser) time zone.
We need to standardize the date before it is stored to Local Storage to avoid from UTC timing problem e.g 7am 1st January MYT stored as 11pm 31st December UTC.
|
angular.module('app', ['ionic'])
.factory('DataTree', function() {
return {
all: function(trunkName) {
var trunkString = window.localStorage[trunkName];
if(trunkString) {
return angular.fromJson(trunkString);
}
return [];
},
save: function(trunkName,trunkString) {
console.log(trunkString);
window.localStorage[trunkName] =
angular.toJson(trunkString);
}
}
})
.controller('homeCtrl', ['$scope', '$stateParams', '$ionicModal','DataTree',
function ($scope, $stateParams, $ionicModal,DataTree) {
$scope.date=new Date();
//var trunkDetails=[
// {date:$scope.date,value:100.50},
// {date:$scope.date,value:200.25}
//];
//DataTree.save("trunkDetails",trunkDetails);
$scope.details = DataTree.all("trunkDetails");
//console.log($scope.details);
function summarizeYearMonth() {
// convert to array
var datevalue=[];
$scope.details.forEach(function(d){
d.date=new Date(d.date);
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){
d.date=new Date(d.date);
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) {
var d = new Date(record.date);
var utcDate = new Date(Date.UTC(
d.getFullYear(),
d.getMonth(),
d.getDate(), 0, 0, 0));
$scope.details.push({
date: utcDate,
value: record.value
});
DataTree.save("trunkDetails",$scope.details);
$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')
});
|
(Since the code changes are related to local storage handling only, the output will look similar to that of the previous tutorial ie without local storage handling)
No comments:
Post a Comment