Scribd
Upload
851 views7 pages

SketchWare Create Ionic Inventory Apps Data Entry

This document provides instructions for creating an Ionic inventory app with data entry and summary views. It describes adding code for the summary, details and data entry views in HTML and linking them through ui-router states. The app allows viewing an item summary, accessing a details view with more information, and entering new data.

Uploaded by

nixneon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
851 views7 pages

SketchWare Create Ionic Inventory Apps Data Entry

This document provides instructions for creating an Ionic inventory app with data entry and summary views. It describes adding code for the summary, details and data entry views in HTML and linking them through ui-router states. The app allows viewing an item summary, accessing a details view with more information, and entering new data.

Uploaded by

nixneon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

More

Basic Steps
Easy Step By Step Tutorial

POPULAR POSTS

Android
Sketchware
Tutorial:
Getting
Started
. Sketchware Tutorial - LABELS
Getting Started NO
PROGRAMMING ionic (40) Google Apps Script (28) Construct2 (6) Google API (5) Google Cloud (5) Java (5) presentation (5) jasper
CODES AT ALL! This (4) plunker (4) Notepad++ (2) liferay (2) ms access (2) mysql (2) PHP (1) SQLite (1) android (1) blogspot (1) html5 (1) ionic-creator (1) javascript (1) mobile (1)
tutorial is a step-by-step plainjs (1) utilties (1)
guide for beginners.
Sketch...
TUESDAY, JANUARY 24, 2017
402 Create
Ionic
Inventory 402 Create Ionic Inventory Apps Data Entry and Summary LABELS
Apps Data
android blogspot Con
Entry and
Summary Google Apps S
html5 ionic ionic-creat
. 402 Create Ionic
Inventory Apps Data
liferay mobile ms access
Entry and Summary
Building On Codepen plainjs plunker presenta
Platform Continue from
the previous tutorial,
http:/...

