Since I have migrated from SystemJS to Webpack(Angular CLI) as the module bundler, my custom google maps makers are not no longer showing but the default ones does, the following is my template:
<sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
<sebm-google-map-marker
*ngFor="let nearMovingAgent of nearMovingAgents"
[latitude]="nearMovingAgent.obj.location[1]"
[longitude]="nearMovingAgent.obj.location[0]"
[iconUrl]= "nearMovingAgent.obj.agent_type == 'moving_company'? iconPathMC:iconPathSS" >
<sebm-google-map-info-window>
<h5 class="modal-title" *ngIf="nearMovingAgent.obj.agent_type == 'moving_company'"><small>Moving Company</small></h5>
<h5 class="modal-title" *ngIf="nearMovingAgent.obj.agent_type == 'self_standing'"><small>Self Standing Bakkie/Truck Owner</small></h5>
<hr>
<p>{{nearMovingAgent.obj.address | capitalize }}</p>
<button class="btn view-details" data-toggle="modal" data-target="#myModal" (click)="viewMovingAgentDetail(nearMovingAgent)">View Details</button>
</sebm-google-map-info-window>
</sebm-google-map-marker>
</sebm-google-map>
When i remove the attribute:
[iconUrl]= "nearMovingAgent.obj.agent_type == 'moving_company'? iconPathMC:iconPathSS"
The default icons are shown
And I have the following in my component class:
iconPathMC: string = "../../../images/truck3.png";
iconPathSS: string = "../../../images/pickup.png";
I have tried moving the above statements into ngOnInit() but I still cannot not see the icons on the map even though it throws no errors.
My server (NodeJS, Express and nodemon) shows a status of 200 for request. of the images:
GET /images/truck3.png
GET /images/pickup.png
GET /images/truck3.png 200 19.230 ms - 1347
GET /images/pickup.png 200 20.781 ms - 1347
Do I have to hook into a different component life-cycle to have the icons displayed, can anyone give me an idea of what i am missing.
Thank you.
Well I have solved this by doing this in my component
declare var require: any;
markerIconUrl() {
return require('../../../images/truck3.png')
}
Then called the method 'markerIconUrl' in my template like
<sebm-google-map-marker
*ngFor="let nearMovingAgent of nearMovingAgents"
[iconUrl]="markerIconUrl()"
>
Albeit it solved the issue, I am still on research why it was an issue, it has to do with how Webpack works though.
Related
The data in the Vue.js array with JSON objects in it is mixed up after reloading them from Spring backend.
I am trying to make a frontend with Vue.js for editing the data on the Spring backend. Vue.js makes a call to the backend with axios, it returns a list of items that is rendered on the page with a v-for. The items can be edited separately, when the 'Save' button is clicked for an item, the item is sent to the backend and the data is updated in the database. After this, when I hit reload in the browser (or close and open the same page) the data is reloaded from the server but its mixed up.
loadExercises(){
axios({url:'http://localhost:5000/exercises/all'}).then(resp => {
this.exercises = resp.data;
})
}
This is the function that loads the data.
This is the array originally : https://imgur.com/5x8TiwY
This is the array after reload, I edited the first entry: https://imgur.com/d6G4SMm
The backend returns the correct objects, the only difference is the that
the entry which was edited is the last in the array (and it was the first in the example case before the edit). The id-s do not change during saving, just the details are updated, like name or description.
This is the part of the template that generates the html, just in case it is because something in there.
<div role="tablist" id="container" v-bind:key="ex.id" v-for="ex in exercises">
<b-card no-body class="mb-1 customcard">
<b-card-header header-tag="header" class="p-1 alignleft" role="tab" v-b-toggle="`accordion${ex.id}`">
<span>{{ex.name}}</span>
</b-card-header>
<b-collapse v-bind:id="`accordion${ex.id}`" accordion="my-accordion" role="tabpanel">
<b-card-body class = "alignleft">
<p class="card-text">
Name: <b-form-input
v-bind:value="`${ex.name}`"
v-bind:id="`input${ex.id}`"
v-on:input="saveExName(ex.id)"></b-form-input>
Target: {{ex.target}} <b-form-select v-on:input="onTargetChange(ex.id)"
v-bind:id="`target${ex.id}`" >
<option v-bind:key = "target" v-for="target in targets" :value="target" >{{target}}</option>
</b-form-select>
Description: <b-form-textarea
v-bind:value="`${ex.description}`"
:rows="3"
:max-rows="6"
v-on:input="saveExDesc(ex.id)"
v-bind:id="`textarea${ex.id}`"></b-form-textarea>
</p>
<div class="alignright">
<b-button v-on:click="saveExUpdate(ex.id)">Save</b-button>
</div>
</b-card-body>
</b-collapse>
</b-card>
</div>
Any ideas why this is happening?
theres my progress bar code:
<div class="col-sm-4" ng-repeat="var in payloadNbrMissionParStatut">
<h4 class="no-margin">{{var.number}}</h4>
<progressbar value={{tom}} class="progress-xs no-radius no-margin" type={{gg}} ng-if="var.des=='Clos' ? gg='danger' : var.des=='En cours'? gg='warning' :gg='info' " ></progressbar>
{{var.des}}
</div>
the problem is in the value: when i populate it with static data it works good, but when i populate wit data come from the controller it doesnt work.
var is a reserved JS keyword. As errors inside directive expressions are silent, you aren't seeing any alerts because it's simply being ignored. Change var to something else and it should work.
AngularJS: Alert Popup
<div class="modal-header">
<h3>
<span class="firefinder-match" data-ng-show="dialog.stopOrService === 'STOP'" data-translate-values="{"days":"ALL_DAYS","time":"2015-06-20T08:39:46.654Z","stopOrService":"STOP","stopName":"Fairbairn Av after War Memorial Service [3473]","serviceList":[{"serviceNumber":"910","id":"6350571294206984726","name":"910 City via Majura Business Park(Net14NoAir"}],"selectedService":null,"receiveSituations":false,"processing":false}" data-translate="liveDepartures.alerts.addModal.stopHeader">Add a regular alert for upcoming buses at Fairbairn Av after War Memorial Service [3473]</span>
<span class="firefinder-match ng-hide" data-ng-show="dialog.stopOrService === 'SERVICE'" data-translate-values="{"days":"ALL_DAYS","time":"2015-06-20T08:39:46.654Z","stopOrService":"STOP","stopName":"Fairbairn Av after War Memorial Service [3473]","serviceList":[{"serviceNumber":"910","id":"6350571294206984726","name":"910 City via Majura Business Park(Net14NoAir"}],"selectedService":null,"receiveSituations":false,"processing":false}" data-translate="liveDepartures.alerts.addModal.serviceHeader">Add a regular alert for route </span>
</h3>
</div>
Assertion: Using getText()
var pageHeader = element(by.css('.modal-header > h3 > span'))
expect(pageHeader.getText()).toContain('Add a regular alert');
pageHeader.getText().then(function(text){
console.log("++++++++++++++++++++++++++++++++++++++" +text);
});
Problem: Not able to get text from element
I have tried a number of ways to identify the 'Text' on model header but could not succeed in getting the text from the element. The problem looks like the element is not getting identified. Can someone please help me to resolve this issue.
As the error confirms, your selector is returning both spans within the .modal-header. You could try catching them both and specifying one (Note: I've not tested these):
var pageHeader = $$('.modal-header > h3 > span');
expect(pageHeader.get(0).getText()).toContain('Add a regular alert');
Or try another approach on the selector. Maybe try :not to return only the visible span:
var pageHeader = $('.modal-header span:not(.ng-hide)');
As the warning says, you have multiple elements (an array) found by the locator, so get(n) will be needed. you can wait until the getText() promise to resolve, and finally go for assert/expect.
var spansInPageHeader = element.all(by.css('.modal-header > h3 > span'));
spansInPageHeader.get(1).getText().then(function(text){
expect(text).toContain('Add a regular alert');
});
So wanted to have a spinning cube with pictures on, because that is what all the cool kids want. Then decided that I wanted to have it all in a database and use the mean stack, so set that up.
Here comes the problem. On the index.html version, the cube sometimes messes up and moves to the screen blocking everything else out. Just open the link below and click the menu a few different menu options a few time and you'll see what I mean.
http://v-ghost.port0.org:8081/TESTCube/public/index.html
Worked a long while trying to figure out what was wrong, and it turns out that it is related to how I load the menu, I tried to generate it using ng-bind-html.
<figure class="front"><div id="front-page" ng-bind-html="showpane('front')"></div></figure>
<figure class="back"><div id="front-page" ng-bind-html="showpane('back')"></div></figure>
<figure class="right"><div id="front-page" ng-bind-html="showpane('right')"></figure>
<figure class="left"><div id="front-page" ng-bind-html="showpane('left')"></figure>
<figure class="top"><div id="front-page" ng-bind-html="showpane('top')"></figure>
<figure class="bottom"><div id="front-page" ng-bind-html="showpane('bottom')"></figure>
Strangely, if I change this to just use text (i.e. less fancy way):
<button class="show-front">Front</button><br/>
<button class="show-back">Back</button><br/>
<button class="show-right">Right</button><br/>
<button class="show-left">Left</button><br/>
<button class="show-top">Top</button><br/>
<button class="show-bottom">Bottom</button><br/>
Try it on
http://v-ghost.port0.org:8081/TESTCube/public/index-nobind.html, unbreakable (famous last words).
What I can't understand is why, why does me calling a function in a button break the cubes path?
Also, is there an easier way to get the value of a string in an array then building a function to get it in a ng-bind?
Tried to make it as easy as possible to test around, should be just to copy the html if you want to give it a try.
After much fiddling about I never manage to figure out why ng-bind behaved like this. And without a error message it was pretty hard to identify the problem.
If you have the same problem, one way to get around it is to just change the controller to present the data under an object. So start by defining the controller as app
<body ng-app="DBFScube" ng-controller="AppCtrl as app">
Then call a sub function (getmenuname) for each option.
<button class="show-front">{{app.getmenuname('front')}}</button><br/>
<button class="show-back">{{app.getmenuname('back')}}</button><br/>
<button class="show-right">{{app.getmenuname('right')}}</button><br/>
<button class="show-left">{{app.getmenuname('left')}}</button><br/>
<button class="show-top">{{app.getmenuname('top')}}</button><br/>
<button class="show-bottom">{{app.getmenuname('bottom')}}</button>
The controller looks like this
var app = this;
//
//$http.get("http://localhost:3000").success(function(CubeSides){
// app.CubeSides = CubeSides;
//})
$http.get("http://localhost:3000").success(function(CubeSides){
$scope.sides=CubeSides;
console.log("Loading data");
})
app.getmenuname = function(side) {
if($scope.sides === undefined) {
console.log("Not loaded fside " + side );
} else {
console.log("Got menu pane " + $scope.sides);
var fside = $filter('filter')($scope.sides, function (d) {return d.side === side;})[0];
console.log("Sending: " + fside.menuname);
return fside.menuname;
}
}
This probably isn't the right way of doing it, but if all you need to do is set the name on some buttons, it does the trick:)
i`m busy on a music store web application with JAVA for back-end and Angular JS/HTML5/CSS3 for front-end.
ammm, and for music play back i used Sound Manager Java Script Library, all thing work fine with static 360 player, but when i try to use sound manager in ng-repeat directive, that not works, any suggestion please ? and is sound manager works with live dom elements created by angular js "ng-repeat" ?
Sound Manager Init
// init Sound Manager
soundManager.setup({
// path to directory containing SM2 SWF
url: 'player/'
});
threeSixtyPlayer.config.scaleFont = (navigator.userAgent.match(/msie/i)?false:true);
threeSixtyPlayer.config.showHMSTime = true;
// enable some spectrum stuffs
threeSixtyPlayer.config.useWaveformData = true;
threeSixtyPlayer.config.useEQData = true;
// enable this in SM2 as well, as needed
if (threeSixtyPlayer.config.useWaveformData) {
soundManager.flash9Options.useWaveformData = true;
}
if (threeSixtyPlayer.config.useEQData) {
soundManager.flash9Options.useEQData = true;
}
if (threeSixtyPlayer.config.usePeakData) {
soundManager.flash9Options.usePeakData = true;
}
if (threeSixtyPlayer.config.useWaveformData || threeSixtyPlayer.flash9Options.useEQData || threeSixtyPlayer.flash9Options.usePeakData) {
// even if HTML5 supports MP3, prefer flash so the visualization features can be used.
soundManager.preferFlash = true;
}
Angular ng-repeat
<div class="mod-contents">
<div class="questions-block" ng-repeat="question in filtered = ( questionList | filter:searchKey | orderBy : predicate : reverse)">
<div class="col-xs-12 col-sm-4 col-md-3 pull-right">
<div class="thumbnail block-black ">
<h3 class="block-title rtl-element">{{ question.description }}<span class="text-muted"> ({{ question.cat_code }}) </span></h3>
<div class="ui360 ui360-vis player-wrapper-md player-md "></div>
</div>
</div>
</div>
</div>
I was having the same problem. I think I know why it's happening. I believe in the javascript for sound manager it looks for instances of a sound manager player and doesn't find any. The ng-repeat section is not static; it can change. So when you load the page and the sound manager loads, the ng-repeat section does not yet contain any elements. Therefore sound manager decides not to add an event handler for checking if you click on the button.
I edited the mp3-player-button.js and in the init section I commented out where it said "if (foundItems>0)" so that it always adds the sound manager event handler.
This solution is a little hacky - so maybe you can implement something smarter. But it works for me. Hope it Helps!