mirror of
https://github.com/arnaucube/openEventsPlatformApp.git
synced 2026-02-07 03:36:44 +01:00
project started, some html and js files added, showing events and users work communicating with server api
This commit is contained in:
arnaucode
1
www/css/style.css
Normal file
1
www/css/style.css
Normal file
@@ -0,0 +1 @@
|
||||
/* Empty. Add your own CSS if you like */
|
||||
BIN
www/img/ionic.png
Normal file
BIN
www/img/ionic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
56
www/index.html
Normal file
56
www/index.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!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 rel="manifest" href="manifest.json">
|
||||
|
||||
<!-- un-comment this code to enable service worker
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('service-worker.js')
|
||||
.then(() => console.log('service worker installed'))
|
||||
.catch(err => console.log('Error', err));
|
||||
}
|
||||
</script>-->
|
||||
|
||||
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
|
||||
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
|
||||
<link href="css/ionic.app.css" rel="stylesheet">
|
||||
-->
|
||||
|
||||
<!-- ionic/angularjs js -->
|
||||
<script src="lib/ionic/js/ionic.bundle.js"></script>
|
||||
|
||||
<!-- cordova script (this will be a 404 during development) -->
|
||||
<script src="cordova.js"></script>
|
||||
|
||||
<!-- openstreetmaps angular - leaflet -->
|
||||
<script src="lib/leaflet/dist/leaflet.js"></script>
|
||||
<script src="lib/angular-simple-logger/dist/angular-simple-logger.js"></script>
|
||||
<!--<script src="lib/ui-leaflet/dist/ui-leaflet_dev_mapped.js"></script>-->
|
||||
<script src="lib/ui-leaflet/dist/ui-leaflet.js"></script>
|
||||
<link rel="stylesheet" href="lib/leaflet/dist/leaflet.css" />
|
||||
|
||||
<!-- Angular Translate -->
|
||||
<script src="lib/angular-translate/angular-translate.js"></script>
|
||||
<script src="js/translations.js"></script>
|
||||
|
||||
<!-- your app's js -->
|
||||
<script src="js/app.js"></script>
|
||||
<script src="js/menu.js"></script>
|
||||
<script src="js/events.js"></script>
|
||||
<script src="js/event.js"></script>
|
||||
<script src="js/users.js"></script>
|
||||
<script src="js/user.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-app="app">
|
||||
<ion-nav-view></ion-nav-view>
|
||||
</body>
|
||||
</html>
|
||||
125
www/js/app.js
Normal file
125
www/js/app.js
Normal file
@@ -0,0 +1,125 @@
|
||||
var urlapi = "http://localhost:3000/api/";
|
||||
|
||||
|
||||
angular.module('app', [
|
||||
'ionic',
|
||||
'pascalprecht.translate',
|
||||
'app.menu',
|
||||
'app.events',
|
||||
'app.event',
|
||||
'app.users',
|
||||
'app.user'
|
||||
])
|
||||
|
||||
.run(function($ionicPlatform) {
|
||||
$ionicPlatform.ready(function() {
|
||||
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
|
||||
// for form inputs)
|
||||
if (window.cordova && window.cordova.plugins.Keyboard) {
|
||||
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
|
||||
cordova.plugins.Keyboard.disableScroll(true);
|
||||
|
||||
}
|
||||
if (window.StatusBar) {
|
||||
// org.apache.cordova.statusbar required
|
||||
StatusBar.styleDefault();
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
.config(function($stateProvider, $urlRouterProvider) {
|
||||
$stateProvider
|
||||
|
||||
// setup an abstract state for the tabs directive
|
||||
.state('app', {
|
||||
url: '/app',
|
||||
abstract: true,
|
||||
templateUrl: 'templates/menu.html',
|
||||
controller: 'MenuCtrl'
|
||||
})
|
||||
|
||||
// Each tab has its own nav history stack:
|
||||
|
||||
.state('app.events', {
|
||||
url: '/events',
|
||||
views: {
|
||||
'menuContent': {
|
||||
templateUrl: 'templates/events.html',
|
||||
controller: 'EventsCtrl'
|
||||
}
|
||||
}
|
||||
}).state('app.event', {
|
||||
url: '/events/:eventid',
|
||||
views: {
|
||||
'menuContent': {
|
||||
templateUrl: 'templates/event.html',
|
||||
controller: 'EventCtrl'
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('app.users', {
|
||||
url: '/users',
|
||||
views: {
|
||||
'menuContent': {
|
||||
templateUrl: 'templates/users.html',
|
||||
controller: 'UsersCtrl'
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('app.user', {
|
||||
url: '/users/:userid',
|
||||
views: {
|
||||
'menuContent': {
|
||||
templateUrl: 'templates/user.html',
|
||||
controller: 'UserCtrl'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// if none of the above states are matched, use this as the fallback
|
||||
$urlRouterProvider.otherwise('/app/events');
|
||||
})
|
||||
/* translator */
|
||||
.config(['$translateProvider', function($translateProvider) {
|
||||
|
||||
/* get lang from the file translations.js */
|
||||
for (lang in translations) {
|
||||
$translateProvider.translations(lang, translations[lang]);
|
||||
}
|
||||
|
||||
if (window.localStorage.getItem('lang')) {
|
||||
$translateProvider.preferredLanguage(window.localStorage.getItem('lang'));
|
||||
} else {
|
||||
$translateProvider.preferredLanguage('english');
|
||||
};
|
||||
|
||||
$translateProvider.useSanitizeValueStrategy('escape');
|
||||
|
||||
}])
|
||||
.factory('httpInterceptor', function httpInterceptor($q, $window, $location) {
|
||||
return {
|
||||
request: function(config) {
|
||||
return config;
|
||||
},
|
||||
requestError: function(config) {
|
||||
return config;
|
||||
},
|
||||
response: function(res) {
|
||||
return res;
|
||||
},
|
||||
responseError: function(res) {
|
||||
return res;
|
||||
}
|
||||
}
|
||||
})
|
||||
.factory('api', function($http) {
|
||||
return {
|
||||
init: function() {
|
||||
$http.defaults.headers.common['X-Access-Token'] = localStorage.getItem("cim_app_token");
|
||||
$http.defaults.headers.post['X-Access-Token'] = localStorage.getItem("cim_app_token");
|
||||
}
|
||||
};
|
||||
})
|
||||
.run(function(api) {
|
||||
api.init();
|
||||
});
|
||||
57
www/js/event.js
Normal file
57
www/js/event.js
Normal file
@@ -0,0 +1,57 @@
|
||||
angular.module('app.event', ['pascalprecht.translate', 'ui-leaflet'])
|
||||
|
||||
.controller('EventCtrl', function($scope, $http, $ionicModal,
|
||||
$stateParams, $timeout, $ionicLoading, $filter,
|
||||
leafletData, leafletBoundsHelpers) {
|
||||
|
||||
|
||||
$scope.center= {
|
||||
lat: 0,
|
||||
lng: 0,
|
||||
zoom: 1
|
||||
};
|
||||
$scope.markers=[];
|
||||
$scope.tiles= {
|
||||
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
options: {
|
||||
attribution: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$scope.event={};
|
||||
$scope.doRefresh = function() {
|
||||
/* events refresh: */
|
||||
$http.get(urlapi + 'events/id/'+ $stateParams.eventid)
|
||||
.then(function(data){
|
||||
console.log('data success events');
|
||||
console.log(data); // for browser console
|
||||
//$scope.events = data.data; // for UI
|
||||
$scope.event=data.data;
|
||||
$scope.$broadcast('scroll.refreshComplete');//refresher stop
|
||||
|
||||
if($scope.event.location)
|
||||
{
|
||||
$scope.markers=[];
|
||||
$scope.markers.push({
|
||||
lat: Number($scope.event.location.geo.lat),
|
||||
lng: Number($scope.event.location.geo.long),
|
||||
message: $scope.event.location.name
|
||||
});
|
||||
$scope.center= {
|
||||
lat: (Number($scope.travel.from.lat)+Number($scope.travel.to.lat))/2,
|
||||
lng: (Number($scope.travel.from.long)+Number($scope.travel.to.long))/2,
|
||||
zoom: 4
|
||||
};
|
||||
}
|
||||
|
||||
}, function(data){
|
||||
console.log('data error');
|
||||
$scope.$broadcast('scroll.refreshComplete');//refresher stop
|
||||
$ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
|
||||
|
||||
});
|
||||
};
|
||||
$scope.doRefresh();
|
||||
|
||||
});
|
||||
27
www/js/events.js
Normal file
27
www/js/events.js
Normal file
@@ -0,0 +1,27 @@
|
||||
angular.module('app.events', ['pascalprecht.translate'])
|
||||
|
||||
.controller('EventsCtrl', function($scope, $http, $ionicModal, $timeout, $ionicLoading, $filter) {
|
||||
|
||||
|
||||
$scope.events=[];
|
||||
$scope.page=0;
|
||||
$scope.doRefresh = function() {
|
||||
/* events refresh: */
|
||||
$http.get(urlapi + 'events?page=' + $scope.page)
|
||||
.then(function(data){
|
||||
console.log('data success events');
|
||||
console.log(data); // for browser console
|
||||
//$scope.events = data.data; // for UI
|
||||
$scope.events=data.data;
|
||||
$scope.$broadcast('scroll.refreshComplete');//refresher stop
|
||||
|
||||
}, function(data){
|
||||
console.log('data error');
|
||||
$scope.$broadcast('scroll.refreshComplete');//refresher stop
|
||||
$ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
|
||||
|
||||
});
|
||||
};
|
||||
$scope.doRefresh();
|
||||
|
||||
});
|
||||
15
www/js/menu.js
Normal file
15
www/js/menu.js
Normal file
@@ -0,0 +1,15 @@
|
||||
angular.module('app.menu', ['pascalprecht.translate'])
|
||||
|
||||
|
||||
.controller('MenuCtrl', function($scope, $window) {
|
||||
if (localStorage.getItem("events_app_userdata")) {
|
||||
$scope.storageuser = JSON.parse(localStorage.getItem("events_app_userdata"));
|
||||
console.log($scope.storageuser);
|
||||
}
|
||||
|
||||
$scope.logout = function() {
|
||||
localStorage.removeItem("events_app_token");
|
||||
localStorage.removeItem("events_app_userdata");
|
||||
$window.location.reload(true);
|
||||
};
|
||||
});
|
||||
7
www/js/translations.js
Normal file
7
www/js/translations.js
Normal file
@@ -0,0 +1,7 @@
|
||||
var translations = {
|
||||
"english": {
|
||||
"Actual_language": "Actual language: ",
|
||||
"Menu": "Menu",
|
||||
"Signup": "Signup"
|
||||
}
|
||||
};
|
||||
54
www/js/user.js
Normal file
54
www/js/user.js
Normal file
@@ -0,0 +1,54 @@
|
||||
angular.module('app.user', ['pascalprecht.translate', 'ui-leaflet'])
|
||||
|
||||
.controller('UserCtrl', function($scope, $http, $ionicModal,
|
||||
$stateParams, $timeout, $ionicLoading, $filter,
|
||||
leafletData, leafletBoundsHelpers) {
|
||||
|
||||
$scope.center= {
|
||||
lat: 0,
|
||||
lng: 0,
|
||||
zoom: 1
|
||||
};
|
||||
$scope.markers=[];
|
||||
$scope.tiles= {
|
||||
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
options: {
|
||||
attribution: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}
|
||||
};
|
||||
|
||||
$scope.user={};
|
||||
$scope.doRefresh = function() {
|
||||
/* events refresh: */
|
||||
$http.get(urlapi + 'users/id/'+ $stateParams.userid)
|
||||
.then(function(data){
|
||||
console.log('data success events');
|
||||
console.log(data); // for browser console
|
||||
//$scope.events = data.data; // for UI
|
||||
$scope.user=data.data;
|
||||
$scope.$broadcast('scroll.refreshComplete');//refresher stop
|
||||
if($scope.user.location)
|
||||
{
|
||||
$scope.markers=[];
|
||||
$scope.markers.push({
|
||||
lat: Number($scope.user.location.geo.lat),
|
||||
lng: Number($scope.user.location.geo.long),
|
||||
message: $scope.user.location.name
|
||||
});
|
||||
$scope.center= {
|
||||
lat: Number($scope.user.location.geo.lat),
|
||||
lng: Number($scope.user.location.geo.long),
|
||||
zoom: 16
|
||||
};
|
||||
}
|
||||
|
||||
}, function(data){
|
||||
console.log('data error');
|
||||
$scope.$broadcast('scroll.refreshComplete');//refresher stop
|
||||
$ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
|
||||
|
||||
});
|
||||
};
|
||||
$scope.doRefresh();
|
||||
|
||||
});
|
||||
27
www/js/users.js
Normal file
27
www/js/users.js
Normal file
@@ -0,0 +1,27 @@
|
||||
angular.module('app.users', ['pascalprecht.translate'])
|
||||
|
||||
.controller('UsersCtrl', function($scope, $http, $ionicModal, $timeout, $ionicLoading, $filter) {
|
||||
|
||||
|
||||
$scope.users=[];
|
||||
$scope.page=0;
|
||||
$scope.doRefresh = function() {
|
||||
/* users refresh: */
|
||||
$http.get(urlapi + 'users?page=' + $scope.page)
|
||||
.then(function(data){
|
||||
console.log('data success users');
|
||||
console.log(data); // for browser console
|
||||
//$scope.users = data.data; // for UI
|
||||
$scope.users=data.data;
|
||||
$scope.$broadcast('scroll.refreshComplete');//refresher stop
|
||||
|
||||
}, function(data){
|
||||
console.log('data error');
|
||||
$scope.$broadcast('scroll.refreshComplete');//refresher stop
|
||||
$ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
|
||||
|
||||
});
|
||||
};
|
||||
$scope.doRefresh();
|
||||
|
||||
});
|
||||
12
www/manifest.json
Normal file
12
www/manifest.json
Normal file
@@ -0,0 +1,12 @@
|
||||
|
||||
{
|
||||
"name": "My Ionic App",
|
||||
"short_name": "My Ionic App",
|
||||
"start_url": "index.html",
|
||||
"display": "standalone",
|
||||
"icons": [{
|
||||
"src": "icon.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}]
|
||||
}
|
||||
12
www/service-worker.js
Normal file
12
www/service-worker.js
Normal file
@@ -0,0 +1,12 @@
|
||||
|
||||
self.addEventListener('activate', function (event) {
|
||||
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', function (event) {
|
||||
|
||||
});
|
||||
|
||||
self.addEventListener('push', function (event) {
|
||||
|
||||
});
|
||||
24
www/templates/event.html
Normal file
24
www/templates/event.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<ion-view view-title="Event">
|
||||
<ion-content>
|
||||
<a class="item item-avatar" ng-href="#/app/users/{{event.user._id}}">
|
||||
<img ng-src="{{event.user.img}}">
|
||||
<h2>{{event.user.username}}</h2>
|
||||
<p>{{event.user.description}}</p>
|
||||
</a>
|
||||
<a class="item">
|
||||
<h2>{{event.title}}</h2>
|
||||
<p>{{event.description}}</p>
|
||||
<p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p>
|
||||
</a>
|
||||
|
||||
<div class="item item-image">
|
||||
<img ng-src="{{event.img}}">
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<h2>Map</h2>
|
||||
</div>
|
||||
|
||||
<leaflet width="100%" height="40%" markers="markers" center="center" tiles="tiles" id="map-simple-map"></leaflet>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
17
www/templates/events.html
Normal file
17
www/templates/events.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<ion-view view-title="Events">
|
||||
<ion-content>
|
||||
<ion-refresher
|
||||
pulling-text="{{'Pull_to_refresh' | translate}}..."
|
||||
on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<a class="item item-thumbnail-left" href="#/app/events/{{event._id}}"
|
||||
ng-repeat="event in events">
|
||||
<img ng-src="{{event.img}}">
|
||||
<div class="badge item-note">{{event.user.username}}</div>
|
||||
<h2>{{event.title}}</h2>
|
||||
<p>{{event.description}}</p>
|
||||
<p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p>
|
||||
</a>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
39
www/templates/menu.html
Normal file
39
www/templates/menu.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<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="menuContent"></ion-nav-view>
|
||||
</ion-side-menu-content>
|
||||
|
||||
<ion-side-menu side="left">
|
||||
<ion-header-bar class="bar-stable">
|
||||
<h1 class="title">Left</h1>
|
||||
</ion-header-bar>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item menu-close href="#/app/events">
|
||||
Events
|
||||
</ion-item>
|
||||
<ion-item menu-close href="#/app/users">
|
||||
Users
|
||||
</ion-item>
|
||||
<ion-item menu-close href="#/app/search">
|
||||
Search
|
||||
</ion-item>
|
||||
<ion-item menu-close href="#/app/settings">
|
||||
Settings
|
||||
</ion-item>
|
||||
<ion-item menu-close href="#/app/login">
|
||||
User login
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-side-menu>
|
||||
</ion-side-menus>
|
||||
22
www/templates/tabs.html
Normal file
22
www/templates/tabs.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
<!-- tabs-color-active-balanced -->
|
||||
<!--<ion-tabs class="tabs-icon-top tabs-color-active-balanced">
|
||||
|
||||
<ion-tab title="Events" icon-off="ion-calendar" icon-on="ion-calendar" href="#/app/events">
|
||||
<ion-nav-view name="tab-events"></ion-nav-view>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="People" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/app/users">
|
||||
<ion-nav-view name="tab-users"></ion-nav-view>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Settings" icon-off="ion-ios-gear" icon-on="ion-ios-gear" href="#/app/settings">
|
||||
<ion-nav-view name="tab-settings"></ion-nav-view>
|
||||
</ion-tab>
|
||||
|
||||
</ion-tabs>
|
||||
-->
|
||||
20
www/templates/user.html
Normal file
20
www/templates/user.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<ion-view view-title="User">
|
||||
<ion-content>
|
||||
<div class="item item-avatar">
|
||||
<img ng-src="{{user.img}}">
|
||||
<div class="o_pullRight">
|
||||
<span class="badge badge-balanced">
|
||||
Following
|
||||
</span>
|
||||
</div>
|
||||
<h2>{{user.username}}</h2>
|
||||
<p>{{user.email}}</p>
|
||||
</div>
|
||||
<div class="item item-body">
|
||||
asdf asdflk jasdfljashd fljkas dflka shdfklasd {{user.description}}
|
||||
</div>
|
||||
|
||||
<leaflet width="100%" height="40%" markers="markers" center="center"
|
||||
tiles="tiles" id="map-simple-map"></leaflet>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
18
www/templates/users.html
Normal file
18
www/templates/users.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<ion-view view-title="Users">
|
||||
<ion-content>
|
||||
<ion-refresher
|
||||
pulling-text="{{'Pull_to_refresh' | translate}}..."
|
||||
on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
<ion-list><!-- item-remove-animate -->
|
||||
<ion-item class="item-avatar item-icon-right"
|
||||
ng-repeat="user in users" type="item-text-wrap" href="#/app/users/{{user._id}}">
|
||||
<img ng-src="{{user.img}}">
|
||||
<h2>{{user.username}}</h2>
|
||||
<p>{{user.email}}</p>
|
||||
|
||||
<span class="badge badge-balanced">Following</span>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
Reference in New Issue
Block a user