Adding configuration management and login modal

Caio Almeida
1 parent 5c81c623
Showing 5 changed files with 64 additions and 3 deletions Show diff stats
.gitignore
ConfJuvApp/www/index.html
ConfJuvApp/www/js/config.js.example
ConfJuvApp/www/js/controllers.js
README.txt
 *~
 *.sw*
+ConfJuvApp/www/js/config.js
@@ -18,6 +18,7 @@
     <!-- your app's js -->
     <script src="js/app.js"></script>
     <script src="js/controllers.js"></script>
+    <script src="js/config.js"></script>
   </head>
   <body ng-app="confjuvapp">
@@ -26,7 +27,7 @@
         <h1 class="title">3ª Conferência Nacional de Juventude</h1>
         <div class="buttons">
-          <button class="button" ng-click="openModal()">Adicionar proposta</button>
+          <button class="button" ng-click="openModal()">Entrar</button>
         </div>
       </ion-header-bar>
       <ion-content>
@@ -37,5 +38,25 @@
         </ion-list>
       </ion-content>
     </ion-pane>
+
+    <script id="modal.html" type="text/ng-template">
+      <div class="modal">
+        <div class="bar bar-header bar-calm">
+          <button class="button" ng-click="closeModal()">Voltar</button>
+          <h1 class="title">Entrar</h1>
+        </div>
+        <form ng-submit="Login(data)">
+          <div class="list">
+            <div class="list list-inset">
+              <label class="item item-input">
+                <input type="text" placeholder="Nome de usuário" ng-model="data.login">
+              </label>
+            </div>
+            <button class="button button-block button-positive" type="submit">Entrar</button>
+          </div>
+        </form>
+      </div>
+    </script>
+
   </body>
 </html>
@@ -0,0 +1,5 @@
+var ConfJuvAppConfig = {
+  noosferoApiHost: '',
+  noosferoApiVersion: '',
+  noosferoApiPrivateToken: ''
+};
 angular.module('confjuvapp.controllers', [])