111 Ionic
with Google
Form and
Google
Sheet
. 111 Ionic with Google
Form and Google Sheet
This tutorial .
demonstrates how to post
responses to Google
Form and view them back
402 Create Ionic Inventory Apps Data Entry and
via ... Summary
Simple
JavaScript Building On Codepen Platform
Web Token Continue from the previous tutorial,http://basic-steps.blogspot.my/2017/01/401-create-ionic-inventory-apps.html
(JWT) CodePen: http://codepen.io/notarazi/pen/Ndgvge
Signing and
Validation
. <script
src="https://kjur.github.io/j 1) Add Codes For Summary, Details and Data Entry
srsasign/jsrsasign-latest-
all-min.js"></script> HTML
<script> /...
<html>
Google Sheet Data <head>
CRUD + App Script + <meta charset="utf-8">
jQuery <title>Diary</title>
. Google Sheet Data <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no,
CRUD + App Script +
width=device-width">
<!-- Internal Library
jQuery Follow the steps <link href="lib/ionic/css/ionic.css" rel="stylesheet">
at: http://programming- <script src="lib/ionic/js/ionic.bundle.js"></script>
steps.blogspot.com/2016/ -->
10/google-sheet-data-c... <!-- Cloud Library -->
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
108 Ionic <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
Gets Data <script src="cordova.js"></script> POPULAR POSTS
From <script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
Google </head> iOS: Xcode, PHP, My
Sheets <body ng-app="app"> This tutorial will guide
<div> simple app with a Logi
. 108 Ionic Gets Data <div>
From Google Sheets This username and passwo
<ion-nav-bar class="bar-stable">
demo is based on <ion-nav-back-button></ion-nav-back-button> then posts i...
https://gist.github.com/ma </ion-nav-bar>
rcelpetersen/6f93844683 <ion-nav-view></ion-nav-view> Android S
3a634094b2 . ... </div> Getting S
</div>
<script id="home.html" type="text/ng-template"> . Sketchw
1004 Apps <ion-view title="Home" id="page1"> Started N
Scripts <ion-nav-buttons side="right" class="has-header"> CODES
HTML <button class="button button-icon" a step-by-step guide fo
Service ui-sref="menu.details({param2:'1'})">
<i class="icon ion-compose"></i>
. 1004 Apps </button> Xcode 4.6: Embeddin
Scripts HTML Service </ion-nav-buttons> App
How to write Google App <ion-content padding="true" class="has-header">
Script to provide HTML <button class="button button-block button-calm" ui-sref="menu.details"> This tutorial guides the
Service The HTML View Details webpage in an iOS Ap
service lets you serve </button> from http://www.appco
web pages th... <button class="button button-block button-royal" ui-sref="menu.monthly"> tutorial-cre...
View Summary
</button>
SPSS - Preparing the </ion-content> XCode :
data file </ion-view> Project
Practical Exercises
</script> Copied fr
<script id="menu.html" type="text/ng-template">
Survey4ED.sav This is a <ion-side-menus enable-menu-with-back-views="false"> http://dee
real data file, condensed <ion-side-menu-content> /02/writin
from a study that was <ion-nav-bar class="bar-stable"> iphone-ios-in-xcode/ W
conducted by my <ion-nav-back-button></ion-nav-back-button> iPhone iOS in Xcode ..
Graduate Diploma in <ion-nav-buttons side="left">
Educ... <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button> Android -
</ion-nav-buttons> Example
Overview of SPSS </ion-nav-bar> This tuto
Application Window <ion-nav-view name="side-menu21"></ion-nav-view> http://ww
1) Run SPSS V19 2) By </ion-side-menu-content> id/androi
Default, A Start Up Dialog
<ion-side-menu side="left" id="side-menu21"> request-example-in-an
<ion-header-bar class="bar-stable">
box pops up. Notice that <div class="title">Menu</div>
it provides ways for the </ion-header-bar> PhoneGap@Mac: Cr
user to quickly start the <ion-content padding="false" class="side-menu-left has-header "> Project
applicati... <ion-list id="menu-list1">
<ion-item id="menu-list-item1" ui-sref="menu.home" menu-close="">Home</ion- This tutorial guides the
item> PhoneGap (Version 2.5
Java <ion-item id="menu-list-item2" ui-sref="menu.monthly" menu- (Version 4.6). This is a
Simple close="">Summary</ion-item> http://co...
AWT Swing </ion-list>
On </ion-content>
</ion-side-menu> Laravel -
Notepad++
</ion-side-menus> method i
. copy and paste the </script> . Two com
following code into a <script id="monthly.html" type="text/ng-template"> for a requ
Notepad++ window <ion-view title="Monthly" id="page2"> a client a
import java.awt.Color ; <ion-content padding="true" class="has-header"> and POST. GET - Req
import java.awt.Graphics <h2>MONTHLY SUMMARY</h2>
<div class="row"> specifie...
; import java.awt....
<div class="col"><b>Year-Month</b></div>
<div class="col"><b>Costs</b></div> Xcode 4.6: RootView
<div class="col"><b>Sales</b></div> This tutorial guides th
TOTAL PAGEVIEWS </div>
<div class="row" create an iOS applicati
ng-class-odd="'odd'" to switch between two
ng-class-even="'even'" RootView Con...
ng-repeat="item in listSummaryRecords|orderBy:'-yearmonth'"
131,466 ui-sref="menu.daily({ Xcode 4.6: Date Picke
param1:{{listSummaryIndex}},
param2:{{item.yearmonth|json}}})"> How to use datePicker
<div class="col">{{item.yearmonth}}</div> (UIDatePicker) Step 1:
<div class="col">{{item.cost}}</div> need to do is to indica
<div class="col">{{item.sale}}</div> controller would be ...
</div>
</ion-content>
</ion-view> MYSQL - Grant ALL
</script> Database To New Us
<script id="daily.html" type="text/ng-template"> 1) MySQL is The world
<ion-view title="Daily" id="page3"> source database . It is
<ion-content padding="true" class="has-header">
<label class = "item item-input item-select"> many LAMP/WAMP/M
<div class = "input-label"> including XA...
Year-Month
</div>
<select ng-model="entry.yearmonth"
ng-options="yearmonth for yearmonth in yearmonths" ...
ng-init="entry.yearmonth=selectedyearmonth"
ng-change="refreshView()"> View My
</select> Stats
</label>
<h2>DAILY SUMMARY</h2>
<div class="row"> BLOG ARCHIVE
<div class="col"><b>Date</b></div>
<div class="col"><b>Costs</b></div> ▼ 2017 (71)
<div class="col"><b>Sales</b></div>
</div> ► May (3)
<div class="row"
ng-class-odd="'odd'" ► April (2)
ng-class-even="'even'"
ng-repeat="item in listSummaryRecords|orderBy:'-date'" ► March (6)
ui-sref="menu.details({param1:{{item.date}}})"> ► February (22)
<div class="col">{{item.date| date:'dd'}}</div>
<div class="col">{{item.cost}}</div> ▼ January (38)
<div class="col">{{item.sale}}</div>
</div> Download a porta
</ion-content>
</ion-view> 501 Sales Diary A
</script>
<script id="details.html" type="text/ng-template"> 403 Create Ionic
<ion-view title="Details" id="page4"> Apps

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


