mirror of
https://github.com/lukevella/rallly.git
synced 2025-04-29 10:16:32 +02:00
Updated editing of event
This commit is contained in:
Luke Vella
parent
6b1e9893e9
commit
bc1e25377c
16 changed files with 197 additions and 36 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 1.6 KiB |
BIN
public/images/success_large@2x.png
Normal file
BIN
public/images/success_large@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
44
public/js/controllers/editevent.controller.js
Normal file
44
public/js/controllers/editevent.controller.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
angular.module('rallly')
|
||||
.controller('EditEventCtrl', function($scope, $http, $state, $timeout, Event){
|
||||
var id = $state.params.id
|
||||
$scope.event = Event.get({id:id}, function(data){
|
||||
var dates = [];
|
||||
for (var i = 0; i < data.dates.length; i++){
|
||||
dates.push(new Date(data.dates[i]));
|
||||
}
|
||||
$("[data-datepicker]").datepicker('setDates',dates);
|
||||
$scope.master = angular.copy($scope.event);
|
||||
}, function(e){
|
||||
$state.go('notfound');
|
||||
});
|
||||
$scope.didChange = function(){
|
||||
return JSON.stringify($scope.master) != JSON.stringify($scope.event);
|
||||
}
|
||||
$scope.didChangeDates = function(){
|
||||
return JSON.stringify($scope.master.dates) != JSON.stringify($scope.event.dates);
|
||||
}
|
||||
$scope.submit = function(){
|
||||
if ($scope.didChange()){
|
||||
if ($scope.didChangeDates() ){
|
||||
if (confirm("Changing the dates will reset all entries by the participants. Are you sure you want to proceed?")){
|
||||
update();
|
||||
}
|
||||
} else {
|
||||
update();
|
||||
}
|
||||
}
|
||||
}
|
||||
var update = function(){
|
||||
$scope.event.participants = [];
|
||||
Event.update({
|
||||
id : id
|
||||
}, $scope.event,
|
||||
function(){
|
||||
$timeout.cancel($scope.didSave);
|
||||
$scope.master = angular.copy($scope.event);
|
||||
$scope.didSave = $timeout(function(){
|
||||
$scope.didSave = false;
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -2,7 +2,13 @@ angular.module('rallly')
|
|||
.controller('EventCtrl', function($scope, $http, $state, Event, Participant){
|
||||
$(".nav-link").removeClass('active');
|
||||
var id = $state.params.id;
|
||||
$scope.event = Event.get({id:id}, function(data){}, function(e){
|
||||
$scope.event = Event.get({id:id}, function(data){
|
||||
$scope.eventUrl = $state.href('event', {
|
||||
id: $scope.event._id
|
||||
}, {
|
||||
absolute : true
|
||||
});
|
||||
}, function(e){
|
||||
$state.go('notfound');
|
||||
});
|
||||
$scope.delete = function(participant){
|
||||
|
|
@ -14,6 +20,10 @@ angular.module('rallly')
|
|||
}
|
||||
$scope.defaults = [];
|
||||
|
||||
$scope.editEvent = function(){
|
||||
$state.go('editevent', { id : $scope.event._id });
|
||||
}
|
||||
|
||||
$scope.update = function(participant){
|
||||
Participant.update({
|
||||
id : $scope.event._id,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
angular.module('rallly')
|
||||
.controller('NewEventCtrl', function($scope, $http, $state){
|
||||
.controller('NewEventCtrl', function($scope, $http, $state, Event){
|
||||
$(".nav-link[href='/']").addClass('active');
|
||||
$scope.event = {};
|
||||
$scope.isNewEvent = true;
|
||||
|
||||
$scope.submit = function(){
|
||||
$http.post('/api/event', $scope.event)
|
||||
.success(function(event, status, headers, config){
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ angular.module('rallly', ['ui.router','ngResource','ngFx'])
|
|||
$stateProvider
|
||||
.state('index',{
|
||||
url : '/',
|
||||
templateUrl : 'templates/new.html',
|
||||
templateUrl : 'templates/newevent.html',
|
||||
controller : 'NewEventCtrl'
|
||||
})
|
||||
.state('about', {
|
||||
|
|
@ -16,6 +16,11 @@ angular.module('rallly', ['ui.router','ngResource','ngFx'])
|
|||
url : '/notfound',
|
||||
templateUrl : 'templates/notfound.html'
|
||||
})
|
||||
.state('editevent', {
|
||||
url: '/:id/edit',
|
||||
templateUrl : 'templates/editevent.html',
|
||||
controller : 'EditEventCtrl'
|
||||
})
|
||||
.state('event',{
|
||||
url : '/:id',
|
||||
templateUrl : 'templates/event.html',
|
||||
|
|
|
|||
|
|
@ -16,13 +16,20 @@
|
|||
color: $dark-gray-clr;
|
||||
text-decoration:none;
|
||||
padding: em(8px) em(20px);
|
||||
&.disabled {
|
||||
cursor:default;
|
||||
opacity: 0.5;
|
||||
&:active {
|
||||
box-shadow: inset 0 1px 0 white, 0 1px 1px rgba(black, 0.1);
|
||||
}
|
||||
}
|
||||
&.danger {
|
||||
color: $danger-clr;
|
||||
}
|
||||
&:focus {
|
||||
outline:0;
|
||||
}
|
||||
&:active{
|
||||
&:active {
|
||||
box-shadow: inset 0 0 5px rgba(black, 0.1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
}
|
||||
|
||||
.form-success-url {
|
||||
font-size: em(36px);
|
||||
font-size: em(24px);
|
||||
text-align:center;
|
||||
padding: em(10px);
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #eee;
|
||||
color: $text-clr;
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
font-size:em(18px);
|
||||
@include transition(border-color 0.1s ease-in-out);
|
||||
&:focus {
|
||||
border-color: $primary-clr;
|
||||
border-color: $blue-clr;
|
||||
outline:none;
|
||||
}
|
||||
&.extend {
|
||||
|
|
@ -77,7 +77,20 @@
|
|||
}
|
||||
textarea.form-control {
|
||||
min-height: 100px;
|
||||
font-size: em(14px);
|
||||
font-size: em(18px);
|
||||
padding: em(8px) em(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.form-submit-message {
|
||||
display:inline-block;
|
||||
margin-left: em(5px);
|
||||
font-size: em(12px);
|
||||
&.error {
|
||||
color: $red-clr;
|
||||
}
|
||||
img {
|
||||
vertical-align:middle;
|
||||
margin-right: em(5px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1 @@
|
|||
.form-global-error {
|
||||
display:inline-block;
|
||||
margin-left: em(5px);
|
||||
font-size: em(12px);
|
||||
color: $red-clr;
|
||||
img {
|
||||
vertical-align:middle;
|
||||
margin-right: em(5px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
92
public/templates/editevent.html
Normal file
92
public/templates/editevent.html
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
|
||||
<h1>Editing: {{event.title}}</h1>
|
||||
<div class="rl-page-desc">
|
||||
You can makes changes to your existing event by changing the fields in the form below. When you're ready click save.
|
||||
</div>
|
||||
<section class="rl-section">
|
||||
<aside class="rl-section-details">
|
||||
<h2>Your Details</h2>
|
||||
</aside>
|
||||
<div class="rl-section-main">
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="form-group" ng-class="{error:errors['creator.name']}">
|
||||
<label for="name">Name</label>
|
||||
<input id="name" ng-model="event.creator.name" type="text" placeholder="John Doe..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<div class="form-group" ng-class="{error:errors['creator.email']}">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" ng-model="event.creator.email" type="text" placeholder="john.doe@email.com..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="rl-section">
|
||||
<aside class="rl-section-details">
|
||||
<h2>Event Details</h2>
|
||||
</aside>
|
||||
<div class="rl-section-main">
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="form-group" ng-class="{error:errors.title}">
|
||||
<label for="title">Title</label>
|
||||
<input id="title" ng-model="event.title" type="text" placeholder="Monthly Meetup..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<div class="form-group">
|
||||
<label for="location" class="optional">Location</label>
|
||||
<input id="location" ng-model="event.location" type="text" placeholder="Rick's Cafe..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="description" class="optional">Description</label>
|
||||
<textarea id="description" ng-model="event.description" placeholder="Enter Description..." class="form-control extend"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="rl-section">
|
||||
<aside class="rl-section-details">
|
||||
<h2>Change Dates</h2>
|
||||
</aside>
|
||||
<div class="rl-section-main">
|
||||
<div class="form-row">
|
||||
<div data-datepicker ng-model="event.dates" ng-class="{error:errors.dates}">
|
||||
|
||||
</div>
|
||||
<ul class="daticon-list">
|
||||
<li ng-repeat="date in event.dates">
|
||||
<div class="daticon">
|
||||
<div class="dow">
|
||||
{{date | date: 'EEE'}}
|
||||
</div>
|
||||
<div class="day">
|
||||
{{date | date: 'd'}}
|
||||
</div>
|
||||
<div class="month">
|
||||
{{date | date : 'MMM'}}
|
||||
</div>
|
||||
<span class="delete" ng-click="unsetDate(date)"></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>
|
||||
|
||||
<button type="submit" ng-show="didChange()" ng-click="submit()" class="btn btn-primary" ng-class="{disabled : !didChange()}">
|
||||
Save Changes
|
||||
</button>
|
||||
<a href="/{{event._id}}" class="btn-primary danger" ng-show="didChange()">Cancel Changes</a>
|
||||
<a href="/{{event._id}}" class="btn-primary" ng-hide="didChange()">Done</a>
|
||||
<span ng-show="errors" class="form-submit-message error fx-fade-normal fx-speed-100"><img src="/images/error@2x.png" width="22" height="22" /> Oops! Looks like you missed something!</span>
|
||||
<span ng-show="didSave" class="form-submit-message fx-fade-normal fx-speed-100"><img src="/images/success@2x.png" width="22" height="22" /> Changes saved successfully!</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -3,13 +3,10 @@
|
|||
<h1 class="fx-rotate-clock">{{event.title}}</h1>
|
||||
<ul class="event-detail-list">
|
||||
<li class="event-created-by">
|
||||
Created by: <a href="{{event.creator.email}}">{{event.creator.name}}</a>
|
||||
Created by <a href="{{event.creator.email}}">{{event.creator.name}}</a> on {{event.created | date : 'medium'}}
|
||||
</li>
|
||||
<li>
|
||||
Created on: {{event.created | date : 'medium'}}
|
||||
</li>
|
||||
<li>
|
||||
Last updated: {{event.updated | date : 'medium'}}
|
||||
Last updated {{event.updated | date : 'medium'}}
|
||||
</li>
|
||||
<li ng-show="event.location" class="event-location">
|
||||
{{event.location}}
|
||||
|
|
@ -59,9 +56,9 @@
|
|||
</td>
|
||||
<td>
|
||||
<a ng-hide="editMode" href="javascript:" ng-click="editMode = true; edit(participant)" class="btn-primary hover">Edit</a>
|
||||
<a ng-hide="editMode" href="javascript:" ng-click="delete(participant)" class="btn-primary danger hover">Delete</a>
|
||||
<a ng-show="editMode" href="javascript:" ng-click="editMode = false; update(participant)" class="btn-primary">Save</a>
|
||||
<a ng-show="editMode" href="javascript:" ng-click="editMode = false; cancel($index)" class="btn-primary danger">Cancel</a>
|
||||
<a ng-hide="editMode" href="javascript:" ng-click="delete(participant)" class="btn-primary danger hover">Delete</button>
|
||||
<a ng-show="editMode" href="javascript:" ng-click="editMode = false; update(participant)" class="btn-primary">Save</button>
|
||||
<a ng-show="editMode" href="javascript:" ng-click="editMode = false; cancel($index)" class="btn-primary">Cancel</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="event-poll-input">
|
||||
|
|
@ -80,4 +77,7 @@
|
|||
</table>
|
||||
</form>
|
||||
</section>
|
||||
<p>
|
||||
<button class="btn-primary" ng-click="editEvent()">Edit Event</button>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div ng-hide="event._id">
|
||||
<div ng-hide="eventUrl">
|
||||
<h1>Schedule New Event</h1>
|
||||
<div class="rl-page-desc">
|
||||
Fill in the form below to create your event and share it with your friends and colleagues.
|
||||
|
|
@ -91,12 +91,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<button type="submit" ng-click="submit()" class="btn btn-primary">Create & Send</button>
|
||||
<span ng-show="errors" class="form-global-error fx-zoom-normal fx-speed-100"><img src="/images/error@2x.png" width="22" height="22" /> Oops! Looks like you missed something!</span>
|
||||
<span ng-show="errors" class="form-submit-message error fx-fade-normal fx-speed-100"><img src="/images/error@2x.png" width="22" height="22" /> Oops! Looks like you missed something!</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div ng-show="event._id" class="form-success fx-fade-up">
|
||||
<img src="/images/success@2x.png" width="128" height="128" />
|
||||
<div ng-show="eventUrl" class="form-success fx-fade-up">
|
||||
<img src="/images/success_large@2x.png" width="128" height="128" />
|
||||
<h1>Good Job!</h1>
|
||||
<p>
|
||||
Your event has been created. An email has been sent to all the participants with a link to the event page. Make sure you visit the page and vote on the dates yourself.
|
||||
Loading…
Add table
Reference in a new issue