Basic Steps: 501 Sales Diary Apps

501 Sales Diary Apps

Building On Codepen Platform

Continue from the previous tutorial, http://basic-steps.blogspot.my/2017/01/403-create-ionic-inventory-category-apps.html

CodePen: http://codepen.io/notarazi/pen/zNdqYN

HTML

<html>

<head>

<title>Diary</title>

<!-- Internal Library

-->

</head>

<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>

<ion-view title="My Sales Diary" id="page1" style="font-weight:bold">

<ion-nav-buttons side="right" class="has-header">

</button>

</ion-nav-buttons>

<ion-content padding="true" class="has-header">

</center>

Sales Today

</div>

<br/> Cost Today

<div class="col">Target Cost Per Day</div>

<div class="col">Total Cost</div>

<div class="col">Cost Variance</div>

</div>

</div>

</div>

</div>

<br/> Sales Today

<div class="col"><b>Target Sales Per Day</b></div>

<div class="col"><b>Total Sales</b></div>

<div class="col"><b>Sales Variance</b></div>

</div>

</div>

</div>

</div>

</ion-content>

</ion-view>

</script>

<ion-side-menus enable-menu-with-back-views="false">

<ion-side-menu-content>

<ion-nav-bar class="bar-balanced">

<ion-nav-back-button></ion-nav-back-button>

<ion-nav-buttons side="left">

</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-balanced">

</ion-header-bar>

<ion-content padding="false" class="side-menu-left has-header ">

<ion-list id="menu-list1">

<h2>My Sales Diary</h2>

<p>keep moving!</p>

</div>

<ion-item class="item-icon-left item" id="menu-list-item1" ui-sref="menu.home" menu-close="">

<i class="icon ion-home"></i>Home

</ion-item>

<ion-item class="item-icon-left item" id="menu-list-item2" ui-sref="menu.monthly" menu-close="">

<i class="icon ion-stats-bars"></i>Diary

</ion-item>

<ion-item class="item-icon-left item" id="menu-list-item3" ui-sref="menu.settings" menu-close="">

<i class="icon ion-wrench"></i>Settings

</ion-item>

</ion-content>

</ion-side-menu>

</ion-side-menus>

</script>

<ion-view title="Monthly" id="page2">

<ion-content padding="true" class="has-header">

<h2>MONTHLY SUMMARY</h2>

<div class="col"><b>Year-Month</b></div>

<div class="col"><b>Costs</b></div>

<div class="col"><b>Sales</b></div>

</div>

<div class="row" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="item in listSummaryRecords|orderBy:'-yearmonth'" ui-sref="menu.daily({

param1:{{listSummaryIndex}},

param2:{{item.yearmonth|json}}})">

<div class="col">{{item.yearmonth}}</div>

</div>

</ion-content>

</ion-view>

</script>

<ion-view title="Daily" id="page3">

<ion-content padding="true" class="has-header">

Year-Month

</div>

<select ng-model="entry.yearmonth"

ng-options="yearmonth for yearmonth in yearmonths"

ng-init="entry.yearmonth=selectedyearmonth"

ng-change="refreshView()">

</select>

</label>

<h2>DAILY SUMMARY</h2>

<div class="col"><b>Costs</b></div>

<div class="col"><b>Sales</b></div>

</div>

</div>

</ion-content>

</ion-view>

</script>

<ion-view title="Details" id="page4">

<ion-nav-buttons side="right" class="has-header">

</button>

</ion-nav-buttons>

<ion-content padding="true" class="has-header">

<input type="date"

ng-model="entry.searchDate"

ng-change="refreshView()">

</label>

<h2>DETAILS</h2>

<div class="col"><b>Costs</b></div>

<div class="col"><b>Sales</b></div>

</div>

<div class="col">{{detail.date| date:'dd'}}</div>

<div class="col">{{detail.desc}}</div>

<div class="col">{{detail.cost}}</div>

<div class="col">{{detail.sale}}</div>

</div>

</ion-content>

</ion-view>

</script>

<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>

<ion-content>

</label>

</label>

</label>

</label>

</div>

<button type="submit" class="button button-block button-positive">Insert Record</button>

</div>

</form>

</ion-content>

</div>

</script>

<ion-header-bar class="bar-secondary">

<h1 class="title">Select Category</h1>

<button class="button button-clear button-positive" ng-click="closeSelectCategory()">Cancel</button>

</ion-header-bar>

<ion-content>

</div>

<ion-list>

