I have a panel which shows a progress of a certain task with a trace of the log.
I want to change the color of that panel from gray(current) to green when the log prints a certain line.
The log is also present in the view so I could do all this in the view with razor sharp, but how so ?
This is the view :
<input type="checkbox" id="reveal-email" role="button">
<div class="alert alert-dark" role="alert" style="width:50%;margin-left:375px;font-family:'Advent Pro', sans-serif;">
<div class="row">
<div class="col-3">
<strong> Export processing...</strong><br />
</div>
<div class="col-3">
<div class="loader"></div>
</div>
<div class="col-3" style="padding-left:300px">
<label for="reveal-email" class="btn">
<i class="icon ion-ios-toggle" style="color:rgb(49,52,55);"></i>
Log
</label>
</div>
</div>
</div>
<!-- THIS IS THE LOGGING PART !-->
<div id="email" class="alert alert-warning" role="alert" style="width:50%;margin-left:375px;font-family:'Advent Pro', sans-serif;">
<p> Log Started at #DateTime.Now </p>
<ul style="color:#222;font-style:oblique" id="messagesList"></ul>
</div>
Basically the ul in the logging div appends the log each time the server detects a new line (in the backend)...One of the lines is :
Log :
Job "TN_LR_DEV1"."SYS_EXPORT_SCHEMA_05" successfully completed at Sun May 10 17:58:24 2020 elapsed 0 00:01:23
Which basically means that the task is completed..only then I want to remove the first div (panel) and add another panel below everything with a green color(or show it if it's marked as hidden)
You can use Jquery to hide/show the element . For example , you can add another div and set background to green :
<div id="completedDiv" style="display:none;background:aquamarine;">
</div>
And in your js function that getting log from server side , you can check the log and show/hide related div using JQuery/Javascript :
let log = 'Log : Job "TN_LR_DEV1"."SYS_EXPORT_SCHEMA_05" successfully completed at Sun May 10 17:58:24 2020 elapsed 0 00:01:23';
if (log.indexOf("successfully completed") >= 0) {
$("#completedDiv").show();
}
Solved the issue with checking if a certain string exists in the new log line appended to the view, if boolean is true then :
document.getElementById("succ").style.display = "block";
with succ being the panel showing a success message and by default its display is set to none.
Related
In my homepage I have a search bar and a list of user favorite cards. Only If there is no favorited cards on the initial browser load and when a user removed all their favorite cards then it'll show a banner "Add a favorite...".
The problem I have right now is the banner is displaying when I search something on the search-bar and found no favorited card. How do I fix that?. I don't want to show my banner if there is no search result found.
If I do favorites.size == 0 instead then the banner is not showing up at all when browser load or user removed all their cards.
<div class="input">
<form class="search-form">
<input #searchValue id="input-field" class="input-field" type="search"
name="insightSearchFilter" (ngModelChange)="filterChanged($event)" [formControl]="inputCtrl"/>
<p class="hint" *ngIf="inputCtrl.value">
<strong> {{ favorites?.length }} Search Result for </strong><em>"{{ inputCtrl?.value }}".</em>
<strong> The Results listed below are exact matches for your query.</strong>
</p>
</form>
</div>
<div *ngIf="favorites">
<div *ngIf="favorites.length > 0">
<app-card-list [cards]="favorites"></app-card-list>
</div>
<div *ngIf="favorites.length == 0" class="empty-faves-container">
<div class="add-faves-container">
<div class="add-faves-ico"></div>
<div class="text">Add a Favorite</div>
</div>
</div>
</div>
Since you are filtering this.favorites in filterChanged methods. You should apply check for search text also along with length check.
like
(favorites.length == 0 && !(inputCtrl.value))
First off, I have images (switches), which have names (K1,K2,K3,..). I'd like to attach the displayed name K1, to the respective (displayed) switch, just like it is illustrated in the picture below.
Here is the code I'm currently using:
<div id="app">
<fieldset style="background-color: rgb(181, 207, 209);">
<h1>simTest server</h1>
<hr>
<div class="circuitplan">
<div v-for="(val, key, index) in switchObj" v-bind:key="key">
<div>
<span class="switch" v-bind:class="{ closed: val==='closed', opened: val==='opened', K1: key==='K1', K2: key==='K2', K3: key==='K3', K4: key==='K4', K5: key==='K5'}" #click="onSwitchClick(key)"></span>
</div>
</div>
</div>
</fieldset>
What I tried before was that I put the name of the switches a.k.a. "{{ key }}" here:
<span class="switch" v-bind:class="{ closed: val==='closed', opened: val==='opened', K1: key==='K1', K2: key==='K2', K3: key==='K3', K4: key==='K4', K5: key==='K5'}" #click="onSwitchClick(key)">{{ key }}</span>
All names of the available switches were displayed, but chaotically. Another thing I tried was to use :hover to display the switches when hovering over them, as a (gotta admit bad) workaround.
Anyone having a good idea how to implement this 'feature'? Thx in advance!
Good Morning,
Hope everyone had a great Easter,
Before I begin, I want to point out this is being developed in ServiceNow Orlando release, it uses AngularJS 1.6.10
I'm stuck on a tricky piece of code I can't get right, I'm using an ng-repeat to build out a catalog of hardware devices, in this case its Laptops, we have added a button which quickly allows people to add the device to the cart, we now want to add a quantity field so that multiple devices can be added at the same time, I got it working but AngularJS adds in an empty cell at the beginning, I need to get it to default to 1, I did get it to do this but it broke the cart experience as every item added to the cart is a 1 no matter what quantity is selected.
so this is most of the html code which also includes the ng-repeat that builds out the hardware devices, I am using an ng-options that everyone seems to recommend, been reading a lot in Stack Overflow.
The problem is the ng-model, as this is set to $scope.items[0] it never gets updated, I have been looking at getterSetter but very much going over my head at the moment, can't get it to work.
<div class="col-sm-6 col-md-4 funky-show-hide" ng-show="selectedCat==item.categoryBelongTo" ng-repeat="item in data.items track by $index">
<div class="panel panel- b" >
<a target="" ng-href="" ng-click="onClick($event, item)" class="panel-body block">
<div class="overflow-100">
<h4 class="m-t-none m-b-xs hrline"><span ng-if="item.content_type == 'external'"> <i ng-if="data.isDownloadable.indexOf(item.sys_id) ==-1" class="fa fa-external-link-square" aria-hidden="true" style="color: #498fcc;"></i><i ng-if="data.isDownloadable.indexOf(item.sys_id) >-1" class="fa fa-download" aria-hidden="true" style="color: #498fcc;"></i></span></h4>
<img ng-src="" ng-if="item.picture" class="m-r-sm m-b-sm item-image pull-left" />
<div class="text-muted item-short-desc"></div>
</div>
</a>
<div class="panel-footer" >
<span ng-if="item.u_show_price == 'true'" class="pull-right item-price font-bold"></span>
<button ng-if="item.u_show_add_to_cart_button == 'true' " name="submit" ng-disabled="submitted" ng-click="triggerAddToCart(item.sys_id, selected.label)" class="btn btn-primary">${Add to Cart}</button>
<select ng-if="item.u_show_quantity_button == 'true'"
name="Quantity"
id="quantity"
ng-disabled="submitted"
ng-model="selected"
class="form-control quantity-selector"
data-toggle="tooltip"
tooltip-top="true"
data-original-title="${Quantity}"
ng-options="item as item.label for item in items track by item.id">
</select>
</div>
</div>
</div>
Controller:
$scope.items = [{
id: 1,
label: '1'
}, {
id: 2,
label: '2'
}, {
id: 3,
label: '3'
}];
$scope.selected = $scope.items[0];
What it all looks like:
So I have selected "3" on the Performance PC Laptop but if you look at the console log on the right, you can see the value added is 1.
Picture to display value added to cart
Shame really, I was happy with the empty cell but its what the client would like, I know I can update the empty cell with some text but they would really like it to default to 1.
Any suggests and I would be grateful,
Bored Panda
Replacing the ng-if with ng-show resolved my problem, days lost trying to figure this out, also developed a simpler solution with number increment
Code Here:
<input type="number" value="1" min="1" max="20" step="1" ng-model="items_increment" title="Quantity" ng-show="item.u_show_quantity_button == 'true'"/>
$scope.items_increment = 1;
Hope it helps another person.
I have a component that show/hide element by clicking a button.
This is my html
<div *ngFor="let history of histories | sortdate: '-dateModified'">
<p><b>{{ history.remarks }}</b> - <i>{{history.dateModified | date:'short'}}</i></p>
<a href="google.com"
[class.datatable-icon-right]="history.$$expanded"
[class.datatable-icon-down]="!history.$$expanded"
title="Expand/Collapse Row"
(click)="toggleExpandRow(history)"></a>
<!-- hide/show this by clicking the button above.-->
<div *ngFor="let step of history.steps; let i = index">
<b>{{i+1}}.</b> {{step}}
<span class="clear"></span>
</div>
<hr />
</div>
and my .ts
toggleExpandRow(row) {
console.log('Toggled Expand Row!', row);
//row
return false;
}
trying to search but, can't find any same sample.
On jquery, I can do this, but on Angular2, I am having hard time to figure this.
There are two options:
1- You can use the hidden directive to show or hide any element
<div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
2- You can use the ngIf control directive to add or remove the element. This is different of the hidden directive because it does not show / hide the element, but it add / remove from the DOM. You can loose unsaved data of the element. It can be the better choice for an edit component that is cancelled.
<div *ngIf="edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
Use the ngIf in your repeated rows. Create a boolean property called showStep to indicate whether the row should be expanded or not.
<div *ngFor="let step of history.steps; let i = index" ngIf="history.showStep">
<b>{{i+1}}.</b> {{step}}
<span class="clear"></span>
</div>
Then, in your .ts file:
toggleExpandRow(history) {
history.showStep = !history.showStep
//note the same porperty of showStep that is used in your html
}
Extra:
In fact, to save a few lines of codes, you don't even need the toggleExpandRow function at all. You can do it inline in your html:
//other attributes omitted for brevity
<a (click)="history.showStep = !history.showStep">
I have this code that is getting data from a cell in a table
<div class="p-s-header">TITLE</div>
<div class="p-content">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<span di="76" ></span><br />
<span di="77" ></span><br />
</div>
</div>
</div>
This is producing:
TITLE
(data in cell 76)
(DATA in cell 77)
Now, data in cell 77 is a a link that is too long for the space, so I want to add the work "Click here" (hyperlinked) instead of showing the link.
So I wanted to change code, so output looks like:
TITLE
(data in cell 76)
Click here
"Click here" shoudl be built with the data in cell 77. I didn't code this but it seems the code to get the data from that cell is:
How would I build it?
I tried a few options, but nothing seems to work:
For example something like this:
<a href=<span di="77" ></span>Link</a><br />
thanks for your help
Try this, I hope this will encourage you on studying further how HTML and JS work together. (PHP is too advanced right now).
Change your code for this:
<div class="p-s-header">TITLE</div>
<div class="p-content">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<span id="cell76" ></span><br />
<span id="cell77" >http://www.google.com</span><br />
</div>
</div>
</div>
The attribute di doesn't exist, it is id and id's cannot start with numbers or be numbers
At the bottom of the code that you added write the following:
<script>
var link = document.getElementById('cell77').innerHTML;
document.write(''+link+'');
</script>
Here is the jsfiddle
https://jsfiddle.net/cz1Ltw3x/1/