mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2024-12-01 12:24:28 +01:00
move homepage components to standalone directives
- events
This commit is contained in:
Sylvain
parent
89e146d419
commit
75c49c06f2
@ -1,18 +1,11 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Application.Controllers.controller('HomeController', ['$scope', '$stateParams', 'upcomingEventsPromise',
|
Application.Controllers.controller('HomeController', ['$scope', '$stateParams', 'homeContentPromise',
|
||||||
function ($scope, $stateParams, upcomingEventsPromise) {
|
function ($scope, $stateParams, homeContentPromise) {
|
||||||
/* PUBLIC SCOPE */
|
/* PUBLIC SCOPE */
|
||||||
|
|
||||||
// The closest upcoming events
|
// Home page HTML content
|
||||||
$scope.upcomingEvents = upcomingEventsPromise;
|
$scope.homeContent = homeContentPromise;
|
||||||
|
|
||||||
/**
|
|
||||||
* Test if the provided event run on a single day or not
|
|
||||||
* @param event {Object} single event from the $scope.upcomingEvents array
|
|
||||||
* @returns {boolean} false if the event runs on more that 1 day
|
|
||||||
*/
|
|
||||||
$scope.isOneDayEvent = event => moment(event.start_date).isSame(event.end_date, 'day');
|
|
||||||
|
|
||||||
/* PRIVATE SCOPE */
|
/* PRIVATE SCOPE */
|
||||||
|
|
||||||
|
|||||||
31
app/assets/javascripts/directives/events.js.erb
Normal file
31
app/assets/javascripts/directives/events.js.erb
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
Application.Directives.directive('events', [ 'Event',
|
||||||
|
function (Event) {
|
||||||
|
return ({
|
||||||
|
restrict: 'E',
|
||||||
|
templateUrl: '<%= asset_path "home/events.html" %>',
|
||||||
|
link ($scope, element, attributes) {
|
||||||
|
// The closest upcoming events
|
||||||
|
$scope.upcomingEvents = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Test if the provided event run on a single day or not
|
||||||
|
* @param event {Object} single event from the $scope.upcomingEvents array
|
||||||
|
* @returns {boolean} false if the event runs on more that 1 day
|
||||||
|
*/
|
||||||
|
$scope.isOneDayEvent = function(event) {
|
||||||
|
return moment(event.start_date).isSame(event.end_date, 'day');
|
||||||
|
}
|
||||||
|
|
||||||
|
// constructor
|
||||||
|
const initialize = function () {
|
||||||
|
Event.upcoming({ limit: 3 }, function (data) {
|
||||||
|
$scope.upcomingEvents = data;
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
// !!! MUST BE CALLED AT THE END of the directive
|
||||||
|
return initialize();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
]);
|
||||||
@ -98,7 +98,7 @@ angular.module('application.router', ['ui.router'])
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
upcomingEventsPromise: ['Event', function (Event) { return Event.upcoming({ limit: 3 }).$promise; }]
|
homeContentPromise: ['Setting', function (Setting) { return Setting.get({ name: 'home_content' }).$promise; }]
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.state('app.public.privacy', {
|
.state('app.public.privacy', {
|
||||||
|
|||||||
@ -13,71 +13,10 @@
|
|||||||
<members></members>
|
<members></members>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<section class="home-events col-lg-12 wrapper">
|
|
||||||
<h4 class="text-sm m-t-sm">{{ 'app.public.home.fablab_s_next_events' | translate }} <a ui-sref="app.public.events_list" class="pull-right"><i class="fa fa-tags"></i> {{ 'app.public.home.every_events' | translate }}</a></h4>
|
<div class="row wrapper m-t-sm">
|
||||||
|
<div class="col-lg-12">
|
||||||
<div class="row" ng-repeat="event in (upcomingEvents.length/3 | array)">
|
<events></events>
|
||||||
|
</div>
|
||||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4" ng-repeat="event in upcomingEvents.slice(3*$index, 3*$index + 3)">
|
|
||||||
|
|
||||||
|
|
||||||
<div class="widget panel panel-default" ui-sref="app.public.events_show({id: event.id})">
|
|
||||||
<div class="panel-heading picture" style="background-image: url({{event.event_image_medium}});" >
|
|
||||||
<img src="data:image/png;base64," data-src="holder.js/100%x100%/text:/font:FontAwesome/icon" bs-holder ng-if="!event.event_image" class="img-responsive">
|
|
||||||
</div>
|
|
||||||
<div class="panel-body" style="heigth:170px;">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-9">
|
|
||||||
<h1 class="m-b">{{event.title}}</h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<span class="v-middle badge text-xs" ng-class="'bg-{{event.category.slug}}'">{{event.category.name}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="event-description" ng-bind-html="event.description | simpleText | humanize : 500 | breakFilter"></p>
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-6 row m-b-sm">
|
|
||||||
<i class="fa fa-calendar red col-xs-3 padder-icon"></i>
|
|
||||||
<h6 class="m-n col-xs-9 " ng-hide="isOneDayEvent(event)">{{ 'app.public.home.from_date_to_date' | translate:{START:(event.start_date | amDateFormat:'L'), END:(event.end_date | amDateFormat:'L')} }}</h6>
|
|
||||||
<h6 class="m-n col-xs-9 " ng-show="isOneDayEvent(event)">{{ 'app.public.home.on_the_date' | translate:{DATE:(event.start_date | amDateFormat:'L')} }}</h6>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 row m-b-sm">
|
|
||||||
<i class="fa fa-clock-o red col-xs-3 padder-icon"></i>
|
|
||||||
<h6 class="m-n col-xs-9">
|
|
||||||
<span ng-if="event.all_day == 'true'" translate>{{ 'app.public.home.all_day' }}</span>
|
|
||||||
<span ng-if="event.all_day == 'false'">{{ 'app.public.home.from_time_to_time' | translate:{START:(event.start_date | amDateFormat:'LT'), END:(event.end_date | amDateFormat:'LT')} }}</span>
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-6 row m-b-sm">
|
|
||||||
<i class="fa fa-user red col-xs-3 padder-icon"></i>
|
|
||||||
<h6 class="m-n col-xs-9 ">
|
|
||||||
<span ng-if="event.nb_free_places > 0">{{ 'app.public.home.still_available' | translate }} {{event.nb_free_places}}</span>
|
|
||||||
<span ng-if="!event.nb_total_places" translate>{{ 'app.public.home.free_entry' }}</span>
|
|
||||||
<span ng-if="event.nb_total_places > 0 && event.nb_free_places <= 0" translate>{{ 'app.public.home.event_full' }}</span>
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 row m-b-sm">
|
|
||||||
<i class="fa fa-bookmark red col-xs-3 padder-icon"></i>
|
|
||||||
<h6 class="m-n col-xs-9">
|
|
||||||
<span ng-if="event.amount == 0" translate>{{ 'app.public.home.free_admission' }}</span>
|
|
||||||
<span ng-if="event.amount > 0">{{ 'app.public.home.full_price' | translate }} {{event.amount | currency}}</span>
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center clearfix ">
|
|
||||||
<div class="btn btn-lg btn-warning bg-white b-2x rounded m-t-sm m-b-sm upper text-sm width-70" ui-sref="app.public.events_show({id: event.id})" ><span translate>{{ 'app.shared.buttons.consult' }}</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
65
app/assets/templates/home/events.html
Normal file
65
app/assets/templates/home/events.html
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<section class="home-events">
|
||||||
|
<h4 class="text-sm m-t-sm">{{ 'app.public.home.fablab_s_next_events' | translate }} <a ui-sref="app.public.events_list" class="pull-right"><i class="fa fa-tags"></i> {{ 'app.public.home.every_events' | translate }}</a></h4>
|
||||||
|
|
||||||
|
<div class="row" ng-repeat="event in (upcomingEvents.length/3 | array)">
|
||||||
|
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4" ng-repeat="event in upcomingEvents.slice(3*$index, 3*$index + 3)">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="widget panel panel-default" ui-sref="app.public.events_show({id: event.id})">
|
||||||
|
<div class="panel-heading picture" style="background-image: url({{event.event_image_medium}});" >
|
||||||
|
<img src="data:image/png;base64," data-src="holder.js/100%x100%/text:/font:FontAwesome/icon" bs-holder ng-if="!event.event_image" class="img-responsive">
|
||||||
|
</div>
|
||||||
|
<div class="panel-body" style="heigth:170px;">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-9">
|
||||||
|
<h1 class="m-b">{{event.title}}</h1>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-3">
|
||||||
|
<span class="v-middle badge text-xs" ng-class="'bg-{{event.category.slug}}'">{{event.category.name}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="event-description" ng-bind-html="event.description | simpleText | humanize : 500 | breakFilter"></p>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6 row m-b-sm">
|
||||||
|
<i class="fa fa-calendar red col-xs-3 padder-icon"></i>
|
||||||
|
<h6 class="m-n col-xs-9 " ng-hide="isOneDayEvent(event)">{{ 'app.public.home.from_date_to_date' | translate:{START:(event.start_date | amDateFormat:'L'), END:(event.end_date | amDateFormat:'L')} }}</h6>
|
||||||
|
<h6 class="m-n col-xs-9 " ng-show="isOneDayEvent(event)">{{ 'app.public.home.on_the_date' | translate:{DATE:(event.start_date | amDateFormat:'L')} }}</h6>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 row m-b-sm">
|
||||||
|
<i class="fa fa-clock-o red col-xs-3 padder-icon"></i>
|
||||||
|
<h6 class="m-n col-xs-9">
|
||||||
|
<span ng-if="event.all_day == 'true'" translate>{{ 'app.public.home.all_day' }}</span>
|
||||||
|
<span ng-if="event.all_day == 'false'">{{ 'app.public.home.from_time_to_time' | translate:{START:(event.start_date | amDateFormat:'LT'), END:(event.end_date | amDateFormat:'LT')} }}</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6 row m-b-sm">
|
||||||
|
<i class="fa fa-user red col-xs-3 padder-icon"></i>
|
||||||
|
<h6 class="m-n col-xs-9 ">
|
||||||
|
<span ng-if="event.nb_free_places > 0">{{ 'app.public.home.still_available' | translate }} {{event.nb_free_places}}</span>
|
||||||
|
<span ng-if="!event.nb_total_places" translate>{{ 'app.public.home.free_entry' }}</span>
|
||||||
|
<span ng-if="event.nb_total_places > 0 && event.nb_free_places <= 0" translate>{{ 'app.public.home.event_full' }}</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 row m-b-sm">
|
||||||
|
<i class="fa fa-bookmark red col-xs-3 padder-icon"></i>
|
||||||
|
<h6 class="m-n col-xs-9">
|
||||||
|
<span ng-if="event.amount == 0" translate>{{ 'app.public.home.free_admission' }}</span>
|
||||||
|
<span ng-if="event.amount > 0">{{ 'app.public.home.full_price' | translate }} {{event.amount | currency}}</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center clearfix ">
|
||||||
|
<div class="btn btn-lg btn-warning bg-white b-2x rounded m-t-sm m-b-sm upper text-sm width-70" ui-sref="app.public.events_show({id: event.id})" ><span translate>{{ 'app.shared.buttons.consult' }}</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@ -667,8 +667,10 @@ unless Setting.find_by(name: 'home_content').try(:value)
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row wrapper m-t-sm">
|
<div class="row wrapper m-t-sm">
|
||||||
|
<div class="col-lg-12">
|
||||||
<div id="events">#{I18n.t('app.admin.settings.item_events')}</div>
|
<div id="events">#{I18n.t('app.admin.settings.item_events')}</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
HTML
|
HTML
|
||||||
setting.save
|
setting.save
|
||||||
end
|
end
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user