I want to get numeric value of column rate and percentage with $ and % removed from text.
I have tried replace but it is not working.
HTML code is as below:
<tbody _ngcontent_1="">
<tr class="class-1" _ngcontent_1="">
<td class="label" _ngcontent_1="">xyz</td>
<td class="rate" _ngcontent_1="">$5.00</td>
<td class="percentage" _ngcontent_1="">12.00%</td>
</tr>
Something like this i believe:
let convertToFloat = (textToConvert)=> {
let cleared = textToConvert.replace("$", "").replace("%", "");
return parseFloat(cleared)
}
let ratevalue = $('.rate').getText().then(convertToFloat)
let percentagevalue = $('.percentage').getText().then(convertToFloat)
expect(ratevalue).toEqual(5.00)
expect(percentagevalue).toEqual(12.00)
Don't forget about promises.
Related
When building tables in Lit, sometimes I need to generate different parts of a table in different parts of the code. But when I put everything together, the table does not look the same as if it were declared all in one place.
See this playground for an example of the same table that's assembled two different ways. Is there any way I can make the "two halves" table look the same as the first, while still creating the elements in separate html`` blocks?
I tried creating a table in two different ways (see playground), I expected it to be the same resulting table in both instances. What actually happened is that they looked different, and I want to know why/how to correct this.
Lit does not do string concatenation and each html tag function results in a cached Template element which can be efficiently rendered. This means that each of your html tags get implicitly closed by the browser's HTML parser.
E.g.: html`<table>...` is parsed by the browser into: html`<table>...</table>`. From lit.dev documentation on "Well-formed HTML": https://lit.dev/docs/templates/expressions/#well-formed-html
Lit templates must be well-formed HTML. The templates are parsed by the browser's built-in HTML parser before any values are interpolated. Follow these rules for well-formed templates:
Templates should not contain unclosed elements—they will be closed by the HTML parser.
Therefore instead of the following structure:
// Does not work correctly - do not copy this. For demonstration purposes.
const start = html`<table>`;
const content = html`content`;
const end = html`</table>`;
const result = [start, content, end];
return html`${result}`;
// This would render as: <table></table>content<table></table>
Consider the following structure instead where each html tag function is well formed HTML:
const tableFrame = (content) => html`<table>${content}</table>`;
const content = html`content`;
// Pass the content template result into the table frame.
return tableFrame(content);
The following is your code from the playground example restructured in this way:
<script type="module">
import {LitElement, html, css} from "https://cdn.jsdelivr.net/gh/lit/dist#2/core/lit-core.min.js";
class TableExample extends LitElement {
static styles = css`table, th, td { border: 1px solid black; }`;
generateTables() {
const tables = [];
const tableRow1 = html`
<tr>
<td rowspan=2>0</td>
<td>1</td>
</tr>`;
const tableRow2 = html`
</tr>
<td>2</td>
</tr>`;
const table1 = html`
<table>
<tr>
<td rowspan=2>0</td>
<td>1</td>
</tr>
</tr>
<td>2</td>
</tr>
</table>
`;
const tableFrame = (content) => html`<table>${content}</table>`;
// Full table
tables.push(table1);
tables.push(html`<br />`);
// Use tableFrame with custom content.
tables.push(tableFrame(html`<tr><td>Custom Content</td></tr>`));
tables.push(html`<br />`);
// Use tableFrame with the two rows defined earlier.
tables.push(tableFrame([tableRow1, tableRow2]));
return tables;
}
render() {
return this.generateTables();
}
}
customElements.define('table-example', TableExample)
</script>
<table-example></table-example>
As an additional reference the documentation on Templates: https://lit.dev/docs/templates/expressions/#templates
I have created a progress bar which changes by adjusting the width. It looks like this:
Progress bar code:
<tr>
<td valign="top" class="textContent" style="background-color:#65b9a6;text- align:center;color:#FFFFFF;font-size:20px;padding-top:5px;padding-bottom:5px;" >
100%
</td>
</tr>
<tr>
<td valign="top" class="textContent" style="font- size:16px;color:#616161;padding-top:10px;" >
</td>
</tr>
I really like the look and feel of the progress bar above, but I am looking for a way to adjust the progress of the bar through an API, which I think could be done with the code below as it can be adjusted based on progress such as: https://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml5_progress
Is there a way to incorporate both these codes to create a better progress bar?
Not sure what you're asking. If you want to modify the progress bar as result of an action, you can run this JavaScript code every time you want to update the progress:
document.getElementById("elementName").style.width = "100";
(In which elementName is the name of the ID assigned to the green portion, and "100" is the width of the progress bar)
If you have text, you can update it like so:
document.getElementById("elementName").innerHTML = "Text";
(In which elementName is the name of the ID assigned to the text element, and "Text" is the text you want it to display)
If you use the progress element, you can update it like this:
document.getElementById("elementName").value = "100";
(In which elementName is the name of the id assigned to the progress element, and "100" is the amount completed in relation to the max value assigned in your HTML.)
If you want it to be a static animation that fills up over a static amount of time, you can animate it using CSS:
#elementName {
animation: progressFill 1s;
}
#keyframes progressFill {
from {width: 0%;}
to {width: 100%;}
}
(In which #elementName is the name of the id assigned to the green portion, progressFill is the desired name for the animation, and 1s is the length of the animation. This is, of course, assuming that width: 0%; and width: 100%; provide the desired results.)
I hope this helps.
I want to import an Excel file into my database using angularJS1, Hibernate 4.3.5, Spring mvc 4.2.4. The Excel file is imported via a window (table consisting of children "last name, first name", and parents), the table was filled before manually. The goal now is to fill the table automatically by importing an Excel file. I can read the Excel file on google (json format), but I can not import it into my database. The project consists of a front part (angularJS1) and a back part (hibernate, postgresSQL, DAO). Could you help me please ? This is since Thursday that I seek a solution. Thank you
Here is the code to read my excel file in json format : file : ... Controller.js (front part)
$scope.uploadFile = function (element) {
var file = element.files[0];
console.log("FILE", file);
var reader = new FileReader();
reader.onload = function (event) {
var data = event.target.result;
/*Call XLSX*/
var workbook = XLSX.read(data, {
type: 'binary'
});
/* DO SOMETHING WITH workbook HERE */
var first_sheet_name = workbook.SheetNames[0];
/* Get worksheet */
var worksheet = workbook.Sheets[first_sheet_name];
var excelData = XLSX.utils.sheet_to_json(worksheet);
console.log("EXCELDATA", excelData);
}
}
Here is a sample codepen example created for you.
angular.module('app', [])
.controller('ExcelReadCtrl', function($scope) {
$scope.data = [{firstName:'AAA',lastName:'BBB',age:30}];
$scope.READ = function() {
/*Checks whether the file is a valid excel file*/
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xlsx|.xls)$/;
var xlsxflag = false; /*Flag for checking whether excel is .xls format or .xlsx format*/
if ($("#ngexcelfile").val().toLowerCase().indexOf(".xlsx") > 0) {
xlsxflag = true;
}
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
if (xlsxflag) {
var workbook = XLSX.read(data, { type: 'binary' });
}
else {
var workbook = XLS.read(data, { type: 'binary' });
}
var sheet_name_list = workbook.SheetNames;
var cnt = 0;
sheet_name_list.forEach(function (y) { /*Iterate through all sheets*/
if (xlsxflag) {
var exceljson = XLSX.utils.sheet_to_json(workbook.Sheets[y]);
}
else {
var exceljson = XLS.utils.sheet_to_row_object_array(workbook.Sheets[y]);
}
if (exceljson.length > 0) {
for (var i = 0; i < exceljson.length; i++) {
$scope.data.push(exceljson[i]);
$scope.$apply();
}
}
});
}
if (xlsxflag) {
reader.readAsArrayBuffer($("#ngexcelfile")[0].files[0]);
}
else {
reader.readAsBinaryString($("#ngexcelfile")[0].files[0]);
}
};
});
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
crossorigin="anonymous"></script>
</head>
<body>
<div ng-app>
<h2>Excel Format should be same as table below, xls.core.min.js reads first row as headers</h2>
<div ng-controller="ExcelReadCtrl">
<form>
<input type="file" id="ngexcelfile" />
<input type="button" value="Read Data" ng-click="READ()" />
<br />
<br />
<table border=1>
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.lastName}}</td>
<td>{{item.firstName}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</body>
</html>
your excel format must be same as data you are trying to load.
Here is example format.
Once you load Excel data is stored in $scope.data use same to pass to backend
Instead of trying to read Excel on Front-End side just upload your excel to the server. Excel Reading via JS will consume a significant amount of MEM in browser.
On Java side its quite easy to read/Write Excel all you need is Apache POI
For Excel reading ref : https://www.mkyong.com/java/apache-poi-reading-and-writing-excel-file-in-java/
Once you done with excel reading, you can pass required data to hibernate to store in DB.
I have to read the excel file on the front because it is the user who update the data in the table by importing the Excel file through a upload interface.
these 2 lines are booleans in the database, checkboxes on the add record page.
But when I display rows entered, I want to have empty space where value is False (checkbox was not checked, field in table saves False).
<td align="center">#m.IsTOTPresent</td>
<td align="center">#m.IsEColi</td>
I'm thinking there is an if conditional that would change how it looks on the webpage based on the boolean result of true or false. In my case, nothing displayed would be optimum for false, and a red "true" with a grey background would be optimum for a true result. In a perfect world, that is.
There are many ways to accomplish what you're asking for. Here are a couple...
1. Mostly razor
CSS:
.myTrue {
background-color: red;
color: white;
};
.myFalse {
background-color: white;
color: black;
};
Markup/Razor:
<td align='center' class='#(m.IsTOTPresent ? "myTrue" : "myFalse")'>#(m.IsTOTPresent ? "true" : "")</td>
<td align='center' class='#(m.IsEColi? "myTrue" : "myFalse")'>#(m.IsEColi? "true" : "")</td>
2. Mostly js
Markup/Razor:
<td align='center' data-boolean-value="#m.IsTOTPresent"></td>
<td align='center' data-boolean-value="#m.IsEColi"></td>
js:
(function() {
document.querySelectorAll('[data-boolean-value]').forEach(
function (obj, idx, arr) {
if (typeof obj.dataset.booleanValue !== 'undefined') {
if(obj.dataset.booleanValue) {
obj.innerHTML = "true";
obj.style.backgroundColor = "red";
obj.style.color = "white";
} else {
obj.innerHTML = "";
obj.style.backgroundColor = "white";
obj.style.color = "black";
}
}
});
})();
I have a dropdownlist that is simply a list of strings (salutations). When I submit the form, the field is an empty string no matter what value is selected.
In firefox, it works exactly as expected...but not in IE.
<tr>
<td>Salutation : </td><td><%= Html.DropDownList("Salutation", new SelectList(Salutations.SalutationList, Model.Salutation), "")%></td>
</tr>
Any help is appreciated.
Fixed by doing this instead.
<tr>
<td>Salutation : </td><td><%= Html.DropDownList("Salutation", new SelectList(Salutations.SalutationList.Select(x => new { value = x, text = x }), "value", "text", Model.Salutation), "")%></td>
</tr>