Related
I am new in ReactJs and trying to learn it. I installed a package of react-share. Since i am trying to edit someone else's code i am not able to import the package due to webpack I believe. Every time i try to import a package I receive an error saying the import should always be on top of the script. I tried using require and I get this error in Console
TypeError: Super expression must either be null or a function, not undefined
My code looks like this:
"use strict";
require('./../../../assets/styles/components/thread.less');
var reactShare = require('react-share');
var React = require('react');
var ReactDOM = require('react-dom');
var Fluxxor = require('fluxxor');
var _ = require("lodash");
var FluxMixin = Fluxxor.FluxMixin(React);
var StoreWatchMixin = Fluxxor.StoreWatchMixin;
var routerShape = require('react-router').routerShape;
var MicroAudioViews = require('./../../constants/MicroAudioViews');
var AudioModes = require("./../../constants/AudioModes");
var i18n = require("i18next-client");
//components
var AudioVisualizer = require('../elements/AudioVisualizer');
var ReviewOverlay = require('../elements/ReviewOverlay');
var ReviewShare = require('../elements/ReviewShare');
var Menu = require('../elements/Menu');
I have to use react-share's
<FacebookShareButton url={shareLink} quote={title} className="social-media-icon">
<FacebookIcon size={32} round />
</FacebookShareButton>`
Component to share the shareLink on facebook.
Here the full code.
/*import {
FacebookShareButton,
GooglePlusShareButton,
TwitterShareButton,
WhatsappShareButton,
FacebookIcon,
TwitterIcon,
WhatsappIcon
} from 'react-share';*/
"use strict";
require('./../../../assets/styles/components/thread.less');
var reactShare = require('react-share');
var React = require('react');
var ReactDOM = require('react-dom');
var Fluxxor = require('fluxxor');
var _ = require("lodash");
var FluxMixin = Fluxxor.FluxMixin(React);
var StoreWatchMixin = Fluxxor.StoreWatchMixin;
var routerShape = require('react-router').routerShape;
var MicroAudioViews = require('./../../constants/MicroAudioViews');
var AudioModes = require("./../../constants/AudioModes");
var i18n = require("i18next-client");
//components
var AudioVisualizer = require('../elements/AudioVisualizer');
var ReviewOverlay = require('../elements/ReviewOverlay');
var ReviewShare = require('../elements/ReviewShare');
var Menu = require('../elements/Menu');
var Review = React.createClass({
mixins:[
FluxMixin,
StoreWatchMixin("ThreadStore", "RecordStore", "ReviewStore", "ApplicationStore", "SyncStore", "DemoStore", "ShareStore")
],
contextTypes: {
router: routerShape.isRequired
},
/* react interface*/
getInitialState: function() {
var selectedThreads = [];
var shareType = 'thread';
if(this.props.location.state && this.props.location.state.type == "thread") {
selectedThreads.push(this.props.location.state.threadId);
} else if(this.props.location.state && this.props.location.state.type == "share") {
shareType = 'facebook';
} else if (this.props.location.state && this.props.location.state.type == 'sharereply') {
shareType = 'sharereply';
}
return {
threadUserId: this.props.params.id,
activeShareType: shareType,
selectedThreads: selectedThreads
};
},
getStateFromFlux: function() {
var flux = this.getFlux();
var recordStoreState = flux.store('RecordStore').getState();
var threadStoreState = flux.store('ThreadStore').getState();
var appStoreState = flux.store('ApplicationStore').getState();
var reviewStoreState = flux.store('ReviewStore').getState();
var shareStoreState = flux.store('ShareStore').getState();
var demoState = flux.store('DemoStore').getState();
var activeRecord = recordStoreState.activeRecord || null;
var activeThread = threadStoreState.activeThread;
var activeRecordUser = null;
var authenticatedUser = appStoreState.demoMode? demoState.user : appStoreState.user;
var state = {
demoMode: appStoreState.demoMode,
playing: recordStoreState.playing,
recording: recordStoreState.recording,
activeThread: activeThread,
threads: threadStoreState.threads,
authenticatedUser: authenticatedUser,
activeRecord: activeRecord,
activeShareUser: shareStoreState.user,
shareId: shareStoreState.shareId
};
return state;
},
render: function() {
var threadClass = "thread";
var fbClass = "facebook";
var explanationText, usageContent;
var finishButtonClass = 'finish-button';
if(this.state.activeShareType == "thread") {
threadClass += ' active';
explanationText = i18n.t('content:review.reviewDoneExpl', {
count: this.state.selectedThreads.length,
context: this.state.selectedThreads.length == 0 ? 'doselect' : undefined
});
finishButtonClass += this.state.selectedThreads.length == 0 ? ' inactive' : '';
var threadCards = [];
var self = this;
_.each(this.state.threads, function(thread){
var threadUser = thread.user;
var threadUserPicture = threadUser.pictures[0].source;
var userName = threadUser.firstName + ' ' + threadUser.lastName;
var styleProps = {
backgroundImage : threadUserPicture ? 'url(' + threadUserPicture + ')': 'none'
};
var cls = "thread card" + (self.state.selectedThreads.indexOf(thread.id) != -1? " selected" : "");
threadCards.push(<div key={thread.id} className={cls} onClick={self.onThreadCardSelected} data-thread-id={thread.id}>
<div className='pic' style={styleProps}></div>
<div className='name'>{userName}</div>
<div className='checked micro-audio-icon-check'></div>
</div>);
});
//if thread cards array is null then we are displaying the required text
if(threadCards.length==0){
var text= "Du hast noch keine Freunde in audiyoh hinzugefugt (gehe dafur zur Suche).";
//displaying the content
usageContent = (
<div className="usage-target-container">
<p className="chat-text">{text} <br/>Uber <img className="share-icon" src={require('./../../../assets/images/share-active.png')} /> Teilen kannst du deine Aufnahme in aderen Kanale teilen.</p>
</div>);
//displaying the button
var finishContainer = <div className="finish-container">
<div className={finishButtonClass} >Fertige</div>
<div className="finish-text"><p className="chat-underbtn-text">Mindestens <b> ein Gesprach <br/> wahlen,</b> dem die Aufnahme <br/> hinzugefugt werden soll</p></div>
</div>;
}else{
usageContent = (
<div className="usage-target-container">
{threadCards}
</div>);
}
} else {
fbClass += ' active';
finishButtonClass += ' facebook';
explanationText = i18n.t('content:review.facebookExplanation');
//displaying the input box with the link and copy button
console.log("THe shareStoreState is " + this.state.shareId);
//the shareId is generate asynchroneously, so this.state.shareId can be null
if(typeof this.state.shareId === "string") {
//the link can be created like this:
var shareLink = window.location.origin + '/shared/' + this.state.shareId;
}
var usageContent = (
<div className="usage-target-container">
<div className="socialLinkContainer">
<p> Link zum Teilen </p>
<input className="copylink" type="text" value={shareLink} id="shareLink" /><br/>
<input className="copybtn" type="button" onClick={this.copytoclipboard} value="Link kopieren" />
</div>
</div>);
var finishContainer = <div className="finish-container">
<div className="social-media">
/*<img className="social-media-icon" src={require('./../../../assets/images/facebook.png')} />*/
<FacebookShareButton
url={shareLink}
quote={title}
className="social-media-icon">
<FacebookIcon
size={32}
round />
</FacebookShareButton>
<img className="social-media-icon" src={require('./../../../assets/images/whatsapp.png')} />
<img className="social-media-icon" src={require('./../../../assets/images/twitter.png')} />
<img className="social-media-icon" src={require('./../../../assets/images/instagram.png')} />
</div>
</div>;
}
var targetSwitchElements = [
<div title={i18n.t('content:review.sharethread')}
key="thread"
className={threadClass}
onClick={this.activateThreadShareType}><span>audiyoh-chat</span></div>,<br/>,
<div title={i18n.t('content:review.sharefb')}
key="facebook"
className={fbClass}
onClick={this.activateFBShareType}><span>Teilen</span></div>
];
//we either want to save a profile record a share response, so we dont need the fb/thread switch and thread cards
if(this.props.location.state && ["profile", "sharereply"].indexOf(this.props.location.state.type) != -1) {
var buttonText = i18n.t('content:review.profile');
if(this.props.location.state.type == "sharereply"){
buttonText = i18n.t('content:review.share', {name: this.state.activeShareUser.firstName});
}
targetSwitchElements = <div className="profile-record" onClick={this.onFinishRecord}>{buttonText}</div>;
usageContent = null;
finishContainer = null;
}
return (
<div className="ma-reviewing">
<div className="review-controls">
<div className="row">
<div className="col-3">
<a title={i18n.t('content:review.delete')} className="delete" onClick={this.deleteRecording}></a>
<a title={i18n.t('content:review.redo')} className="record" onClick={this.onRecordButtonClick}></a>
</div>
<div className="col-6">
<div className="review-container">
<ReviewOverlay
activeRecordUser={this.state.authenticatedUser}
record={this.state.activeRecord}
/>
</div>
</div>
{finishContainer}
<div className="col-3">
<div className="target-switch">
<p>Weiter mit der Aufnahme</p>
{targetSwitchElements}
</div>
</div>
</div>
</div>
<div className="upper" ref="upper">
<Menu location={this.props.location} />
<div className="menu">
</div>
</div>
<div className="upperguard" ref="upperguard"></div>
<div className="lower" ref="lower">
<div className="sizing-wrapper">
{usageContent}
</div>
</div>
</div>
);
},
deleteRecording: function(e) {
e.preventDefault();
if(this.props.location && this.props.location.state.userId) {
this.context.router.push({
pathname: "/thread/" + this.props.location.state.userId,
state: this.props.location.state
});
}
else {
this.context.router.push({
pathname: "/profile",
state: this.props.location.state
});
}
},
onRecordButtonClick: function(e) {
e.preventDefault();
this.context.router.push({
pathname: "/record",
state: this.props.location.state
});
},
onThreadCardSelected: function(syntheticEvent, reactId, e) {
var target = syntheticEvent.target.parentNode;
var threadId = target.getAttribute("data-thread-id");
var idx = this.state.selectedThreads.indexOf(threadId);
if(idx != -1) {
this.state.selectedThreads.splice(idx, 1);
this.setState({
selectedThreads: [].concat(this.state.selectedThreads)
});
}
else {
this.setState({
selectedThreads: [threadId].concat(this.state.selectedThreads)
});
}
},
activateThreadShareType: function() {
if(this.state.activeShareType == "thread") {
return;
}
this.setState({
activeShareType: 'thread'
});
},
activateFBShareType: function() {
if(this.state.activeShareType == "facebook") {
return;
}
this.setState({
activeShareType: 'facebook'
});
//this will store the record and generate a shareId
this.getFlux().actions.record.local.saveRecording({
type: "share"
});
/*var state1 = this.context.router.push({
pathname: '/review',
state: {
type: "profile",
role: "main"
}
});*/
//console.log("the state1 is " + state1);
//this.getFlux().actions.record.local.saveRecording(state1);
},
copytoclipboard: function(){
var copyText = document.getElementById("shareLink");
copyText.select();
document.execCommand("copy");
console.log("Copied the text: " + copyText.value);
},
onFinishRecord: function(e) {
if(e.target.classList.contains('inactive')) {
return;
}
if(this.props.location.state && ["profile", "sharereply"].indexOf(this.props.location.state.type) != -1) {
console.log(this.props.location.state);
this.getFlux().actions.record.local.saveRecording(this.props.location.state);
}
else if(this.state.activeShareType == "facebook") {
this.getFlux().actions.record.local.saveRecording({
type: "share"
});
}
else {
var data = {
type: "thread",
threadIds: this.state.selectedThreads
};
//we started recording from a thread, so we pass the userId to be able to return to this thread
//after saving
if(this.props.location.state && this.props.location.state.type == "thread") {
data.userId = this.props.location.state.userId;
}
this.getFlux().actions.record.local.saveRecording(data);
}
}
});
module.exports = Review;
I found my error!
The problem was that I initialized the require('react-share') in a variable reactShare and was using the component as
<FacebookShareButton url={shareLink} quote={title} className="social-media-icon">
<FacebookIcon size={32} round />
</FacebookShareButton>`
Instead, I should have initialized the require statement as
var FacebookShareButton = require('react-share');
Because of not declaring it properly React was yelling on me.
I hope this will save someones precious time. Cheers!
API's used : Angularjs, Angular material for tabs and ui-grid(ui-grid.info)
I have five tabs, currently i am loading all the five tabs using angular material with content as grid from angular-ui-grid; data loaded from backend using external pagination per page data from backend.
HTML Code:
<div cg-busy="{promise:downloadCSVPromise,message:'Downloading...'}">
<div cg-busy="{promise:loadingData,message:'Loading Data...'}">
<section style="min-height: 434px;" class="wrap">
<div ng-cloak>
<md-content>
<md-tabs md-selected="selectedIndex" md-border-bottom md-autoselect md-dynamic-height>
<md-tab id="tab1" ng-disabled="disableParts">
<md-tab-label>Tab 1</md-tab-label>
<md-tab-body>
<div class="custom-csv-link-location"></div>
<div ui-grid="gridOptions" ui-grid-pagination ui-grid-selection ui-grid-exporter ui-grid-auto-resize class="myGrid">
<div class="grid-msg-overlay" ng-hide="!vm.loading">
<div class="msg">
<span>
Loading Data...
<i class="fa fa-spinner fa-spin"></i>
</span>
</div>
</div>
<div class="watermark" ng-show="!gridOptions.data.length">No data available</div>
</div>
</md-tab-body>
</md-tab>
<md-tab id="tab2" ng-disabled="disableService">
<md-tab-label>Service Order</md-tab-label>
<md-tab-body>
<div ui-grid="serviceOrderGridOptions" ui-grid-pagination ui-grid-selection ui-grid-exporter class="myGrid">
<div class="watermark" ng-show="!serviceOrderGridOptions.data.length">No data available</div>
</div>
</md-tab-body>
</md-tab>
<md-tab id="tab3" ng-disabled="disableSales">
<md-tab-label>Sales Order</md-tab-label>
<md-tab-body>
<div ui-grid="salesGridOptions" ui-grid-pagination ui-grid-selection ui-grid-exporter class="myGrid">
<div class="watermark" ng-show="!salesGridOptions.data.length">No data available</div>
</div>
</md-tab-body>
</md-tab>
<md-tab id="tab4" ng-disabled="disableNC">
<md-tab-label>Non Conformances</md-tab-label>
<md-tab-body>
<div ui-grid="nonconfGridOptions" ui-grid-pagination ui-grid-selection ui-grid-exporter class="myGrid">
<div class="watermark" ng-show="!nonconfGridOptions.data.length">No data available</div>
</div>
</md-tab-body>
</md-tab>
<md-tab id="tab5" ng-disabled="disableBOM" md-on-select="resize()">
<md-tab-label>System BOM</md-tab-label>
<md-tab-body>
<div id="bom-charts">
<div class="chartBx bom-pie-chart">
<nvd3 options="pie_options" data="pie_data"></nvd3>
</div>
<div class="chartBx bom-stack-chart">
<nvd3 options="stack_options" data="stack_data"></nvd3>
</div>
<div class="clearfix"></div>
</div>
<div ui-grid="bomGridOptions" ui-grid-pagination ui-grid-selection ui-grid-exporter class="myGrid">
<div class="watermark" ng-show="!bomGridOptions.data.length">No data available</div>
</div>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
</section>
</div>
</div>
Script Code:
function partsData(type) {
$scope.serversideFilters = [];
$scope.type=type ? type : "";
var paginationOptions = {
pageNumber: 1,
pageSize: 25,
sort: null
};
var originatorEv;
$scope.openMenu = function ($mdOpenMenu, ev) {
originatorEv = ev;
$mdOpenMenu(ev);
};
$scope.switchTabs = function (row, type) {
console.log('Menu item clicked - ' + row.entity.materialnum);
if(type === "service_order"){
$scope.selectedIndex = 1;
$scope.drillKeyword = row.entity.materialnum;
serviceOrderData('drill');
} else if(type === "sales_order"){
$scope.selectedIndex = 2;
$scope.drillKeyword = row.entity.materialnum;
salesData('drill');
} else if(type === "NC"){
$scope.selectedIndex = 3;
$scope.drillKeyword = row.entity.materialnum;
nonconfData('drill');
} else if(type === "BOM"){
$scope.selectedIndex = 4;
$scope.drillKeyword = row.entity.materialnum;
bomData('drill');
}
};
var fileNm = 'Parts_' + today + '.csv';
$scope.gridOptions = {
enableSelectAll: false,
enableRowSelection: false,
enableRowHeaderSelection: false,
exporterCsvFilename: fileNm,
exporterMenuPdf: false,
enableFiltering: true,
showGridFooter: true,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
useExternalPagination: true,
enableGridMenu: true,
columnDefs: [
{
name: 'materialnum', displayName: 'Part Number', cellClass: '', headerCellClass:'header-server-filtered',enableFiltering: false,width: 150,
cellTemplate: "<div class='ui-grid-cell-contents'><md-menu md-offset='0 45' md-position-mode='target target'><md-button class='md-icon-button' ng-click='grid.appScope.openMenu($mdOpenMenu, $event)'><i class='fa fa-indent'></i></md-button><md-menu-content width='2'><md-menu-item><md-button ng-click='grid.appScope.switchTabs(row,'service_order')'>Service Order </md-button></md-menu-item><md-menu-item><md-button ng-click='grid.appScope.switchTabs(row,'sales_order')'>Sales Order</md-button></md-menu-item><md-menu-item><md-button ng-click='grid.appScope.switchTabs(row,'NC')'>Non Conformances</md-button></md-menu-item><md-menu-item><md-button ng-click='grid.appScope.switchTabs(row,'BOM')'>System BOM</md-button></md-menu-item></md-menu-content></md-menu><span title='{{COL_FIELD CUSTOM_FILTERS}}' ng-click='grid.appScope.showAdvanced($event, row, col)' class='partNum'>{{COL_FIELD CUSTOM_FILTERS}}</span></div>"
},
{
name: 'materialdesc', displayName: 'Part Description', headerCellClass: 'header-server-filtered', width: 200,
filter: {
condition: $scope.filterPartDesc
},
cellTemplate: '<div ng-if="row.entity.materialdesc" title="{{row.entity.materialdesc}}" >{{row.entity.materialdesc}}</div><div ng-if="!row.entity.materialdesc"></div>',
},
sparableColumn,
consumableColumn,
cvvColumn,
npiColumn,
criticalColumn,
trColumn,
ipColumn,
faiColumn,
altpartsColumn,
repariableColumn,
{
name: 'onhandstock', displayName: 'On Hand Stock', headerCellClass: $scope.highlightFilteredHeader, enableFiltering: false,
cellTemplate: '<div ng-if="row.entity.onhandstock" class="tcenter">{{row.entity.onhandstock}}</div><div ng-if="!row.entity.onhandstock"></div>'
},
{
name: 'totalstock', displayName: 'Total Stock Limit', headerCellClass: $scope.highlightFilteredHeader, enableFiltering: false,
cellTemplate: '<div ng-if="row.entity.totalstock" class="tcenter">{{row.entity.totalstock}}</div><div ng-if="!row.entity.totalstock"></div>'
}
],
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
/* Facet filter for server side filtering*/
$scope.gridApi.core.on.filterChanged( $scope, function() {
var grid = this.grid;
$scope.serversideFilters = [];
angular.forEach(grid.columns, function(value, key) {
if(value.filters[0].term) {
var dummy = {};
console.log('FILTER TERM FOR ' + value.colDef.name + ' = ' + value.filters[0].term);
dummy['k'] = value.colDef.name;
dummy['v'] = value.filters[0].term;
$scope.serversideFilters.push(dummy);
}
});
getPage();
});
$scope.gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
if (sortColumns.length === 0) {
paginationOptions.sort = null;
} else {
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
$scope.gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
}
}
$scope.filterPartDesc = function(searchTerm, callValue){
console.log('Inside Filter Part Description' +searchTerm );
if(value.filters[0].term) {
var dummy = {};
console.log('FILTER TERM FOR ' + value.colDef.name + ' = ' + value.filters[0].term);
dummy['k'] = value.colDef.name;
dummy['v'] = value.filters[0].term;
$scope.serversideFilters.push(dummy);
}
};
var getPage = function () {
var url = "http://test.server.com:8080/Dash/TestServlet";
var keyword = $scope.keyword ? $scope.keyword : '';
var paramsObj = {};
if($scope.type == "drill"){
keyword = $scope.drillKeyword;
paramsObj['ftype'] = 'exact';
}
paramsObj['query'] = keyword;
paramsObj['start'] = paginationOptions.pageSize * paginationOptions.pageNumber - paginationOptions.pageSize;
paramsObj['rows'] = paginationOptions.pageSize;
if (type && type !== '') {
if (type === 'cvv')
paramsObj[type] = 'YES';
if (type === 'sparable')
paramsObj[type] = 'YES';
if (type === 'consumable')
paramsObj[type] = 'C';
}
angular.forEach($scope.serversideFilters, function(obj){
paramsObj[obj.k] = obj.v;
});
$scope.loadingData = $http.get(url, { params: paramsObj, headers: { 'Content-Type': 'application/json' } })
.then(function (res) {
$scope.gridOptions.totalItems = res.data.numFound;
$scope.gridApi.grid.options.totalItems = res.data.numFound;
$scope.numFound = res.data.numFound;
var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
$scope.filters = res.data.facetFieldsMap;
var dummy = {
label: "",
value: ""
}
$scope.consumableFilter = [];
$scope.sparableFilter = [];
$scope.cvvFilter = [];
$scope.npiFilter = [];
$scope.criticalFilter = [];
$scope.trFilter = [];
$scope.ipFilter = [];
$scope.faiFilter = [];
$scope.altpartsFilter = [];
$scope.repariableFilter = [];
angular.forEach($scope.filters, function (ukey, uvalue) {
if (uvalue === "sparable") {
angular.forEach(ukey, function (key, value) {
dummy = {};
dummy.label = value;
dummy.value = value;
$scope.sparableFilter.push(dummy);
});
}
if (uvalue === "consumable") {
angular.forEach(ukey, function (key, value) {
/*if (value === 'N'){
value = 'NO';
}
if (value === 'Y'){
value = 'YES';
} */
dummy = {};
dummy.label = value;
dummy.value = value;
$scope.consumableFilter.push(dummy);
});
}
if (uvalue === "cvv") {
angular.forEach(ukey, function (key, value) {
dummy = {};
dummy.label = value;
dummy.value = value;
$scope.cvvFilter.push(dummy);
});
}
if (uvalue === "npi") {
angular.forEach(ukey, function (key, value) {
dummy = {};
dummy.label = value;
dummy.value = value;
$scope.npiFilter.push(dummy);
});
}
if (uvalue === "crtclpart") {
angular.forEach(ukey, function (key, value) {
dummy = {};
/*if (value === 'N'){
value = 'NO';
}
if (value === 'Y'){
value = 'YES';
} */
dummy.label = value;
dummy.value = value;
$scope.criticalFilter.push(dummy);
});
}
if (uvalue === "traderstrctd") {
angular.forEach(ukey, function (key, value) {
dummy = {};
dummy.label = value;
dummy.value = value;
$scope.trFilter.push(dummy);
});
}
if (uvalue === "ipsnstv") {
angular.forEach(ukey, function (key, value) {
dummy = {};
dummy.label = value;
dummy.value = value;
$scope.ipFilter.push(dummy);
});
}
if (uvalue === "fai") {
angular.forEach(ukey, function (key, value) {
dummy = {};
dummy.label = value;
dummy.value = value;
$scope.faiFilter.push(dummy);
});
}
if (uvalue === "alternatepart") {
angular.forEach(ukey, function (key, value) {
dummy = {};
dummy.label = value;
dummy.value = value;
$scope.altpartsFilter.push(dummy);
});
}
if (uvalue === "reprblcd") {
angular.forEach(ukey, function (key, value) {
dummy = {};
dummy.label = value;
dummy.value = value;
$scope.repariableFilter.push(dummy);
});
}
});
sparableColumn.filter.selectOptions = $scope.sparableFilter;
consumableColumn.filter.selectOptions = $scope.consumableFilter;
cvvColumn.filter.selectOptions = $scope.cvvFilter;
npiColumn.filter.selectOptions = $scope.npiFilter;
criticalColumn.filter.selectOptions = $scope.criticalFilter;
trColumn.filter.selectOptions = $scope.trFilter;
ipColumn.filter.selectOptions = $scope.ipFilter;
faiColumn.filter.selectOptions = $scope.faiFilter;
altpartsColumn.filter.selectOptions = $scope.altpartsFilter;
repariableColumn.filter.selectOptions = $scope.repariableFilter;
$scope.gridOptions.data = res.data.partSearchList;
if ($scope.gridOptions.data.length === 0) {
$scope.gridOptions.enablePaginationControls = false;
}
});
};
$scope.toggleFilterRow = function () {
$scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
};
getPage();
}
Currently i am loading all the tabs with all the hits going to backend to fetch data but as per the requirement i need to change like below:
Only one tab will be loaded as per user selects in a dropdown to load the data and then inside the loaded tab we have links to other tab which will dynamically load the remaining tab/s on demand
I tried to hide or disable the material tabs but was getting error on load of the page on below lines :
$scope.gridApi.grid.options.totalItems = res.data.numFound;
I kept the loading of particular tab conditionally but then the HTML had the gridOptions defined and script was not initialized with the gridOptions it also threw error.
Finally i had tried below as well but didnt worked out.
$scope.serviceOrderGridOptions = {};
$scope.gridOptions = [];
$scope.serviceOrderGridOptions.data = [];
How can we make a tab load on demand with no issues on load of the page and also how to load the ui-grid inside it.
Appreciate your help!
/**
* #author zhixin wen <wenzhixin2010#gmail.com>
* extensions: https://github.com/kayalshri/tableExport.jquery.plugin
*/
(function ($) {
'use strict';
var sprintf = $.fn.bootstrapTable.utils.sprintf;
/**
Here these are the typeName of all files which we can download from bootstrap table and i want to pass xlsx TypeName for download xlsx file
*/
var TYPE_NAME = {
json: 'JSON',
xml: 'XML',
png: 'PNG',
csv: 'CSV',
txt: 'TXT',
sql: 'SQL',
doc: 'MS-Word',
excel: 'Excel',
powerpoint: 'MS-Powerpoint',
pdf: 'PDF'
};
$.extend($.fn.bootstrapTable.defaults, {
showExport: true,
exportDataType: 'all', // basic, all, selected
// 'json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'powerpoint', 'pdf'
exportTypes: ['xml', 'csv', 'excel'],
exportOptions: {}
});
$.extend($.fn.bootstrapTable.defaults.icons, {
export: 'glyphicon-download-alt'
});
var BootstrapTable = $.fn.bootstrapTable.Constructor,
_initToolbar = BootstrapTable.prototype.initToolbar;
BootstrapTable.prototype.initToolbar = function () {
this.showToolbar = this.options.showExport;
_initToolbar.apply(this, Array.prototype.slice.apply(arguments));
if (this.options.showExport) {
var that = this,
$btnGroup = this.$toolbar.find('>.btn-group'),
$export = $btnGroup.find('div.export');
if (!$export.length) {
$export = $([
'<div class="export btn-group">',
'<button class="btn btn-default" title="Download" ' +
sprintf(' btn-%s', this.options.iconSize) +
' dropdown-toggle" ' +
'data-toggle="dropdown" type="button">',
sprintf('<i class="%s %s"></i> ', this.options.iconsPrefix, this.options.icons.export),
'<span class="caret"></span>',
'</button>',
'<ul class="dropdown-menu" role="menu">',
'</ul>',
'</div>'].join('')).appendTo($btnGroup);
var $menu = $export.find('.dropdown-menu'),
exportTypes = this.options.exportTypes;
if (typeof this.options.exportTypes === 'string') {
var types = this.options.exportTypes.slice(1, -1).replace(/ /g, '').split(',');
exportTypes = [];
$.each(types, function (i, value) {
exportTypes.push(value.slice(1, -1));
});
}
$.each(exportTypes, function (i, type) {
if (TYPE_NAME.hasOwnProperty(type)) {
$menu.append(['<li data-type="' + type + '">',
'<a href="javascript:void(0)">',
TYPE_NAME[type],
'</a>',
'</li>'].join(''));
}
});
$menu.find('li').click(function () {
var type = $(this).data('type'),
doExport = function () {
that.$el.tableExport($.extend({}, that.options.exportOptions, {
type: type,
escape: false,
}));
};
if (that.options.exportDataType === 'all' && that.options.pagination) {
//**----- Media Dataset table export hidden columns setting----**//
//** show Hidden columns **//
if (that.options.fileName != undefined && that.options.fileName == "MediaDatasetExport") {
that.columns.forEach(function (col) {
if (that.options.exportOptions.showColumn.indexOf(col.fieldIndex) != -1)
col.visible = true;
});
that.initHeader();
that.initSearch();
that.initPagination();
that.initBody();
}
that.$el.one('load-success.bs.table page-change.bs.table', function () {
doExport();
that.togglePagination();
});
that.togglePagination();
//**----- Media Dataset table export hidden columns setting----**//
//** hide shown columns **//
if (that.options.fileName != undefined && that.options.fileName == "MediaDatasetExport") {
that.columns.forEach(function (col) {
if (that.options.exportOptions.showColumn.indexOf(col.fieldIndex) != -1)
col.visible = false;
});
that.initHeader();
that.initSearch();
that.initPagination();
that.initBody();
}
} else if (that.options.exportDataType === 'selected') {
var data = that.getData(),
selectedData = that.getAllSelections();
that.load(selectedData);
doExport();
that.load(data);
} else {
doExport();
}
});
}
}
};
})(jQuery);
I want to integrate facebook Widget for getting facebook group's timeline / posts. I have searched & got this https://developers.facebook.com/docs/plugins/page-plugin but this gives user's & page's timeline. I wanted Group's timeline. I didn't found perfect answer on Fb Developer portal & didn't get anything on web.
Any help on this is appreciated.
Thanks in Advance.
After lots of search, no plugin kind of thing i got for this. But yes got one blog in php where the developer made custom widget manually, I modified it with JavaScript & jQuery.
<div style="height: 375px; background: #f6f7f9;">
<div id="fb-root"></div>
<p class="text-center media-body social-link" style="background: white">
<img src="~/Content/Images/Link-Red.png" />
Facebook Group
</p>
<div id="fix-div"></div>
<div id="facebook-group" style="overflow-y: scroll; height: 375px; margin-top: 55px;"></div>
</div>
Facebook JavaScript API as follows-
<script>
var access_token = '<!-- Valid fb access token -->';
var groupId = 'valid facebook group id';
window.fbAsyncInit = function () {
FB.init({
appId: 'valid facebook app id',
cookie: true,
xfbml: true,
version: 'v2.8'
});
FB.api("" + groupId + "?fields=cover,icon,name,privacy",
'get',
{ access_token: access_token },
function (groupResponse) {
if (groupResponse && !groupResponse.error) {
$("#fix-div").html('');
$("#facebook-group").html('');
var fixDivHtml =
"<div style='z-index: 10;position: absolute;border: 1px solid #e9ebee;max-width: 470px;background: white;min-height: 50px;'><div class='media' style='border: 0'><div class='media-left media-middle' style='vertical-align: bottom'><a href='https://www.facebook.com/groups/" + groupResponse.id + "' target='_blank'><img class='media-object' src='/Content/Images/Facebook-group.png' style='min-height: 50px;padding: 5px 10px;width: 64px;'></a></div><div class='media-body media-middle'><a href='https://www.facebook.com/groups/" + groupResponse.id + "' target='_blank'><h4 class='media-heading' style='font-size: 14px;font-weight: bold;'>" + groupResponse.name + "</h4></a></div></div></div>";
$("#fix-div").append(fixDivHtml);
FB.api("/" +
groupId +
"/feed?fields=id,message,link,attachments{media,description},created_time,from,object_id,parent_id&limit=1000",
'get',
{ access_token: access_token },
function (response) {
if (response && !response.error) {
for (var i = 0; i < response.data.length; i++) {
var picture = undefined;
var description = undefined;
var date = formatDate(response.data[i].created_time);
if (response.data[i].attachments !== undefined) {
if (response.data[i].attachments.data.length > 0) {
if (
response.data[i].attachments.data[0].media !==
undefined) {
if (
response.data[i].attachments.data[0].media
.image !==
undefined)
picture = response.data[i].attachments
.data[0].media.image.src;
if (
response.data[i].attachments.data[0].media
.image.description !==
undefined)
description = response.data[i].attachments
.data[0].media.image.description;
} else {
if (
response.data[i].attachments.data[0]
.description !==
undefined)
description = response.data[i].attachments
.data[0].description;
}
}
}
var message = response.data[i].message;
var
append =
"<div class='border'><div class='media'><div class='media-left media-middle'><a href='https://www.facebook.com/" + response.data[i].from.id + "' target='_blank'><img class='media-object' src='http://graph.facebook.com/" + response.data[i].from.id + "/picture?type=square'></a></div><div class='media-body' style='vertical-align: bottom'><a href='https://www.facebook.com/" + response.data[i].from.id + "' target='_blank'><h4 class='media-heading'>" + response.data[i].from.name + ".<br /><small>" + date + "</small></h4></a></div>";
if (message !== undefined) {
if (ValidURL(message) === 1) {
append +=
"<a class='ellipsis' href='" +
message +
"' target='_blank'>" +
message +
"</a>";
} else {
append += "<a class='ellipsis'>" + message + "</a>";
}
}
if (picture !== undefined)
append +=
"<a href='" +
response.data[i].link +
"' target='_blank'><img class='img-responsive' src='" +
picture +
"'/></a>";
if (description !== undefined)
append += "<p>" + description + "</p>";
append += '<hr///>' +
"<div class='btn-group btn-group-justified' role='group' aria-label='Justified button group'>" +
"<a href=" +
response.data[i].link +
" class='btn btn-default' role='button' target='_blank'><i class='fa fa-thumbs-up' aria-hidden='true'></i> Like</a>" +
"<a href=" +
response.data[i].link +
" class='btn btn-default' role='button' target='_blank'><i class='fa fa-comment' aria-hidden='true'></i> Comment</a></div></div></div>";
$("#facebook-group").append(append);
}
}
});
}
});
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
var formatDate = function (input) {
var d = new Date(Date.parse(input));
input = d.toString();
d = new Date(Date.parse(input.replace(/-/g, "/")));
var month = [
'january', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December'
];
var date = d.getDay().toString() +
" " +
month[d.getMonth().toString()] +
", " +
d.getFullYear().toString();
return (date);
};
function ValidURL(str) {
if (
/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test(str))
return 1;
else
return -1;
}
</script>
Here formatDate & ValidURL are helper functions used for some cosmetic operations.
I think I have a logic issue with my Angular that I need some help on.
We have a service that connects to a DB that gets saved values so our Angular form can get the values and use them. That is all set up.
My issue is, in our form we have 1 radio button list using an ng-repeat to generate the list and 3 dropdown lists. Our dropdown lists are triggering and update function to update the values of themselves. We are showing and hiding the dropdown menus based on the radio button lists selection (I will post the code). This should be noted we are using Umbraco CMS that this control is being used for, but this is not the actual issue.
The issue is, we console our response the value of the radio button list outputs fine to the selection we chose, BUT when I select one of the dropdown list items, the value of the dropdown list returns to the previously selected value. Any help figuring this out would be greatly appreciated.
Code is below:
my.controller.js
angular.module("umbraco")
.controller("Our.GalaxyEventSelectorController", function ($scope, $routeParams, notificationsService, GalaxyEventSelectorResource) {
$scope.emptyList = [{}];
$scope.ETypeRadio = { 0: "NA", 1: "RepeatingTimedEvent", 2: "RepeatSingleDayEvent", 3: "SingleTimedEvent" };
GalaxyEventSelectorResource.getEventById($routeParams.id, $scope.model.alias).then(function (response) {
// console.log("REsponse: " + response);
console.log("intial load on DOM load")
var resp = (response.data.indexOf("{") > -1 ? angular.fromJson(JSON.parse(response.data)) : "");
$scope.previousSelectedTypeOfEvent = (resp == "" ? "" : resp.TypeOfEvent);
$scope.previousSelectedEventTypeId = (resp == "" ? 0 : resp.EventTypeId);
$scope.previousSelectedEventName = (resp == "" ? "" : resp.EventName);
$scope.previousSelectedEventId = (resp == "" ? 0 : resp.EventId);
$scope.previousSelectedEventDate = (resp == "" ? "" : resp.EventDate);
//This loads the selection the initial time.
$scope.selectedTypeOfEvent = $scope.previousSelectedTypeOfEvent; //THIS Gets the previous radio button selection
//init EventTypeId dropdown
var initIdx = 0;
$scope.getEventTypeIds(true, initIdx);
}).then(function() {
//init Name dropdown
var initIdx = -1;
$scope.getEventNames(true, initIdx, $scope.previousSelectedEventTypeId);
}).then(function () {
//init EventIds and Dates dropdowns
var initIdx = -1;
$scope.getEventIdsAndDates(true, initIdx, $scope.previousSelectedEventName);
$scope.getEventDatesOnly(true, initIdx, $scope.previousSelectedEventName);
}).then(function () {
// init model values
$scope.typeOfEventRadioSelected($scope.previousSelectedTypeOfEvent);
$scope.updateModelValue(
$scope.previousSelectedTypeOfEvent,
$scope.previousSelectedEventTypeId,
$scope.previousSelectedEventName,
$scope.previousSelectedEventId,
$scope.previousSelectedEventDate);
});
$scope.updateModelValue = function (typeOfEvent, eventTypeId, eventName, eventId, eventDate) {
$scope.model.value = {
TypeOfEvent: typeOfEvent,
EventTypeId: eventTypeId,
EventName: eventName,
EventId: eventId,
EventDate: eventDate
}
console.log("Scope load and scope change");
console.log($scope.model.value);
};
//not used...attempting to make the visual nice onscreen but causes unpredictable loss of data. could be useful
$scope.addSpacesToCamelCase = function(txt) {
return txt.replace(/([a-z])([A-Z])/g, "$1 $2");
}
$scope.typeOfEventRadioSelected = function(selectedTypeOfEvent) {
//triggered when radio button selected.
var typeOfEvent = selectedTypeOfEvent;
var eventTypeId = $scope.selectedGalaxyEventTypeId != null
? $scope.selectedGalaxyEventTypeId.EventTypeId
: "";
var eventName = "";
var eventId = "";
var eventDate = "";
var initIdx = -1;
$("#GalaxyEventNameDdl").show();
$("#GalaxyEventIdDdl").show();
$("#GalaxyEventDatesDdl").show();
switch (selectedTypeOfEvent) {
case "NA":
$scope.getEventNames(false, initIdx, eventTypeId);
$scope.GalaxyEventIdsAndDates = $scope.initial;
$scope.GalaxyEventDates = $scope.initial;
$("#GalaxyEventNameDdl").hide();
$("#GalaxyEventIdDdl").hide();
$("#GalaxyEventDatesDdl").hide();
break;
case "RepeatingTimedEvent":
//$scope.getEventNames(false, initIdx, eventTypeId);
eventName = $scope.selectedGalaxyEventName != null
? $scope.selectedGalaxyEventName.EventName
: "";
$scope.GalaxyEventIdsAndDates = $scope.initial;
$scope.GalaxyEventDates = $scope.initial;
$("#GalaxyEventIdDdl").hide();
$("#GalaxyEventDatesDdl").hide();
break;
case "RepeatSingleDayEvent":
//$scope.getEventNames(false, initIdx, eventTypeId);
eventName = $scope.selectedGalaxyEventName != null
? $scope.selectedGalaxyEventName.EventName
: "";
$scope.getEventDatesOnly(false, initIdx, eventName);
eventDate = $scope.selectedGalaxyEventDates != null
? $scope.selectedGalaxyEventDates.EventDate
: "";
$scope.GalaxyEventIdsAndDates = $scope.initial;
$("#GalaxyEventIdDdl").hide();
break;
case "SingleTimedEvent":
//$scope.getEventNames(false, initIdx, eventTypeId);
eventName = $scope.selectedGalaxyEventName != null
? $scope.selectedGalaxyEventName.EventName
: "";
$scope.getEventIdsAndDates(false, initIdx, eventName);
eventId = $scope.selectedGalaxyEventId != null
? $scope.selectedGalaxyEventId.EventId
: "";
eventDate = $scope.selectedGalaxyEventDates != null
? $scope.selectedGalaxyEventDates.EventDate
: "";
$scope.GalaxyEventDates = $scope.initial;
$("#GalaxyEventDatesDdl").hide();
break;
}
$scope.updateModelValue(
typeOfEvent,
eventTypeId,
eventName,
eventId,
eventDate
);
};
$scope.eventTypeIDSelected = function (selectedEventTypeId) {
console.log("Event Type ID selected");
//triggered when EventTypeId dropdown is changed. update the datatype value & provide names in name dropdown
var initIdx = -1;
$scope.getEventNames(false, initIdx, selectedEventTypeId.EventTypeId);
$scope.GalaxyEventIdsAndDates = $scope.initial;// NOT WORKING TO WIPE THE LIST...WHY?
$scope.GalaxyEventDates = $scope.initial; // NOT WORKING TO WIPE THE LIST...WHY?
$scope.updateModelValue(
$scope.selectedTypeOfEvent,
selectedEventTypeId.EventTypeId,
"",
"",
"");
};
$scope.eventNameSelected = function (selectedName) {
//triggered when eventName dropdown is changed. update the datatype value & provide dates and ids in dropdowns
var initIdx = -1;
$scope.getEventIdsAndDates(false, initIdx, selectedName.EventName);
$scope.getEventDatesOnly(false, initIdx, selectedName.EventName);
$scope.updateModelValue(
$scope.selectedTypeOfEvent,
$scope.selectedGalaxyEventTypeId.EventTypeId,
selectedName.EventName,
"",
"");
};
$scope.eventIdSelected = function (selectedEventId) {
//triggered when eventId dropdown is changed. update the datatype value & init date dropdown
var initIdx = -1;
$scope.getEventDatesOnly(false, initIdx, $scope.selectedGalaxyEventName.EventName);
$scope.updateModelValue(
$scope.selectedTypeOfEvent,
$scope.selectedGalaxyEventTypeId.EventTypeId,
$scope.selectedGalaxyEventName.EventName,
selectedEventId.EventId,
selectedEventId.EventDate);
};
$scope.eventDatesSelected = function (selectedEventDate) {
//triggered when eventDate dropdown is changed. update the datatype value & init Id dropdown
var initIdx = -1;
$scope.getEventIdsAndDates(false, initIdx, $scope.selectedGalaxyEventName.EventName);
$scope.updateModelValue(
$scope.selectedTypeOfEvent,
$scope.selectedGalaxyEventTypeId.EventTypeId,
$scope.selectedGalaxyEventName.EventName,
"",
selectedEventDate.EventDate);
};
$scope.getEventTypeIds = function (initVal, idx) {
GalaxyEventSelectorResource.getEventIds().then(function (eventTypeIds) {
$scope.GalaxyEventTypes = eventTypeIds.data;
console.log("successfully retrieved galaxyeventids");
//console.log("Event Type IDs:", eventTypeIds.data[0]);
if (initVal) {
$scope.GalaxyEventTypes.some(function (x, i) {
if (x.EventTypeId == $scope.previousSelectedEventTypeId) {
idx = i;
return true;
}
});
}
$scope.selectedGalaxyEventTypeId = $scope.GalaxyEventTypes[idx];
},
function (data) {
console.log("failed to retrieve galaxyeventids");
});
};
$scope.getEventNames = function (initVal, idx, eventTypeId) {
GalaxyEventSelectorResource.getEventNamesByEventId(eventTypeId).then(function (eventNames) {
$scope.GalaxyEventNames = eventNames.data;
console.log("successfully retrieved galaxyeventnames");
if (initVal) {
$scope.GalaxyEventNames.some(function (x, i) {
if (x.EventName == $scope.previousSelectedEventName) {
idx = i;
return true;
}
});
}
$scope.selectedGalaxyEventName = $scope.GalaxyEventNames[idx];
},
function (data) {
console.log("failed to retrieve galaxyeventnames");
});
};
$scope.getEventIdsAndDates = function(initVal, idx, eventName) {
GalaxyEventSelectorResource.getEventIdsAndDatesByEventName(eventName).then(function (eventIds) {
$scope.GalaxyEventIdsAndDates = eventIds.data;
console.log("successfully retrieved galaxyIdsanddates");
if (initVal) {
$scope.GalaxyEventIdsAndDates.some(function(x, i) {
if (x.EventId == $scope.previousSelectedEventId) {
idx = i;
return true;
}
});
}
$scope.selectedGalaxyEventId = $scope.GalaxyEventIdsAndDates[idx];
},
function(data) {
console.log("failed to retrieve galaxyIdsanddates");
});
};
$scope.getEventDatesOnly = function (initVal, idx, eventName) {
GalaxyEventSelectorResource.getEventDatesByEventName(eventName).then(function (eventDates) {
$scope.GalaxyEventDates = eventDates.data;
console.log("successfully retrieved galaxydates");
if (initVal) {
$scope.GalaxyEventDates.some(function (x, i) {
if (x.EventDate == $scope.previousSelectedEventDate) {
idx = i;
return true;
}
});
}
$scope.selectedGalaxyEventDates = $scope.GalaxyEventDates[idx];
},
function (data) {
console.log("failed to retrieve galaxydates");
});
};
EventSelector.html
<div ng-controller="Our.GalaxyEventSelectorController">
<h5>Select Type of Event</h5>
<!--<div>-->
<div ng-repeat="n in ETypeRadio">
<!-- need to use ng-click as an ng-change on an ng-repeat element does not work -->
<!-- <input type="radio" ng-model="selectedTypeOfEvent" name="tOfE" ng-click="typeOfEventRadioSelected(selectedTypeOfEvent)" ng-value="{{n}}" value="{{n}}" />{{n}}-->
<input type="radio" ng-model="selectedTypeOfEvent" name="tOfE" ng-click="typeOfEventRadioSelected(selectedTypeOfEvent)" ng-value="{{n}}" value="{{n}}" />{{n}}
</div>
<!--</div>-->
<h5>Galaxy Event Type</h5>
<select ng-model="selectedGalaxyEventTypeId" ng-change="eventTypeIDSelected(selectedGalaxyEventTypeId)" ng-options="eventType.EventTypeId + ' - ' + eventType.EventTypeIdDescription for eventType in GalaxyEventTypes track by eventType.EventTypeId"></select>
<br/>
<div id="GalaxyEventNameDdl">
<h5>Galaxy Event Name</h5>
<select ng-model="selectedGalaxyEventName" ng-change="eventNameSelected(selectedGalaxyEventName)" ng-options="name.EventName for name in GalaxyEventNames">
<option value=""> --- Select Event Name ---</option>
</select>
<br />
</div>
<div id="GalaxyEventIdDdl">
<h5>Galaxy Event Id</h5>
<select data-ng-model="selectedGalaxyEventId" ng-change="eventIdSelected(selectedGalaxyEventId)" ng-options="id.EventId + ' - ' + id.EventDate for id in GalaxyEventIdsAndDates track by id.EventId">
<option value=""></option>
</select>
<br />
</div>
<div id="GalaxyEventDatesDdl">
<h5>Galaxy Event Date</h5>
<select data-ng-model="selectedGalaxyEventDates" ng-change="eventDatesSelected(selectedGalaxyEventDates)" ng-options="date.EventDate for date in GalaxyEventDates">
<option value=""></option>
</select>
</div>
We have a .resource.js but this is just performing gets to load our original data from our service.
angular.module("umbraco.resources").factory("GalaxyEventSelectorResource", function ($http) {
var galaxyEventService = {};
galaxyEventService.getEventIds = function () {
return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetAllEventTypeIDs");
};
galaxyEventService.getEventById = function (id, propertyType) {
return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventById?id=" + id + "&propertyType=" + propertyType);
};
galaxyEventService.getEventNamesByEventId = function(eventId) {
return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventNamesByEventId?eventId=" + eventId);
};
galaxyEventService.getEventIdsAndDatesByEventName = function(eventName) {
return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventIdsAndDatesByEventName?eventName=" + eventName);
};
galaxyEventService.getEventDatesByEventName = function(eventName) {
return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventDatesByEventName?eventName=" + eventName);
};