-  .controller('ProposalCtrl', function($scope) {
+  .controller('ProposalCtrl', function($scope, $ionicModal) {
+
     // FIXME: This list should come from the server
     $scope.proposalList = [
       {
@@ -9,4 +10,35 @@ angular.module(&#39;confjuvapp.controllers&#39;, [])
         title: 'Desmilitarizar a polícia'
       }
     ];
-  });
+
+    // Login modal
+
+    // Initiate the modal
+    $ionicModal.fromTemplateUrl('modal.html', {
+      scope: $scope,
+      animation: 'slide-in-up'
+    }).then(function(modal) {
+      $scope.modal = modal;
+    });
+
+    // Function to open the modal
+    $scope.openModal = function() {
+      $scope.modal.show();
+    };
+
+    // Function to close the modal
+    $scope.closeModal = function() {
+      $scope.modal.hide();
+    };
+
+    // Cleanup the modal when we're done with it!
+    $scope.$on('$destroy', function() {
+      $scope.modal.remove();
+    });
+
+    // Function to login
+    $scope.Login = function(data) {
+      $scope.closeModal();
+    };
+
+  }); // Ends controller
@@ -14,3 +14,5 @@ This application is built on top of Ionic, so you need this framework.
 # `ionic emulate (android|ios)`
 In order to compile the theme, you need to run: `gulp sass`
+
+You need to configure the application by creating a file `www/js/config.js` based on `www/js/config.js.example`.
	@@ -18,6 +18,7 @@		@@ -18,6 +18,7 @@
18	<!-- your app's js -->	18	<!-- your app's js -->
19	<script src="js/app.js"></script>	19	<script src="js/app.js"></script>
20	<script src="js/controllers.js"></script>	20	<script src="js/controllers.js"></script>
		21	+ <script src="js/config.js"></script>
21	</head>	22	</head>
22	<body ng-app="confjuvapp">	23	<body ng-app="confjuvapp">
23		24
	@@ -26,7 +27,7 @@		@@ -26,7 +27,7 @@
26	<h1 class="title">3ª Conferência Nacional de Juventude</h1>	27	<h1 class="title">3ª Conferência Nacional de Juventude</h1>
27		28
28	<div class="buttons">	29	<div class="buttons">
29	- <button class="button" ng-click="openModal()">Adicionar proposta</button>	30	+ <button class="button" ng-click="openModal()">Entrar</button>
30	</div>	31	</div>
31	</ion-header-bar>	32	</ion-header-bar>
32	<ion-content>	33	<ion-content>
	@@ -37,5 +38,25 @@		@@ -37,5 +38,25 @@
37	</ion-list>	38	</ion-list>
38	</ion-content>	39	</ion-content>
39	</ion-pane>	40	</ion-pane>
		41	+
		42	+ <script id="modal.html" type="text/ng-template">
		43	+ <div class="modal">
		44	+ <div class="bar bar-header bar-calm">
		45	+ <button class="button" ng-click="closeModal()">Voltar</button>
		46	+ <h1 class="title">Entrar</h1>
		47	+ </div>
		48	+ <form ng-submit="Login(data)">
		49	+ <div class="list">
		50	+ <div class="list list-inset">
		51	+ <label class="item item-input">
		52	+ <input type="text" placeholder="Nome de usuário" ng-model="data.login">
		53	+ </label>
		54	+ </div>
		55	+ <button class="button button-block button-positive" type="submit">Entrar</button>
		56	+ </div>
		57	+ </form>
		58	+ </div>
		59	+ </script>
		60	+
40	</body>	61	</body>
41	</html>	62	</html>
@@ -0,0 +1,5 @@		@@ -0,0 +1,5 @@
	1	+var ConfJuvAppConfig = {
	2	+ noosferoApiHost: '',
	3	+ noosferoApiVersion: '',
	4	+ noosferoApiPrivateToken: ''
	5	+};
1	angular.module('confjuvapp.controllers', [])	1	angular.module('confjuvapp.controllers', [])
2	- .controller('ProposalCtrl', function($scope) {	2	+ .controller('ProposalCtrl', function($scope, $ionicModal) {
		3	+
3	// FIXME: This list should come from the server	4	// FIXME: This list should come from the server
4	$scope.proposalList = [	5	$scope.proposalList = [
5	{	6	{
	@@ -9,4 +10,35 @@ angular.module('confjuvapp.controllers', [])		@@ -9,4 +10,35 @@ angular.module('confjuvapp.controllers', [])
9	title: 'Desmilitarizar a polícia'	10	title: 'Desmilitarizar a polícia'
10	}	11	}
11	];	12	];
12	- });	13	+
		14	+ // Login modal
		15	+
		16	+ // Initiate the modal
		17	+ $ionicModal.fromTemplateUrl('modal.html', {
		18	+ scope: $scope,
		19	+ animation: 'slide-in-up'
		20	+ }).then(function(modal) {
		21	+ $scope.modal = modal;
		22	+ });
		23	+
		24	+ // Function to open the modal
		25	+ $scope.openModal = function() {
		26	+ $scope.modal.show();
		27	+ };
		28	+
		29	+ // Function to close the modal
		30	+ $scope.closeModal = function() {
		31	+ $scope.modal.hide();
		32	+ };
		33	+
		34	+ // Cleanup the modal when we're done with it!
		35	+ $scope.$on('$destroy', function() {
		36	+ $scope.modal.remove();
		37	+ });
		38	+
		39	+ // Function to login
		40	+ $scope.Login = function(data) {
		41	+ $scope.closeModal();
		42	+ };
		43	+
		44	+ }); // Ends controller
	@@ -14,3 +14,5 @@ This application is built on top of Ionic, so you need this framework.		@@ -14,3 +14,5 @@ This application is built on top of Ionic, so you need this framework.
14	# `ionic emulate (android\|ios)`	14	# `ionic emulate (android\|ios)`
15		15
16	In order to compile the theme, you need to run: `gulp sass`	16	In order to compile the theme, you need to run: `gulp sass`
		17	+
		18	+You need to configure the application by creating a file `www/js/config.js` based on `www/js/config.js.example`.