<ion-item ng-repeat="item in CategoryItems" ng-click="submitCategory(item)">

{{item.desc}}::{{item.cost}}::{{item.sale}}

</ion-item>

</ion-list>

</div>

</form>

</ion-content>

</div>

</script>

<ion-view title="Settings" id="page5">

<ion-content padding="true" class="has-header">

<h2>SETTINGS</h2>

</ion-content>

</ion-view>

</script>

</body>

</html>

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) {}

])

.controller('menuCtrl', ['$scope', '$stateParams',

function($scope, $stateParams) {}

])

.controller('monthlyCtrl', ['$scope', '$stateParams', 'DataTree',

function($scope, $stateParams, DataTree) {

var titleSource = "inventoryRecordBookDetails";

var listRecords = [];

var listSummaryIndex = [];

var listSummaryRecords = [];

function summarizeMonthly() {

listRecords = DataTree.all(titleSource);

// init lists

listSummaryIndex = [];

listSummaryRecords = [];

// process listDetailRecords

listRecords.forEach(function(d) {

//console.log(d);

d.date = new Date(d.date);

yearmonthvalue = d.date.toISOString().substring(0, 7);

var obj = {

yearmonth: yearmonthvalue,

desc: d.desc,

cost: d.cost,

sale: d.sale

};

//assign arrayData item to lists

var i = listSummaryIndex.indexOf(yearmonthvalue);

if (i < 0) {

listSummaryIndex.push(yearmonthvalue);

listSummaryRecords.push(obj);

} else {

listSummaryRecords[i].cost =

parseFloat(listSummaryRecords[i].cost) +

parseFloat(obj.cost);

listSummaryRecords[i].sale =

parseFloat(listSummaryRecords[i].sale) +

parseFloat(obj.sale);

}

//console.log(listSummaryIndex);

//console.log(listSummaryRecords);

});

//console.log(listSummaryRecords);

}

function refreshView() {

summarizeMonthly();

$scope.listSummaryIndex = listSummaryIndex;

$scope.listSummaryRecords = listSummaryRecords;

}

$scope.$on('$ionicView.enter', function() {

refreshView();

});

}

])

