I am sending data from java code to browser via http request.
data is something like this.
JAVA CODE OUTPUT
| Id | Operation | Name | Rows | Bytes | Cost (%CPU)| Time |
| 0 | SELECT STATEMENT | | | | 3 (100)| |
| 1 | FOR UPDATE | | | | | |
| 2 | BUFFER SORT | | | | | |
| 3 | TABLE ACCESS FULL| DD | 4 | 160 | 3 (0)| 00:00:01 |
But when I display it in browser it looks very bad.
Basically I have array of string which I am displaying in browser by using ng-repeat.
when I display it in java code it looks fine, but in browser not so good.
I did tried preserve white spaces but it did not help.
All i need to do is preserve all spaces in string.
{
white-space: pre;
}
Any idea help?
BROWSER OUTPUT.
The easiest way is to wrap it in pre tags, but the best way is to use HTML table cells.
<pre>
| Id | Operation | Name | Rows | Bytes | Cost (%CPU)| Time |
| 0 | SELECT STATEMENT | | | | 3 (100)| |
| 1 | FOR UPDATE | | | | | |
| 2 | BUFFER SORT | | | | | |
| 3 | TABLE ACCESS FULL| DD | 4 | 160 | 3 (0)| 00:00:01 |
</pre>
You need to use a monospace font (so that every letter has the same width).
You can do this using css:
{
font-family: "Courier New", Courier, monospace;
}
Related
I'm trying to create a tree view (and dump that into a Google sheet) of our OrgUnits.
I have the following script which pulls and sorts the data:
function listAllOUs() {
const ouArray = []
const page = AdminDirectory.Orgunits.list('my_customer', {
orgUnitPath: '/',
type: 'all'
});
const orgUnits = page.organizationUnits;
if (orgUnits) {
for (let i = 0; i < orgUnits.length; i++) {
const orgUnit = orgUnits[i];
ouArray.push(orgUnit.orgUnitPath)
}
} else {
Logger.log('Could not find any OUs');
}
ouArray.sort()
}
The above code produces the array called ouArray, which looks like this:
[/Parent_01, /Parent_01/Child_01, /Parent_01/Child_01/Grandchild_01, /Parent_01/Child_02, /Parent_01/Child_03, /Parent_01/Child_04, /Parent_02, /Parent_02/Child_01, /Parent_02/Child_02, /Parent_02/Child_02/Grandchild_01, /Parent_02/Child_05, /Parent_02/Child_06, /Parent_02/Child_07, /Parent_02/Child_07/Grandchild_01, /Parent_02/Child_08, /Parent_02/Child_09, /Parent_02/Child_09/Grandchild_01, /Parent_02/Child_3, /Parent_02/Child_4, /Parent_03, /Parent_03/Child_01, /Parent_03/Child_01/Grandchild_01, /Parent_03/Child_02, /Parent_03/Child_02/Grandchild_01, /Parent_03/Child_02/Grandchild_02, /Parent_03/Child_03, /Parent_03/Child_03/Grandchild_01, /Parent_03/Child_03/Grandchild_02, /Parent_03/Child_04, /Parent_03/Child_05, /Parent_03/Child_05/Grandchild_01, /Parent_03/Child_05/Grandchild_02, /Parent_10, /Parent_11]
Now what I want to do is take that data, and format it and place it into a Google Sheet so that it resembles this:
+====+============+=====================+===================================+
| | A | B | C |
+====+============+=====================+===================================+
| 1 | /Parent_01 | | |
+----+------------+---------------------+-----------------------------------+
| 2 | | /Parent_01/Child_01 | |
+----+------------+---------------------+-----------------------------------+
| 3 | | | /Parent_01/Child_01/Grandchild_01 |
+----+------------+---------------------+-----------------------------------+
| 4 | | /Parent_01/Child_02 | |
+----+------------+---------------------+-----------------------------------+
| 5 | | /Parent_01/Child_03 | |
+----+------------+---------------------+-----------------------------------+
| 6 | | /Parent_01/Child_04 | |
+----+------------+---------------------+-----------------------------------+
| 7 | /Parent_02 | | |
+----+------------+---------------------+-----------------------------------+
| 8 | | /Parent_02/Child_01 | |
+----+------------+---------------------+-----------------------------------+
| 9 | | /Parent_02/Child_02 | |
+----+------------+---------------------+-----------------------------------+
| 10 | | | /Parent_02/Child_02/Grandchild_01 |
+----+------------+---------------------+-----------------------------------+
| 11 | | /Parent_02/Child_05 | |
+----+------------+---------------------+-----------------------------------+
| 12 | | /Parent_02/Child_06 | |
+----+------------+---------------------+-----------------------------------+
| 13 | | /Parent_02/Child_07 | |
+----+------------+---------------------+-----------------------------------+
| 14 | | | /Parent_02/Child_07/Grandchild_01 |
+----+------------+---------------------+-----------------------------------+
| 15 | | /Parent_02/Child_08 | |
+----+------------+---------------------+-----------------------------------+
| 16 | | /Parent_02/Child_09 | |
+----+------------+---------------------+-----------------------------------+
| 17 | | | /Parent_02/Child_09/Grandchild_01 |
+----+------------+---------------------+-----------------------------------+
| 18 | | /Parent_02/Child_3 | |
+----+------------+---------------------+-----------------------------------+
| 19 | | /Parent_02/Child_4 | |
+----+------------+---------------------+-----------------------------------+
| 20 | /Parent_03 | | |
+----+------------+---------------------+-----------------------------------+
| 21 | | /Parent_03/Child_01 | |
+----+------------+---------------------+-----------------------------------+
| 22 | | | /Parent_03/Child_01/Grandchild_01 |
+----+------------+---------------------+-----------------------------------+
| 23 | | /Parent_03/Child_02 | |
+----+------------+---------------------+-----------------------------------+
| 24 | | | /Parent_03/Child_02/Grandchild_01 |
+----+------------+---------------------+-----------------------------------+
| 25 | | | /Parent_03/Child_02/Grandchild_02 |
+----+------------+---------------------+-----------------------------------+
| 26 | | /Parent_03/Child_03 | |
+----+------------+---------------------+-----------------------------------+
| 27 | | | /Parent_03/Child_03/Grandchild_01 |
+----+------------+---------------------+-----------------------------------+
| 28 | | | /Parent_03/Child_03/Grandchild_02 |
+----+------------+---------------------+-----------------------------------+
| 29 | | /Parent_03/Child_04 | |
+----+------------+---------------------+-----------------------------------+
| 30 | | /Parent_03/Child_05 | |
+----+------------+---------------------+-----------------------------------+
| 31 | | | /Parent_03/Child_05/Grandchild_01 |
+----+------------+---------------------+-----------------------------------+
| 32 | | | /Parent_03/Child_05/Grandchild_02 |
+----+------------+---------------------+-----------------------------------+
| 33 | /Parent_10 | | |
+----+------------+---------------------+-----------------------------------+
| 34 | /Parent_11 | | |
+----+------------+---------------------+-----------------------------------+
If anyone has any idea's on how I can accomplish this, it would be amazing. Logically (at least in my mind), it would need some kind of string/partial string match? But I can't for the life of me figure it out!
Explanation:
The logic of the following script is quite simple:
Iterate through ouArray and forEach element find the number of forward slashes /.
Use a nested ternary operator and for each of the possible cases push the corresponding array to the final data array.
In more detail:*
1 x /: append [t,"",""],
2 x /: append ["",t,""],
3 x /: append ["","",t]
where t is every element in ouArray.
*(1x/ means one forward slash etc.)
Complete Solution:
function listAllOUs() {
// get spreadsheet details
const ss = SpreadsheetApp.getActive();
const sh = ss.getSheetByName('Sheet1'); // choose the name of your sheet
const ouArray = []
const page = AdminDirectory.Orgunits.list('my_customer', {
orgUnitPath: '/',
type: 'all'
});
const orgUnits = page.organizationUnits;
if (orgUnits) {
for (let i = 0; i < orgUnits.length; i++) {
const orgUnit = orgUnits[i];
ouArray.push(orgUnit.orgUnitPath)
}
} else {
Logger.log('Could not find any OUs');
}
ouArray.sort()
data = [];
ouArray.forEach(t=>{
let nslashes = [...t].filter(l => l === '/').length;
data.push(
nslashes==1?[t,"",""]:
nslashes==2?["",t,""]:["","",t]
)
});
// set the values back to the sheet
sh.getRange(1,1,data.length,data[0].length).setValues(data);
}
Reproducible example:
function myFunction() {
const ss = SpreadsheetApp.getActive();
const sh = ss.getSheetByName('Sheet1'); // choose the name of your sheet
const ouArray = ["/Parent_01", "/Parent_01/Child_01", "/Parent_01/Child_01/Grandchild_01",
"/Parent_01/Child_02", "/Parent_01/Child_03", "/Parent_01/Child_04",
"/Parent_02", "/Parent_02/Child_01", "/Parent_02/Child_02", "/Parent_02/Child_02/Grandchild_01",
"/Parent_02/Child_05", "/Parent_02/Child_06", "/Parent_02/Child_07",
"/Parent_02/Child_07/Grandchild_01", "/Parent_02/Child_08", "/Parent_02/Child_09"]
data = [];
ouArray.forEach(t=>{
let nslashes = [...t].filter(l => l === '/').length;
data.push(
nslashes==1?[t,"",""]:
nslashes==2?["",t,""]:["","",t]
)
});
sh.getRange(1,1,data.length,data[0].length).setValues(data);
}
Output of reproducible example:
I have students, student_subject, subjects and results tables.
Students Table
| id | name |
|----|-------|
| 1 | John |
| 2 | Sara |
| 3 | Smith |
Subjects Table
| id | name |
|----|-------------|
| 1 | Science |
| 2 | Mathematics |
| 3 | English |
Student_subject Table
| id | student_id | subject_id |
|----|------------|------------|
| 1 | 1 | 1 |
| 2 | 1 | 2 |
| 3 | 2 | 1 |
| 4 | 3 | 1 |
Results Table
| id | student_subject_id | result |
|----|--------------------|--------|
| 1 | 1 | 45 |
| 2 | 2 | 25 |
| 3 | 3 | 65 |
| 4 | 4 | 45 |
There are separate forms to insert students (with selecting subjects), subjects and results. I got a problem creating the form to add results for a student.
The form consists of form inputs listing down all the subjects of the student to enter results. For a specific student, the form to insert results may look like this(after looping the students subjects). The name attribute contains the Student_subject table id value. I add the name to this value because In the database I need to have reference for the student_subject table in the database.
<form>
<input type="text" class="form-control" name="1" required>
<input type="text" class="form-control" name="2" required>
</form>
I want to know this approach is correct or wrong to add results to students?
If not what are the changes I have to do in database and forms.
On my site I have a table with numerous numbers, and I'm doing simple math on them to find the best method for the user. The table looks something like this:
US locale
+-------+-------+------------+---------+----------------------------------------+
| Gain | Price | Price/Gain | Amount | Outcome (round(Price * Amount)) |
+-------+-------+------------+---------+----------------------------------------+
| 15.75 | 47 | 2.98 | 827,583 | 38,896,401 |
| 52.5 | 240 | 4.57 | 248,275 | 59,586,000 |
| 297.5 | 4,106 | 13.80 | 43,814 | 179,900,284 |
+-------+-------+------------+---------+----------------------------------------+
Here's how the table SHOULD look with the de-DE locale (notice the switching of the . and , characters)
+-------+-------+------------+---------+----------------------------------------+
| Gain | Price | Price/Gain | Amount | Outcome (round(Price * Amount)) |
+-------+-------+------------+---------+----------------------------------------+
| 15,75 | 47 | 2,98 | 827.583 | 38.896.401 |
| 52,5 | 240 | 4,57 | 248.275 | 59.586.000 |
| 297,5 | 4.106 | 13,80 | 43.814 | 179.900.284 |
+-------+-------+------------+---------+----------------------------------------+
The way my code works, each column is populated separately. So first, the Gain column is populated for all rows, formatted, and using jQuery, I changed the value of row n to the Gain. Then Price is calculated, and again the values are populated.
The issue arises when Price/Gain is calculated. For the US locale, everything is fine. But with the de-DE locale, the table actually ends up looking like this:
+-------+-------+------------+---------+----------------------------------------+
| Gain | Price | Price/Gain | Amount | Outcome (round(Price * Amount)) |
+-------+-------+------------+---------+----------------------------------------+
| 15,75 | 47 | 0,03 | 827.583 | 38.896.401 |
| 52,5 | 240 | 0,46 | 248.275 | 59.586.000 |
| 297,5 | 4.106 | 0,00 | 43.814 | 179.900 |
+-------+-------+------------+---------+----------------------------------------+
When the Price/Gain is being calculated, the , and . are being ignored from the Gain and Price columns. As you can see in the third row,
4.106 / 2975 = 0.0014 (rounded to 0.00, or 0,00)
This is also causing an issue with the Outcome, as the Price, again, is being parsed literally, rather than converted from de-DE to US first. So in the third row, again, we can see
4.106 * 43814 (this is parsed correctly for some reason) = 179,900 or 179.900
Here's how my code is publishing these values and reading them in when needed:
// This code populates the Gain field
var gain = grabPresetGain(); // grabs a hardcoded value from a JSON object
gain = addCommasToNumber(new Intl.NumberFormat("de-DE", {}).format(gain .toFixed(2)));
row += "<div class='col-lg-1 col-md-1 col-sm-1 col-xs-1 row-gain text-center'>" + gain + "</div>";
// This code populates the price field
outcome = addCommasToNumber(new Intl.NumberFormat("de-DE", {}).format(outcome));
$(this).children(".row-price").text(outcome);
// And finally this code populates the Price/Gain field
// for loop going through each row of the table
var gain = convertToNumber($(this).children(".row-gain").text());
var price = convertToNumber($(this).children(".row-price").text());
var pricePerGain = (price / gain);
pricePerGain = addCommasToNumber(new Intl.NumberFormat("de-DE", {minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(pricePerGain .toFixed(2)));
$(this).children(".row-pricegain").text(pricePerGain );
And here's two of the helper functions being used:
function convertToNumber(x) {
if (typeof x == "string") {
x = x.replace(/\,/g,'');
}
return Number(x);
}
function addCommasToNumber(n) {
return n.toLocaleString();
}
All in all - is there a consistent way to parse, manipulate, and output numbers of different locales?
Any insight would be great as I'm pretty stuck as to what to do at the moment.
Thanks
Give formatJS a try. From the site:
FormatJS is a modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people.
If you're just dealing with numbers, you might even be able to get away without using a library at all, and just directly accessing the window.Intl object.
See some examples here, on MDN.
I have four tables in mysql (object, type, price, date)
all of them have two coloumns: "id" and "variable"
for example:
Object table
+----+-----------+
| id | variable |
+----+-----------+
| 1 | shop1 |
+----+-----------+
| 2 | shop2 |
+----+-----------+
type table
+----+----------+
| id | variable |
+----+----------+
| 1 | lemon |
+----+----------+
| 2 | potato |
+----+----------+
Date table
+----+------------+
| id | variable |
+----+------------+
| 1 | 2014-10-11 |
+----+------------+
| 2 | 2014-12-11 |
+----+------------+
price table
+----+------------+
| id | variable |
+----+------------+
| 1 | 5000 |
+----+------------+
| 2 | 2000 |
+----+------------+
| 3 | 4000 |
+----+------------+
| 4 | 3000 |
+----+------------+
And what we really need in browser view:
Shop1:
+--------+------------+------------+
| | 2014-10-11 | 2014-12-11 |
+--------+------------+------------+
| lemon | 5000 | 3000 |
+--------+------------+------------+
| potato | 2000 | 4000 |
+--------+------------+------------+
Price is a variable and could be changed like an other variables (dates, type), columns of dates or types could be much more - (max - 5)
This table looks like Excel. But the price must depend on other variables, because other objects could use the same id of price.
First loop Through type table and get the ID
select * from type
Then Loop through ID's as $id
Then In loop you need to query each table for each required value.for example
select variable from price where ID = $id
select variable from date where ID = $id
I have 2 divs, a main content section and a sidebar.
What I want to happen is force each div to be the same height as the tallest div
If the Sidebar Content is taller then the Main Content I want to push the Main Content down to match the Sidebar Content's height
+--------------------+----------+
| Main Content | Sidebar |
| | |
| | |
| | |
| | |
| END | |
| __________________ | |
| | |
| | |
| | END |
| | ________ |
+--------------------+----------+
Conversely, if the Main Content is taller then the Sidebar Content I want to push the Sidebar Content down to match the Main Content's height
+--------------------+----------+
| Main Content | Sidebar |
| | |
| | |
| | |
| | |
| | END |
| | ________ |
| | |
| | |
| END | |
| __________________ | |
+--------------------+----------+
So it would look like this:
+--------------------+----------+
| Main Content | Sidebar |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| END | END |
| __________________ | ________ |
+--------------------+----------+
What you want is equal height columns, which can be accomplished with CSS only, without any javascript.
There are other ways to do this, including jQuery. See this stackoverflow question for more information.
Could you use jQuery or another framework to extrapolate the height of your tallest div and then set the height to the others accordingly?
if($('#mainContent').height() >= $('#subContent').height()) {
$('#subContent').height($('#mainContent').height());
}
else
{
$('#mainContent').height($('#subContent').height());
}