Develop Reference

Angular 6 timer issue

I have a view which polls an endpoint every 30 seconds and updates if there are changes. In the same view I have a div which is shown/hidden every 7 seconds. The timers are started at the same time.
The first few times it runs, it runs perfectly. It's not until the first 30s timer polls again that it basically starts flickering back and forward every 2 seconds - which it shouldn't.
component.ts
getScreen(tapCode) {
timer(0, 30000)
.pipe(mergeMap(() => this.dataService.get_screen(tapCode)))
.subscribe(objectResp => {
this.callResp = objectResp.status;
this.polledObj = objectResp.items;
this.landing = false;
this.loaded = true;
this.unavailable = objectResp.items.unavailable;
localStorage.setItem('ontapCode', tapCode);
this.getAds(this.polledObj);
});
}
getAds(polledObj) {
this.showAd = false;
this.adTimer = timer(0, 7000);
this.adSubscription = this.adTimer.subscribe(() => {
if(this.timerCount >= this.polledObj.adverts.length) {
this.timerCount = 0;
}
if(this.timerCount <= this.polledObj.adverts.length) {
this.adImage = this.polledObj.adverts[this.timerCount].filename;
this.timerCount++;
}
this.showAd = !this.showAd;
});
}
component.html
<div *ngIf="callResp === 'OK'" class="tap">
<div *ngIf="unavailable === '1' || unavailable === 1" class="object-unavailable">
<img src="./assets/unavailable.png" class="unavailable-img">
</div>
<div *ngIf="unavailable === '0' || unavailable === 0">
<img src={{polledObj.img}} class="img-object">
<div class="container">
<div *ngIf="showAd === true">
<div class="advertisement">
<img src={{adImage}}" class="img-ad">
</div>
</div>
<div *ngIf="showAd === false">
<div class="object-detail-container">
<h3 (click)="resetStorage()" class="object-name text-white">{{polledObj.object_name}}</h3>
<h4 class="text-white object-brewery">{{polledObj.brewery}}</h4>
<h4 class="text-white object-style">{{polledObj.style}} - {{polledObj.abv}}%</h4>
<div class="object-sizes" *ngFor="let size of polledObj.sizes">
<span class="object-size-name">{{size.name}}: </span>
<span class="object-size-volume"> {{size.volume*1000}}ml </span>
<span class="object-size-price"> ${{getPrice(size.price)}} </span>
<span class="object-size-std"> {{getSizeStd(size)}} </span>
<span class="object-size-std-drinks"> std drinks</span>
</div>
</div>
</div>
</div>
</div>

HTML5 Audioplayer not working