.controller('dailyCtrl', ['$scope', '$stateParams', '$ionicModal', 'DataTree',

function($scope, $stateParams, $ionicModal, DataTree) {

$scope.entry = {};

$scope.yearmonths = $stateParams.param1;

$scope.selectedyearmonth = $stateParams.param2;

var titleSource = "inventoryRecordBookDetails";

var listRecords = [];

var listSummaryIndex = [];

var listSummaryRecords = [];

function summarizeDaily() {

listRecords = DataTree.all(titleSource);

// init lists

listSummaryIndex = [];

listSummaryRecords = [];

// process listRecords

listRecords.forEach(function(d) {

//console.log(d);

d.date = new Date(d.date);

e = d.date;

e = e.getTime();

yearmonthvalue = d.date.toISOString().substring(0, 7);

var obj = {

yearmonth: yearmonthvalue,

date: e,

cost: d.cost,

sale: d.sale

};

//assign arrayData item to lists

if (yearmonthvalue == $scope.entry.yearmonth) {

//console.log(obj.date);

//console.log(listSummaryIndex);

var i = listSummaryIndex.indexOf(obj.date);

//console.log(i);

if (i < 0) {

listSummaryIndex.push(obj.date);

listSummaryRecords.push(obj);

} else {

listSummaryRecords[i].cost =

parseFloat(listSummaryRecords[i].cost) +

parseFloat(obj.cost);

listSummaryRecords[i].sale =

parseFloat(listSummaryRecords[i].sale) +

parseFloat(obj.sale);

}

//console.log(listSummaryIndex);

//console.log(listSummaryRecords);

});

//console.log(listSummaryRecords);

}

$scope.refreshView = function() {

summarizeDaily();

$scope.listSummaryRecords = listSummaryRecords;

}

$scope.$on('$ionicView.enter', function() {

$scope.refreshView();

});

}

])

.controller('detailsCtrl', ['$scope', '$stateParams', '$ionicModal', '$ionicPopup', 'DataTree',

function($scope, $stateParams, $ionicModal, $ionicPopup, DataTree) {

$scope.entry = {};

var titleDetails = "inventoryRecordBookDetails";

var sourceDetails = DataTree.all(titleDetails);

// 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(entry) {

//convert the date into UTC Date

//to avoid time zone differences

var d = new Date(entry.date);

var utcDate = new Date(Date.UTC(

d.getFullYear(),

d.getMonth(),

d.getDate(), 0, 0, 0));

// add new item to data source

sourceDetails.push({

date: utcDate,

desc: entry.desc,

cost: entry.cost,

sale: entry.sale

});

//sort data source by date in ascending order

sourceDetails.sort(function(a, b) {

return new Date(a.date).getTime() -

new Date(b.date).getTime()

});

//save data source into storage

DataTree.save(titleDetails, sourceDetails);

$scope.Details = sourceDetails;

//if search date entry exists

//perform searchDate()

$scope.entry.searchDate = $scope.entry.date;

$scope.refreshView();

//reset entry value

$scope.entry.desc = null;

$scope.entry.cost = null;

$scope.entry.sale = null;

$scope.insertRecordModal.hide();

};

// Open our new task modal

$scope.insertRecord = function(item) {

//if searchDate is not null get its value

//else, get current date value

if ($scope.entry.searchDate == null) {

$scope.entry.date = new Date();

} else {

$scope.entry.date = $scope.entry.searchDate;

}

$scope.entry.desc = item.desc;

$scope.entry.cost = item.cost;

$scope.entry.sale = item.sale;

$scope.insertRecordModal.show();

};

// Close the new task modal

$scope.closeInsertRecord = function() {

$scope.insertRecordModal.hide();

};

// Create and load the Modal

$ionicModal.fromTemplateUrl('selectCategory.html', function(modal) {

$scope.selectCategoryModal = modal;

}, {

scope: $scope,

animation: 'slide-in-up'

});

// Called when the form is submitted

$scope.submitCategory = function(entry) {

$scope.CategoryItems = [];

$scope.selectCategoryModal.hide();

$scope.insertRecord(entry);

}

// Open our new Category Selection modal

$scope.selectCategory = function() {

$scope.selectCategoryModal.show();

};

// Close the new task modal

$scope.closeSelectCategory = function() {

$scope.CategoryItems = [];

$scope.selectCategoryModal.hide();

};

$scope.getCategoryItems = function(category) {

$scope.CategoryItems = [{

desc: 'Cat ' + category + ' Item 1',

cost: 10 * category,

sale: 20 * category

{

desc: 'Cat ' + category + ' Item 2',

cost: 10 * category,

sale: 20 * category

{

desc: 'Cat ' + category + ' Item 3',

cost: 10 * category,

sale: 20 * category

}

]

}

$scope.refreshView = function() {

//if input is null

if ($scope.entry.searchDate == null) {

$scope.details = [];

return;

} else { //if input is not null

var d = new Date($scope.entry.searchDate);

var testDate = new Date(Date.UTC(

d.getFullYear(),

d.getMonth(),

d.getDate(), 0, 0, 0));

var obj = sourceDetails.filter(function(obj) {

var sourceDate = new Date(obj.date);

//console.log(sourceDate.getTime()+"="+utcDate.getTime());

return (sourceDate.getTime() === testDate.getTime());

//return obj.date === $scope.detailsPage.inputDate;

});

//console.log(obj);

$scope.details = obj;

}

$scope.$on('$ionicView.enter', function() {

$scope.entry.searchDate = (

$stateParams.param1 == null ?

new Date() : new Date($stateParams.param1));

if ($stateParams.param2 == '1') {

$scope.selectCategory();

}

$scope.refreshView();

});

}

])

.controller('settingsCtrl', ['$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', {

url: '/side-menu21',

templateUrl: 'menu.html',

controller: 'menuCtrl'

})

.state('menu.monthly', {

url: '/page2',

views: {

'side-menu21': {

templateUrl: 'monthly.html',

controller: 'monthlyCtrl'

}

})

.state('menu.daily', {

url: '/page3',

params: {

param1: null,

param2: null

views: {

'side-menu21': {

templateUrl: 'daily.html',

controller: 'dailyCtrl'

}

})

.state('menu.details', {

url: '/page4',

params: {

param1: null,

param2: null

views: {

'side-menu21': {

templateUrl: 'details.html',

controller: 'detailsCtrl'

}

})

.state('menu.settings', {

url: '/page5',

views: {

'side-menu21': {

templateUrl: 'settings.html',

controller: 'settingsCtrl'

}

})

$urlRouterProvider.otherwise('/side-menu21/page1')

});

http://codepen.io/notarazi/pen/zNdqYN

Basic Steps

Labels

Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Tuesday, January 24, 2017

501 Sales Diary Apps

No comments:

Post a Comment

...