<button class="button button-icon" ng-click="insertRecord()"> Entry and Sum
<i class="icon ion-compose"></i>
</button> 401 Create Ionic
</ion-nav-buttons> Structure
<ion-content padding="true" class="has-header">
<label class="item item-input"> 306 Create Ionic
<span class="input-label">Date</span> Detail Summa
<input type="date"
ng-model="entry.searchDate" 305 Create Ionic
ng-change="refreshView()"> Detail Records
</label>
<h2>DETAILS</h2> 304 Create Ionic
<div class="row"> Detail Pages
<div class="col"><b>Date</b></div>
<div class="col"><b>Desc</b></div> 303 Create Ionic
<div class="col"><b>Costs</b></div> With Side Men
<div class="col"><b>Sales</b></div>
</div> 302 Create Ionic
With Local Sto
<div class="row" 301 Create Ionic
ng-class-odd="'odd'" Summary App
ng-class-even="'even'"
ng-repeat="detail in details |orderBy:'-date'"> 300 Create Ionic
<div class="col">{{detail.date| date:'dd'}}</div> Apps
<div class="col">{{detail.desc}}</div>
<div class="col">{{detail.cost}}</div> 204 Ionic Side M
<div class="col">{{detail.sale}}</div> From Scratch
</div>
</ion-content> 203 Ionic Side M
</ion-view> From Scratch
</script>
<script id="insertRecord.html" type="text/ng-template"> 202 Ionic Side M
<div class="modal"> From Scratch
<!-- Modal header bar -->
<ion-header-bar class="bar-secondary"> 201 Ionic Side M
<h1 class="title">Insert Record</h1> From Scratch
<button class="button button-clear button-positive" ng-
click="closeInsertRecord()">Cancel</button> 200 Ionic Side M
</ion-header-bar> Scratch
<!-- Modal content area -->
<ion-content> 112 Ionic With Re
<form ng-submit="submitInsertRecord(entry)">
<div class="list"> 111 Ionic with Go
<label class="item item-input"> Sheet
<input type="date" placeholder="Transaction Date" ng-model="entry.date">
</label> 110 Ionic Form a
<label class="item item-input"> 109 Ionic Manipu
<input type="text" placeholder="Transaction Desc" ng-model="entry.desc">
</label> 108 Ionic Gets D
<label class="item item-input"> Sheets
<input type="text" placeholder="Transaction Cost" ng-model="entry.cost">
</label> 107 Ionic Auto Sc
<label class="item item-input"> Function
<input type="text" placeholder="Transaction Sale" ng-model="entry.sale">
</label> 107 Ionic Auto Sc
</div>
<div class="padding"> 106 Ionic Select
<button type="submit" class="button button-block button-positive">Insert
Record</button> 105 Ionic Modal
</div>
</form> 104 Ionic Filter Te
</ion-content>
</div> 104 Ionic Search
</script>
</body> PlainJS: Search A
</html> Value
103 Ionic Local S
102 Ionic Todo P

JS 101 Ionic Todo P


100 Ionic Side M
angular.module('app', ['ionic'])
.factory('DataTree', function() { 100 Ionic Side M
return {
all: function(trunkName) { 100 Ionic Tabs Te
var trunkString = window.localStorage[trunkName]; 100 Ionic Blank T
if (trunkString) {
return angular.fromJson(trunkString); IONIC Framewor
}
return []; How To Install Bl
},
save: function(trunkName, trunkString) {
//console.log(trunkString); ► 2016 (48)
window.localStorage[trunkName] = angular.toJson(trunkString);
} ► 2014 (5)
}
}) ► 2013 (96)

.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() {
//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.value = 0;
$scope.insertRecordModal.show();
};
// Close the new task modal
$scope.closeInsertRecord = function() {
$scope.insertRecordModal.hide();
};

$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.insertRecord();
}
$scope.refreshView();
});
}
])
.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'
}
}
})
$urlRouterProvider.otherwise('/side-menu21/page1')
});

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

Posted by admin at 11:32 AM

Labels: ionic

No comments:

Post a Comment

Enter your comment...

Comment as: Google Accoun

Publish Preview

Newer Post Home Older Post

Subscribe to: Post Comments (Atom)

ABOUT ME MY FB MY LINKEDIN

Razi.Net.My
1,045 จํานวนคนทีถูกใจ

[email protected]
ถูกใจเพจ แชร์

Razi works as a Training Consultant. His areas of interest include:


เป็ นคนแรกในกลุม
่ เพือนของคุณทีถูกใจสิงนี
eBusiness
Accounting Information System
Programming
Mobile Development
Big Data & Cloud Services
Web Analytics & Sentiment Analysis
Content Management System razi mahmood
Adobe Creative Suites TRAINING CONSULTANT AT RAZI.NE
Microsoft Office Suites Kuala Lumpur, Malaysia
Google G Suites
Google Apps Script Visit MyLinkedIn

Read more about him at fb.com/pg/razi.net.my/about/

Picture Window theme. Theme images by Galeries. Powered by Blogger.

You might also like