I am trying to make this audio player work from wayback machine with absolutely no luck after almost three hours messing with it.
Here's the Javascript for the audio player I think.
mejs.mepIndex = 0, mejs.players = {}, mejs.MediaElementPlayer = function(b, c) {
return this instanceof mejs.MediaElementPlayer ? (this.$media = this.$node = a(b), this.node = this.media = this.$media[0], "undefined" != typeof this.node.player ? this.node
.player : (this.node.player = this, "undefined" == typeof c && (c = this.$node.data("mejsoptions")), this.options = a.extend({}, mejs.MepDefaults, c), this.id =
"mep_" + mejs.mepIndex++, mejs.players[this.id] = this, this.init(), this)) : new mejs.MediaElementPlayer(b, c)
}, mejs.MediaElementPlayer.prototype = {
hasFocus: !1,
controlsAreVisible: !0,
init: function() {
var b = this,
c = mejs.MediaFeatures,
d = a.extend(!0, {}, b.options, {
success: function(a, c) {
b.meReady(a, c)
},
error: function(a) {
b.handleError(a)
}
}),
e = b.media.tagName.toLowerCase();
b.isDynamic = "audio" !== e && "video" !== e, b.isVideo = b.isDynamic ? b.options.isVideo : "audio" !== e && b.options.isVideo, c.isiPad && b.options.iPadUseNativeControls ||
c.isiPhone && b.options.iPhoneUseNativeControls ? (b.$media.attr("controls", "controls"), c.isiPad && null !== b.media.getAttribute("autoplay") && b.play()) :
c.isAndroid && b.options.AndroidUseNativeControls || (b.$media.removeAttr("controls"), b.container = a('<div id="' + b.id + '" class="mejs-container ' + (mejs.MediaFeatures
.svg ? "svg" : "no-svg") +
'"><div class="mejs-inner"><div class="mejs-mediaelement"></div><div class="mejs-layers"></div><div class="mejs-controls"></div><div class="mejs-clear"></div></div></div>'
).addClass(b.$media[0].className).insertBefore(b.$media), b.container.addClass((c.isAndroid ? "mejs-android " : "") + (c.isiOS ? "mejs-ios " : "") + (c.isiPad ?
"mejs-ipad " : "") + (c.isiPhone ? "mejs-iphone " : "") + (b.isVideo ? "mejs-video " : "mejs-audio ")), c.isiOS ? (c = b.$media.clone(), b.container.find(
".mejs-mediaelement").append(c), b.$media.remove(), b.$node = b.$media = c, b.node = b.media = c[0]) : b.container.find(".mejs-mediaelement").append(b.$media),
b.controls = b.container.find(".mejs-controls"), b.layers = b.container.find(".mejs-layers"), c = b.isVideo ? "video" : "audio", e = c.substring(0, 1).toUpperCase() +
c.substring(1), b.width = b.options[c + "Width"] > 0 || b.options[c + "Width"].toString().indexOf("%") > -1 ? b.options[c + "Width"] : "" !== b.media.style
.width && null !== b.media.style.width ? b.media.style.width : null !== b.media.getAttribute("width") ? b.$media.attr("width") : b.options["default" + e +
"Width"], b.height = b.options[c + "Height"] > 0 || b.options[c + "Height"].toString().indexOf("%") > -1 ? b.options[c + "Height"] : "" !== b.media.style
.height && null !== b.media.style.height ? b.media.style.height : null !== b.$media[0].getAttribute("height") ? b.$media.attr("height") : b.options[
"default" + e + "Height"], b.setPlayerSize(b.width, b.height), d.pluginWidth = b.width, d.pluginHeight = b.height), mejs.MediaElement(b.$media[0], d),
"undefined" != typeof b.container && b.controlsAreVisible && b.container.trigger("controlsshown")
},
Here's the HTML Code for the audio player, I've tried literally every single combination with javascript that I can think of to get this working.
<section class="section with-player">
<header>
<h1>Now Playing: <span id="playerInfo">SONG NAME</span></h1>
</header><span data-next="javascript: void()" data-prev="javascript: void()" id="links"></span>
<div id="fromAlbum">
<div class="mejs-container svg mejs-audio" id="mep_0" style="width: 100%; height: 50px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<audio id="mejs" preload="none" src=""></audio>
</div>
<div class="mejs-layers">
<div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 50px;"></div>
</div>
<div class="mejs-controls">
<div class="mejs-time-rail" style="width: 2px;">
<span class="mejs-time-total" style="width: 1px;"><span class="mejs-time-buffering" style="display: none;"></span><span class=
"mejs-time-loaded"></span><span class="mejs-time-current"></span><span class="mejs-time-handle"></span><span class="mejs-time-float"><span class=
"mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span></span>
</div>
<div class="mejs-button mejs-prevtrack hide-for-small">
<a class="" href="javascript:%20void()"><i class="glyphicon glyphicon-backward"></i></a>
</div>
<div class="mejs-button mejs-playpause-button mejs-play">
<button aria-controls="mep_0" aria-label="Play/Pause" class="btn btn-link" title="Play/Pause" type="button"><i class=
"glyphicon glyphicon-play"></i></button>
</div>
<div class="mejs-button mejs-nexttrack hide-for-small">
<a class="" href="javascript:%20void()"><i class="glyphicon glyphicon-forward"></i></a>
</div>
<div class="mejs-button mejs-volume-button mejs-mute">
<button aria-controls="mep_0" aria-label="Mute Toggle" title="Mute Toggle" type="button"></button>
</div>
<div class="mejs-horizontal-volume-slider mejs-mute">
<div class="mejs-horizontal-volume-total"></div>
<div class="mejs-horizontal-volume-current" style="width: 29px;"></div>
<div class="mejs-horizontal-volume-handle" style="left: 23px;"></div>
</div>
<div class="mejs-time">
<span class="mejs-currenttime">00:00</span> <span>/</span> <span class="mejs-duration">00:00</span>
</div>
</div>
<div class="mejs-clear"></div>
</div>
</div>
</div>
<div class="mejs-list">
<ol>
<li>
<span>TTG (feat. Kevin Gates)</span> <a class="btn btn-dark btn-xs" href=
"https://web.archive.org/web/20161017173851/http://www.albumkings.com/albums/71500-woptober-by-gucci-mane/intro-fuck-12"><i class=
"glyphicon glyphicon-download-alt"></i> download</a> <a class="btn btn-dark btn-xs tracklist-play" data-file="http://filecandy.net/mp3embed-t7yjo5m8jey6.mp3" href=
"<?php the_permalink(); ?>#"><i class="glyphicon glyphicon-play"></i> play</a>
</li>
<li>
<span>I Am Who They Say I Am (feat. Kevin Gates and Quando Rondo)</span> <a class="btn btn-dark btn-xs" href=
"https://web.archive.org/web/20161017173851/http://www.albumkings.com/albums/71500-woptober-by-gucci-mane/aggressive"><i class=
"glyphicon glyphicon-download-alt"></i> download</a> <a class="btn btn-dark btn-xs tracklist-play" data-file="http://filecandy.net/mp3embed-v8sfz29sx5du.mp3" href=
"<?php the_permalink(); ?>#"><i class="glyphicon glyphicon-play"></i> play</a>
</ol>
</div>
</section>
Link to the Wayback Machine.
I've added working file links to the above loop, but I can't get the top portion to display the current playing song from just copying the code from wayback. The file which contains the javascript is all.min.js

Group same strings in array and count them

This is an Angular project and I have data that comes from the server. I am creating three lists. I have three types of sentiment and each sentiment has a description
for (const sentiment of this.dataSource.allFavourabilities) {
if (sentiment.sentiment === 'Positive') {
this.positiveList.push(sentiment);
}
if (sentiment.sentiment === 'Negative') {
this.negativeList.push(sentiment);
}
if (sentiment.sentiment === 'Neutral') {
this.neutralList.push(sentiment);
}
}
This is how it looks like when I console.log that.
coverageId:137
description:"Positive"
id:119
sentiment:"Positive"
In HTML I am listing this in three divs and the only constant is sentiment which is displayed as an icon, the description can be different. But client mainly types positive, negative or neutral so I get an ugly list with same data. I want to filter that so it is a matching string in the description and I have positive in the description like 50 times, in my HTML it should say
Preferred outcome:
positive(50)
negative(2)
neutral
and not
positive
positive
positive
positive etc.
negative
negative
neutral
This is my HTML:
<div class="form-item favourability-wrapper flex">
<div class="column" *ngIf="positiveList">
<div class="sentiment-label">Positive</div>
<ng-container *ngFor="let a of positiveList">
<div class="sentiment sentiment-positive ">
<i class="fas fa-smile"></i>
<div class="description">{{ a.description }}</div>
</div>
</ng-container>
</div>
<div class="column" *ngIf="negativeList">
<div class="sentiment-label">Negative</div>
<ng-container *ngFor="let b of negativeList">
<div class="sentiment sentiment-neutral">
<i class="fas fa-meh"></i>
<div class="description">{{ b.description }}</div>
</div>
</ng-container>
</div>
<div class="column" *ngIf="neutralList">
<div class="sentiment-label">Neutral</div>
<ng-container *ngFor="let c of neutralList">
<div class="sentiment sentiment-negative">
<i class="fas fa-frown"></i>
<div class="description">{{ c.description }}</div>
</div>
</ng-container>
</div>
</div>

Change this to a html element that shows the length
<ng-container *ngFor="let a of positiveList">
<div class="sentiment sentiment-positive ">
<i class="fas fa-smile"></i>
<div class="description">{{ a.description }}</div>
</div>
</ng-container>
to
<div *ngIf="positiveList">
{{ '(' + (positiveList?.length || '0')+')' }}
</div>

You can try this:
<div class="form-item favourability-wrapper flex">
<div class="column" *ngIf="positiveList">
<div class="sentiment-label">Positive</div>
<div class="sentiment sentiment-positive ">
<i class="fas fa-smile"></i>
<div class="description">({{ positiveList.length > 0 ? positiveList.length : '0' }})</div>
</div>
</div>
<div class="column" *ngIf="neutralList">
<div class="sentiment-label">Neutral</div>
<div class="sentiment sentiment-neutral">
<i class="fas fa-meh"></i>
<div class="description">({{ neutralList.length > 0 ? neutralList.length : '0' }})</div>
</div>
</div>
<div class="column" *ngIf="negativeList">
<div class="sentiment-label">Negative</div>
<div class="sentiment sentiment-negative">
<i class="fas fa-frown"></i>
<div class="description">({{ negativeList.length > 0 ? negativeList.length : '0' }})</div>
</div>
</div>
</div>

<div class="form-item favourability-wrapper flex">
<div class="column" *ngIf="positiveList">
<div class="sentiment-label">Positive{{ positiveList.length ? '(' + positiveList.length + ')' : '' }}</div>
</div>
<div class="column" *ngIf="negativeList">
<div class="sentiment-label">Negative{{ negativeList.length ? '(' + negativeList.length + ')' : '' }}</div>
</div>
<div class="column" *ngIf="neutralList">
<div class="sentiment-label">Neutral{{ neutralList.length ? '(' + neutralList.length + ')' : '' }}</div>
</div>
</div>
maybe this works for you, you can use Array.length to get the count.

Since you're asking for help, let me help you improve your code :
this.feelings = [
{ name: 'Positive', sentiments : [] },
{ name: 'Negative', sentiments : [] },
{ name: 'Neutral', sentiments : [] },
];
for (const sentiment of this.dataSource.allFavourabilities) {
if (sentiment.sentiment === 'Positive') {
this.feelings[0].sentiments.push(sentiment);
}
if (sentiment.sentiment === 'Negative') {
this.feelings[1].sentiments.push(sentiment);
}
if (sentiment.sentiment === 'Neutral') {
this.feelings[2].sentiments.push(sentiment);
}
}
<!-- I'll let you append the classes to your convenience -->
<div *ngFor="let feeling of feelings">
{{ feeling.name }} : {{ feeling.sentiments.length }}
</div>
See how the HTML got reduced ? We can even reduce the typescript further with this
this.feelings: { name: string, sentiments : any[] }[] = this.dataSource.allFavourabilities
.reduce((p, n) => {
if (!p.find(feeling => feeling.name === n.sentiment)) {
p.push({ name: n.sentiment, sentiments : []});
}
p.find(feeling => feeling.name === n.sentiment).sentiments.push(n);
return p;
}, []);

I can´t remove the last item of array

I can remove any item of array unless the last one. I also use angularjs to show information in the view. I don´t know what is happening with the last item of this array. Please, anyone can help me?
Here is HTML:
<div class="row">
<div class="col-md-12">
<h4><strong>Documento {{index + 1}} de {{documentos.length}}:</strong> {{documentos[index].nome}}</h4>
<iframe style="background: #ccc;" ng-show="exibirPreview" frameborder="0" ng-src="{{versaoLink}}" width="100%" height="300px"></iframe>
<div class="alert alert-warning" ng-hide="exibirPreview">
#Html.Raw(Resources.Dialog.SignDocuments.TypeDocumentCanNotPreDisplayed)
</div>
<hr />
<div class="pull-right btn-row" ng-show="documentos.length > 1">
<button class="btn btn-default" type="button" ng-click="RemoveDoc(index)"><i class="fa fa-fw fa-times"></i> #Resources.Common.RemoveDocList</button>
</div>
</div>
</div>
Here is js/angularjs
$scope.documentos = [
{nome:"document1", chave: "8F65579E3737706F", extensao:".pdf"},
{nome:"document2", chave: "8F65579E3730007F", extensao:".pdf"},
{nome:"document3", chave: "8545579E3737706F", extensao:".pdf"},
{nome:"document4", chave: "8555579E3730007F", extensao:".pdf"}
]
$scope.ViewLink = function () {
var versao = $scope.documentos[$scope.index];
$scope.exibirPreview = versao.extensao == ".pdf" || versao.extensao == ".txt";
if (!$scope.exibirPreview) {
$scope.versaoLink = '';
} else {
$scope.versaoLink = '/Documento/VersaoView?chave=' + versao.chave;
}
};
$scope.ViewLink();
$scope.RemoveDoc = function (index) {
$scope.documentos.splice(index, 1);
$scope.ViewLink();
};
Or Plunker

In your HTML you are preventing the deletion of the last element:
<div class="pull-right btn-row" ng-show="documentos.length > 1">
<!-- -->
</div>
documentos.length > 1 means "hide when it reaches one item in the array".
It should be documentos.length == 0.
It's either this or your index value starts from 1 and not from 0.

The simplest solution would be to change your remove function to take in the document instead of the index. Try this:
$scope.RemoveDoc = function(document) {
var index = $scope.documents.indexOf(document);
$scope.documents.splice(index, 1);
}
in view:
<button class="btn" type="button" ng-click="RemoveDoc(document)">Delete</button>

Can i also put a scope through the filter?

i made a taskfilter and i need to edit the tekst of the titel if another button is selected, i tried a scope but that doen't work do you guys know of mayby somethiing else if scope does not works?
the rule that i am talking about it $scope,infotitel, i tried also to put scope function in the filter above but that also does not work.
heres my filter code
$scope.infoTitel = 'completed'; ------------- i put this in every if statement because on click it filters out the tasks into done or not but the scope i want to use to show the tekst completted etcc in html
return function(values, taskCompleted) {
// filter
return values.filter(function(value){
if(taskCompleted === 1) {
$scope.infoTitel = 'completed';
return value.completed;
}
else if(taskCompleted === 2){
$scope.infoTitel = 'all';
return true;
}
else if(taskCompleted === 3){
$scope.infoTitel = 'deadline missed';
return value.dateExpired;
}
// initially don't filter
else if(!value.completed && !value.dateExpired){
$scope.infoTitel = 'to do';
return value;
}
//return $sce.trustAsHtml(output); voor als html verandert
});
};
this is the part where the buttons are
<div class="mini-nav">
<a class="clear-completed" ng-click="taskfilter = 3" ng-class="{'active' : taskfilter == 3}">
<span>deadline missed</span>.
</a>
<a class="clear-completed" ng-click="taskfilter = 2" ng-class="{'active' : taskfilter == 2}">
<span>show all </span>.
</a>
<a class="clear-completed" ng-click="taskfilter = 1" ng-class="{'active' : taskfilter == 1}">
<span>show completed</span>.
</a>
<a class="clear-completed" ng-click="taskfilter = 0" ng-class="{'active' : taskfilter == 0}" ng-init="">
<span>to do</span>.
</a>
</div>
this is the html, the first line is where i want to display it
li ng-repeat="todo in tasks | filterTask:taskfilter " ng-class="getCSSClass(todo)" ------------- the filterTask is the custom filter for wher i want to put the scope tekst in it so the first piece of code.
{{ infoTitel }} by family ----------- this is where i want the tekst
<h1>{{ infoTitel }} by family</h1>
<div id="main" style="display: block;">
<ul id="todo-list" class="unstyled">
<li ng-repeat="todo in tasks | filterTask:taskfilter " ng-class="getCSSClass(todo)" >
<div class="view" ng-keyup="editTodo()">
<input type="checkbox" ng-click="toggleTodo(todo)" class="check-done-{{todo.completed}}" ng-hide= "todo.dateExpired "/>
<span class="done-{{todo.completed}}">{{todo.task}} </span>
<p ng-show="todo.completed">completed by: {{ todo.completedBy.name }} </p>
<p ng-show="todo.completed">date completed : {{ todo.dateCompleted | date : "MMM d, y h:mm a" }}</p>
<p ng-hide="todo.completed" ng-if= " !todo.dateExpired ">task deadline : {{ todo.timeToDeadline || "no deadline" | date : "MMM d, y h:mm" }}</p>
<p ng-hide="todo.completed" ng-if= " todo.dateExpired ">deadline missed on {{ todo.dateExpiration | date : "MMM d, y h:mm a"}}</p>
<div class="bar-holder" ng-show="todo.percentage || todo.percentage == 0" ng-if="!todo.completed " >
<div class="bar" style="width: {{todo.percentage}}%;" ></div>
</div>
</div>
<input class="edit" type="text" ng-model="todo.text" ng-keyup="editOnEnter(todo)" />
</li>
</ul>

i found the problem i could just change the tekst within the buttons, added another click and added the tekst directly in there so it dsplays on the place of {{ infoTitel }} by family
<div class="mini-nav">
<a class="clear-completed" ng-click="taskfilter = 'missed'; infoTitel = 'Deadline missed'" ng-class="{'active' : taskfilter == 'missed'}">
<span>deadline missed</span>
</a>
<a class="clear-completed" ng-click="taskfilter = 'all'; infoTitel = 'All'" ng-class="{'active' : taskfilter == 'all'}">
<span>show all </span>
</a>
<a class="clear-completed" ng-click="taskfilter = 'completed'; infoTitel = 'Completed'" ng-class="{'active' : taskfilter == 'completed'}">
<span>show completed</span>
</a>
<a class="clear-completed" ng-click="taskfilter = 'todo'; infoTitel = 'To do'" ng-class="{'active' : taskfilter == 'todo'}" ng-init="">
<span>to do</span>
</a>
</div>
ps: changed the 3,2,1,0 filternames in to missed,all, completed and todo for better understanding of filter