.
202 Ionic Side Menu Record Book Apps From Scratch
Building On Codepen Platform
Objective:
1. Adding Local Storage To The Apps.
2. Date is truncated to zero hours.
3. Date is stored in Epoch format.
4. Multiple data entry for the same date is allowed.
5. Displayed data is sorted by date in ascending order.
Continue from the previous tutorial, http://basic-steps.blogspot.my/2017/01/201-ionic-side-menu-record-book-apps.html .
In Tutorial 201, we used the Dummy Data to test the app.
In this Tutorial, we will add Factory Code to manage the Local Storage for data storage.
This app allows user to enter multiple daily records with zero hours.
Date is stored in epoch format.
1) JS CODE
Use of Ionic Factory Code To Read/Write Data to Local Storage.
Remove the codes in the future
Implement the codes in the future
JS Code
angular.module('app', ['ionic'])
.factory('DataGroups', function() {
return {
all: function() {
var strDataGroups = window.localStorage['datagroups1'];
if(strDataGroups) {
//console.log(strDataGroups);
return angular.fromJson(strDataGroups);
}
return [];
},
save: function(strDataGroups) {
window.localStorage['datagroups1'] = angular.toJson(strDataGroups);
}
}
})
.controller('homeCtrl', ['$scope', '$stateParams', '$ionicModal', 'DataGroups',
function ($scope, $stateParams, $ionicModal, DataGroups) {
// Initialize dataGroups
var initDataGroups = function() {
//initialize with dummy data
var dataGroup ={daily:[{
date:978278400000,
cost:1
}],settings:[]};
//var dataGroup ={daily:[],settings:[]};
$scope.dataGroups.push(dataGroup);
console.log("Data initialized.");
console.log($scope.dataGroups[0]);
DataGroups.save($scope.dataGroups);
}
// Get data from storage
// If data length=0, call initDataGroups
$scope.dataGroups=DataGroups.all();
if ($scope.dataGroups.length==0){
console.log("Init data groups.");
initDataGroups();
}
// Else
else{
console.log("Data exists.");
console.log($scope.dataGroups[0].daily);
}
//get the daily subgroup of the first dataGroup
$scope.datagroups=$scope.dataGroups[0].daily;
// 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 epochDate = new Date(record.date); epochDate.setHours(0, 0, 0); //set zero hours epochDate = epochDate.getTime(); //convert to epoch time $scope.datagroups.push({ date: epochDate, cost: record.cost });
$scope.dataGroups[0].daily=$scope.datagroups;
DataGroups.save($scope.dataGroups);
$scope.insertRecordModal.hide();
record.date="";
record.cost = "";
};
// Open our new task modal
$scope.insertRecord = function() {
$scope.insertRecordModal.show();
};
// Close the new task modal
$scope.closeInsertRecord = function() {
$scope.insertRecordModal.hide();
};
}])
.controller('cartCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('cloudCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('menuCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('menu.home', {
url: '/page1',
views: {
'side-menu21': {
templateUrl: 'home.html',
controller: 'homeCtrl'
}
}
})
.state('menu.cart', {
url: '/page2',
views: {
'side-menu21': {
templateUrl: 'cart.html',
controller: 'cartCtrl'
}
}
})
.state('menu.cloud', {
url: '/page3',
views: {
'side-menu21': {
templateUrl: 'cloud.html',
controller: 'cloudCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'menu.html',
controller: 'menuCtrl'
})
$urlRouterProvider.otherwise('/side-menu21/page1')
});
|
2) HTML Code
<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">
<div class = "row">
<div class = "col"><b>Date</b></div>
<div class = "col"><b>Cost</b></div>
</div>
<div class = "row" ng-repeat="record in datagroups| orderBy : 'date':false" ng-class-odd="'odd'" ng-class-even="'even'">
<div class = "col">{{record.date | date:'yyyy-MM-dd HH:mm:ss Z'}}</div>
<div class = "col">{{record.cost | currency}}</div>
</div>
</ion-content>
</ion-view>
</script>
<script id="cart.html" type="text/ng-template">
<ion-view title="Cart" id="page2">
<ion-content padding="true" class="has-header"></ion-content>
</ion-view>
</script>
<script id="cart.html" type="text/ng-template">
<ion-view title="Cart" id="page2">
<ion-content padding="true" class="has-header"></ion-content>
</ion-view>
</script>
<script id="cloud.html" type="text/ng-template">
<ion-view title="Cloud" id="page3">
<ion-content padding="true" class="has-header"></ion-content>
</ion-view>
</script>
<script id="menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="side-menu21"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" id="side-menu21">
<ion-header-bar class="bar-stable">
<div class="title">Menu</div>
</ion-header-bar>
<ion-content padding="false" class="side-menu-left has-header ">
<ion-list id="menu-list1">
<ion-item id="menu-list-item1" ui-sref="menu.home" menu-close="">Home</ion-item>
<ion-item id="menu-list-item2" ui-sref="menu.cart" menu-close="">Cart</ion-item>
<ion-item id="menu-list-item3" ui-sref="menu.cloud" menu-close="">Cloud</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</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 Cost" ng-model="record.cost">
</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>
|
3) Outcome.
202 Ionic Side Menu Record Book Apps From Scratch (http://codepen.io/notarazi/pen/ZLQvJd )
No comments:
Post a Comment