<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic@*" data-semver="1.3.1" rel="stylesheet" href="https://code.ionicframework.com/1.3.1/css/ionic.min.css" />
<script data-require="ionic@*" data-semver="1.3.1" src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" href="style.css" />
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="directives.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-chevron-left">
Back
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
/* Styles go here */
$dark: #045182 !default; /* Brown 54301a */
$positive: #055e98 !default; /* Dark Green 3789be */
$balanced: #8cc63f !default; /* Light Green */
$twitter: #4099FF !default;
$stable: #dedede !default;
$royal: #18c1bf !default;
.pane, .view, .list {
background: transparent;
}
.notification-alert{
background-color: #FF6600 !important;
border-color: #ffa500 !important;
.item-content{
background-color: transparent !important;
}
}
.notification-message{
background-color: $stable !important;
border-color: $dark !important;
.item-content{
background-color: transparent !important;
}
}
.notification-important{
background-color: $positive !important; //rgba(192,192,192,0.9)#206f08
border-color: $royal !important;
.item-content{
background-color: transparent !important;
}
}
.notification-announcement{
background-color: rgba(255,255,255,0.4) !important; //rgba(192,192,192,0.9)
border-color: $dark !important;
border-radius: 8px;
.item-content{
background-color: transparent !important;
}
}
p.small{
font-size: 0.85em;
line-height: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
//padding-left: 5px;
// margin-left:3px;
}
.soilbg {
background-color: $positive; //#1f120a
}
p.title{
text-shadow: 0 0 2px #FFFFFF, 0 1px 1px rgba(0, 0, 0, 0.3);
//padding-left: 5px;
// margin-left:3px;
}
// Ionic Starter App, v0.9.20
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'starter.directives'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
StatusBar.styleDefault();
});
})
.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
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'tab-account.html',
controller: 'AccountCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
This is a blank ionic framework starter template.
https://github.com/driftyco/ionic-starter-tabs
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
$scope.notifications = [ {
"date" : 1476474861114,
"important" : false,
"leader" : {
"id" : "10153086914271174",
"image" : "https://scontent.xx.fbcdn.net/v/t1.0-1/p100x100/10346455_10152372569116174_7447413973526919786_n.jpg?oh=9f97f15c7f3794020ef8dd3d2c9f359f&oe=58683EF3"
},
"text" : "that",
"title" : "this"
}, {
"date" : 1476474861114,
"important" : false,
"leader" : {
"id" : "10153086914271174",
"image" : "https://scontent.xx.fbcdn.net/v/t1.0-1/p100x100/10346455_10152372569116174_7447413973526919786_n.jpg?oh=9f97f15c7f3794020ef8dd3d2c9f359f&oe=58683EF3"
},
"text" : "other thing",
"title" : "the"
}, {
"date" : 1476542070253,
"important" : true,
"leader" : {
"id" : "10153086914271174",
"image" : "https://scontent.xx.fbcdn.net/v/t1.0-1/p100x100/10346455_10152372569116174_7447413973526919786_n.jpg?oh=9f97f15c7f3794020ef8dd3d2c9f359f&oe=58683EF3"
},
"text" : "here it is. Im going to make this one longer to test the columns and rows that i inserted in to the item so that i can save the text from going under the picture and looking stupid this should be long enough dont you think?",
"title" : "testing the new important message"
}, {
"date" : 1476542187764,
"important" : false,
"leader" : {
"id" : "10153086914271174",
"image" : "https://scontent.xx.fbcdn.net/v/t1.0-1/p100x100/10346455_10152372569116174_7447413973526919786_n.jpg?oh=9f97f15c7f3794020ef8dd3d2c9f359f&oe=58683EF3"
},
"text" : "do it again",
"title" : "that was wierd"
}, {
"date" : 1476722681843,
"important" : false,
"leader" : {
"id" : "10153086914271174",
"image" : "https://scontent.xx.fbcdn.net/v/t1.0-1/p100x100/10346455_10152372569116174_7447413973526919786_n.jpg?oh=9f97f15c7f3794020ef8dd3d2c9f359f&oe=58683EF3"
},
"text" : "This is it",
"title" : "Hi"
} ];
})
angular.module('starter.services', [])
/**
* A simple example service that returns some data.
*/
.factory('Friends', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var friends = [
{ id: 0, name: 'Scruff McGruff' },
{ id: 1, name: 'G.I. Joe' },
{ id: 2, name: 'Miss Frizzle' },
{ id: 3, name: 'Ash Ketchum' }
];
return {}
});
<!--
This template loads for the 'tab.friend-detail' state (app.js)
'firend' is a $scope variable created in the FriendsCtrl controller (controllers.js)
The FriendsCtrl pulls data from the Friends service (service.js)
The Friends service returns an array of friend data
-->
<ion-view title="{{friend.name}}">
<ion-content has-header="true" padding="true">
</ion-content>
</ion-view>
<ion-view title="Account">
<ion-content overflow-scroll="true" scroll="true" class="has-header padding">
<h1>Overflow scroll</h1>
<p>On iphone tapping slightly above or below text opens keyboard, but doesn't focus on textfield.</p>
<input type="text" name="name" style="border: 1px solid grey;">
</ion-content>
</ion-view>
<ion-view title="Notifications">
<ion-content class="has-header padding soilbg">
<p>Sorry the Sass isnt working...</p>
<p>Cant get the update Noification Directive working. Slide the item to the left (click on "edit"):</p>
<ion-list show-delete="false" can-swipe="true">
<notification ng-repeat="notice in notifications | orderBy: ['!important', '-date'] track by $index" message="notice" file="notificationItem"></notification>
</ion-list>
</ion-content>
</ion-view>
<ion-view title="Friends">
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friend/{{friend.id}}">
{{friend.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top">
<!-- Pets Tab -->
<ion-tab title="Works" icon="icon ion-home" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- About Tab -->
<ion-tab title="Broken" icon="icon ion-gear-b" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
angular.module('starter.directives', [])
.directive("notification", function($rootScope) {
return {
restrict: 'AE',
scope: {
type: '@?type',
message: '=?message'
},
replace: true,
template: "<div ng-include='contentUrl'></div>",
link: function(scope, element, attrs) {
scope.contentUrl = attrs.file + '.html';
attrs.$observe("file", function(v) {
scope.contentUrl = v + '.html';
});
},
controller: function($scope, $rootScope) {
//something interesting here.
$scope.hidden = false;
$scope.leaderImage = "";
$scope.notification = "";
$scope.canEdit = false;
if ($scope.message) {
$scope.leaderImage = $scope.message.leader.image;
if ($scope.message.important && !$scope.type) {
$scope.type = "important"
} else {
$scope.type = "message"
}
}
if ($scope.type === "alert" && $rootScope.pastDue) {
$scope.title = "ATTENTION:"
$scope.notification = $rootScope.pastDueNotification;
} else if ($scope.type === "message") {
if ($scope.message) {
$scope.title = $scope.message.title;
$scope.notification = $scope.message.text;
}
} else {
if ($scope.message) {
$scope.title = $scope.message.title;
$scope.notification = $scope.message.text;
}
}
$scope.closeNotification = function() {
$scope.hidden = true;
}
}
};
})
.directive("updateNotification", function($rootScope, $timeout, $ionicListDelegate) {
return {
//require: "^PrayersCtrl",
restrict: 'E',
scope: {
notification: '='
},
replace: true,
template: "<div ng-include='contentUrl'></div>",
link: function(scope, element, attrs) {
scope.contentUrl = attrs.file + '.html';
attrs.$observe("file", function(v) {
scope.contentUrl = v + '.html';
});
},
controller: function($scope, $ionicModal, $location) {
var ctrl = this;
$scope.notice = $scope.notification;
$scope.updateNotification = function(data) {
$rootScope.show('Updating notification...');
};
ctrl.updateNotificationFailure = function(error) {
console.log('POST ERROR:', error);
};
$ionicModal.fromTemplateUrl('updateNotification.html', {
scope: $scope
}).then(function(modal) {
$scope.updateNotificationModal = modal;
});
// Open the update modal
n = function() {
$scope.updateNotificationModal.show();
$ionicListDelegate.closeOptionButtons();
//console.log($scope.prayerObj);
};
// Triggered in the update modal to close it
$scope.closeUpdateNotification = function() {
$scope.updateNotificationModal.hide();
};
}
};
});
<ion-item ng-if="type === 'alert'" ng-hide="hidden" class="item item-icon-left notification-alert item-text-wrap" ng-href="#/app/billing">
<i class="icon ion-alert-circled light"></i>
<h2 class="light"><b>{{title}}</b></h2><hr>
<p><span class="light"><b>{{notification}}</b></span></p>
<div class="buttons">
<!-- <update-notification notification="message" file="updateNotificationIcon"></update-notification> -->
<button class="button button-clear" ng-click="closeNotification()">
<i class="icon ion-close-circled"></i>
</button>
</div>
</ion-item>
<ion-item ng-if="type === 'announcement'" ng-hide="hidden" class="item item-icon-left item-button-right notification-announcement item-text-wrap">
<i class="icon ion-android-hand dark"></i>
<!-- <h2 class="stable"><b>Important Message: </b></h2> -->
<p class="title" ng-if="title"><span class="dark"><b>{{title}}</b></span></p><hr ng-if="title">
<p class="small"><span class="stable"><b>{{notification}}</b></span></p>
<div class="buttons">
<update-notification notification="message" file="updateNotificationIcon"></update-notification>
<button class="button button-clear" ng-click="closeNotification()">
<i class="icon ion-close-circled"></i>
</button>
</div>
</ion-item>
<ion-item ng-if="type === 'important'" ng-hide="hidden" class="item item-icon-left item-button-right notification-important item-text-wrap">
<i class="icon ion-android-hand royal"></i>
<h2 class="title light"><b>Important Message: </b></h2>
<hr><p ng-if="title"><span class="royal"><b>{{title}}</b></span></p>
<p class="small"><span class="light"><b>{{notification}}</b></span></p>
<update-notification notification="message" file="updateNotificationOption"></update-notification>
<ion-option-button class="button-calm" ng-click="closeNotification()">
Close
</ion-option-button>
</ion-item>
<ion-item ng-if="type === 'message'" ng-hide="hidden" class="item item-icon-left item-button-right notification-message item-text-wrap">
<i class="icon ion-paper-airplane dark"></i>
<h2>Message:</h2>
<hr><p ng-if="title"><b>{{title}}</b></p>
<p class="small">{{notification}}</p>
<update-notification notification="message" file="updateNotificationOption"></update-notification>
<ion-option-button class="button-calm" ng-click="closeNotification()">
Close
</ion-option-button>
</ion-item>
<ion-option-button class="button-balanced" ng-click="showUpdateNotification()">
Edit
</ion-option-button>
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Update a Member Notification</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeUpdateNotification()">
<i class="icon ion-close-circled"></i>
</button>
</div>
</ion-header-bar>
<ion-content>
<form ng-submit="updateNotification(notification)">
<div class="list">
<p>{{notification}}</p>
<ion-toggle ng-model="notification.important" toggle-class="toggle-dark"><span class="dark">Important</span> <p class="group-owner-name">Toggling this shows the notice at the top of the Church profile page and the Home page.</p> </ion-toggle>
<label class="item item-input">
<span class="input-label">Title</span>
<input type="text" ng-model="notification.title">
</label>
<label class="item item-input">
<span class="input-label">notification</span>
<input type="text" ng-model="notification.text">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" ng-disabled="!notification.text.length >= 20">Update Notification</button>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>