I have followed a Microsoft template to get an ASP.NET Core React JS project in visual studio 2022. The end product displays a list of weather forecasts with no navigability in the website. I am trying to convert the site to be more adaptable and start building my own project. I have attached a navbar file that I would like to implement, and the removal of the weather forecast. Please can someone tell me how to do this?
App.js
import React, { Component } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from './Navigation/Navbar.js';
export default class App extends Component {
static displayName = App.name;
constructor(props) {
super(props);
this.state = { forecasts: [], loading: true };
}
componentDidMount() {
this.populateWeatherData();
}
static renderForecastsTable(forecasts) {
return (
<table className='table table-striped' aria-labelledby="tabelLabel">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
{forecasts.map(forecast =>
<tr key={forecast.date}>
<td>{forecast.date}</td>
<td>{forecast.temperatureC}</td>
<td>{forecast.temperatureF}</td>
<td>{forecast.summary}</td>
</tr>
)}
</tbody>
</table>
);
}
render() {
let contents = this.state.loading
? <p><em>Loading... Please refresh once the ASP.NET backend has started. See https://aka.ms/jspsintegrationreact for more details.</em></p>
: App.renderForecastsTable(this.state.forecasts);
return (
<div>
<h1 id="tabelLabel" >Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
{contents}
</div>
);
}
async populateWeatherData() {
const response = await fetch('weatherforecast');
const data = await response.json();
this.setState({ forecasts: data, loading: false });
}
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
Navbar.js
import React from "react";
const Navbar = () => {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">
Navbar
</a>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">
Home <span className="sr-only">(current)</span>
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Features
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Pricing
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown link
</a>
<div
className="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink"
>
<a className="dropdown-item" href="#">
Action
</a>
<a className="dropdown-item" href="#">
Another action
</a>
<a className="dropdown-item" href="#">
Something else here
</a>
</div>
</li>
</ul>
</div>
</nav>
);
};
export default Navbar;
For changing the .nav-link activate state I wrote
$(".nav-link").on("click", function(){
$(".nav-link.active").removeClass("active");
$(this).addClass("active");
});
But this won't work because the page reloads when clicking on the .nav-link. I can do something like:
var current_url = location.href;
if (current_url == "https://xyx.com/home") {
$('.nav-link.home').addClass('active');
} else {
$('.nav-link.home').removeClass('active');
}
But when I was looking for another method I found this
<li class="nav-item">
<a href="{{ route('home') }}"
class="nav-link dropdown-toggle {{ request()->routeIs('home') ? 'active' : '' }}">Home</a>
</li>
<li class="nav-item">
About
</li>
This is Laravel code but I am looking something like this for Django.
<div class="widget-header" style="margin-top: 5%;">
<ul class="nav nav-tabs">
<li class="<c:if test="${tab != 'LETTERS'}">selected active </c:if>inline headerDivider">
<a class="<c:if test="${tab != 'LETTERS'}">active </c:if>header" href="action" data-toggle="tab"><Regulations</a>
</li>
<li class="<c:if test="${tab == 'LETTERS'}">selected active </c:if>inline headerDivider">
<a class="<c:if test="${tab == 'LETTERS'}">>selected active </c:if>header" href="action" data-toggle="tab">Letters</a>
</li>
<c:choose>
<c:when test="${tab != 'LETTERS'}">
<a data-href="action" class="btn btn-small" data-toggle="modal" data-reload="regulationDiv">Manage Regulations</a>
</c:when>
<c:otherwise>
<a data-href="action" class="btn btn-small" data-toggle="modal" data-reload="letterDiv">Add Letter</a>
</c:otherwise>
</c:choose>
</ul>
</div>
<div style="overflow: auto; max-height:60vh;" class="tab-content">
<c:if test="${tab != 'LETTERS'}">
<div id="regulationDiv" data-url='action'>
<jsp:include page="regulations.jsp"/>
</div>
</c:if>
<c:if test="${tab == 'LETTERS'}">
<div id="letterDiv" data-url='action'>
<jsp:include page="letters.jsp"/>
</div>
</c:if>
</div>
First tab by default its working second tab there is no event or click, looks like disabled tab.Am I missing something to include in div elements, I tried many ways seems no solution yet to me.
I'm trying to search a string from the list using python (Selenium webdriver)
<li role="treeitem" aria-expanded="true" id="List" class="jstree-node jstree-open">
<i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#"><i class="jstree-icon jstree-themeicon"></i>Employees</a>
<ul role="group" class="jstree-children">
<li role="treeitem" id="workid:1" class="jstree-node jstree-leaf"><i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#"><i class="jstree-icon jstree-themeicon"></i>Anna Def(1)</a></li>
<li role="treeitem" id="workid:2" class="jstree-node jstree-leaf" aria-selected="false"><i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#"><i class="jstree-icon jstree-themeicon"></i>Dave Hjk(2)</a></li>
<li role="treeitem" id="workid:3" class="jstree-node jstree-leaf"><i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#"><i class="jstree-icon jstree-themeicon"></i>Ght Dgh(3)</a></li>
<li role="treeitem" id="workid:4" class="jstree-node jstree-leaf"><i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#"><i class="jstree-icon jstree-themeicon"></i>Acdc Dedef(4)</a></li>
From this list I want to find the Employee Dave Hjk(2)from the tree and select him. How can I search using loop?
This is what I tried but I think the way I'm getting the array (li) is worng :(
li = SeleniumHelperInstance.driver.find_elements_by_xpath("//*[#id="List"]/ul")
for i in range(len(li)):
selectuser = "Dave Hjk(2)"
compUser = SeleniumHelperInstance.driver.find_element_by_css_selector("#List > ul > li:nth-child(i)")
if (selectuser == compUser.text):
compUser.click()
You could first locate the tree and then the link with find_element_by_link_text :
driver.find_element_by_id("List") \
.find_element_by_link_text("Dave Hjk(2)") \
.click()
You could also use an XPath to get the the link with a single call:
driver.find_element_by_xpath("id('List')//a[.='Dave Hjk(2)']") \
.click()
I would like to remove withe spaces or new lines from a string that comes from a html sentence.
Example: lets take the follow string
<ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate">
<li class="list-group-item active">
<a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"></i> Overall</a>
</li>
<li class="list-group-item list-toggle">
<a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage" ><i class="fa fa-money"></i> Invoice</a>
<ul id="collapse-MoneyManage" class="collapse">
<li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"></i> Big Invoice </a></li>
<li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"></i> Big big big
Invoice 2 </a></li>
</ul>
</li>
</ul>
This is the desired result:
<ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate"><li class="list-group-item active"><a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"></i>Overall</a></li><li class="list-group-item list-toggle"><a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage" ><i class="fa fa-money"></i> Invoice</a><ul id="collapse-MoneyManage" class="collapse"><li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"></i>Big Invoice</a></li><li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"></i>Big big big Invoice 2</a></li></ul></li></ul>
As you can see:
Only 1 line, no withe spaces or new lines between "><" if there is no string between them.
I would like to have trimmed strings between "><" if there are some. Example: </i> Big Invoice </a> became </i>Big Invoice</a>.
And finally
</i> Big big big
Invoice 2 </a></li>
became </i>Big big big Invoice 2</a></li>, no new line in the middle of the sentence and trimmed.
So far I achieved the first step. This is the regex I used (>\s+<) but I don't know how to achieve the step 2 and 3. Is it possible? Any idea?
Update:
After Adam's post, this the final code:
//Put your html code here. Do not use double quotes " inside it. Instead, use single.
$str =<<<eof
your dynamic HTML here.
eof;
$re = "/(?:\\s*([<>])\\s*|(\\s)\\s*)/im";
$subst = "$1$2";
$result = preg_replace($re, $subst, $str);
//If you want to use JSON
$arrToJSON = array(
"dataPHPtoJs"=>"yourData",
"htmlDyn"=>"$result"
);
$resultJSON= json_encode(array($arrToJSON));
This html string is clean. So you can use it trough AJAX, JSON, inside javascript, that will works.
I my case I am using inside a javascript code, no AJAX, no JSON.
var htmlDyn="<?php echo $result; ?>";
//Do what you want to do with.
$('.someElementClass').append(htmlDyn);
Here is the solution:
(?:\s*([<>])\s*|(\s)\s*)
Substitution:
\1\2
You can try it here:
https://regex101.com/r/dL5gB5/1
Some XML conversions if you please?
The following snippet is in PHP but could easily transformed to work with i.e. Python as well.
<?php
$string = <<<EOF
<html>
<ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate">
<li class="list-group-item active">
<a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"></i> Overall</a>
</li>
<li class="list-group-item list-toggle">
<a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage" ><i class="fa fa-money"></i> Invoice</a>
<ul id="collapse-MoneyManage" class="collapse">
<li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"></i> Big Invoice </a></li>
<li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"></i> Big big big
Invoice 2 </a></li>
</ul>
</li>
</ul>
</html>
EOF;
$xml = simplexml_load_string($string);
$dom = new DOMDocument('1.0');
$dom->preserveWhiteSpace = false;
$dom->formatOutput = false;
$dom->loadXML($xml->asXML());
echo $dom->saveXML();
/* output:
<html><ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate"><li class="list-group-item active"><a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"/> Overall</a></li><li class="list-group-item list-toggle"><a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage"><i class="fa fa-money"/> Invoice</a><ul id="collapse-MoneyManage" class="collapse"><li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"/> Big Invoice </a></li><li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"/> Big big big
Invoice 2 </a></li></ul></li></ul></html>
*/
?>
Eliminates all unnecessary whitespace and is safer then using regular expressions on HTML tags.
This will trim the whitespaces adjacent to tags and remove newlines in the middle of content.
Find:
(?:\s*(<(?:(?:/?[\w:]+\s*/?)|(?:[\w:]+\s+(?:(?:(?:"[\S\s]*?")|(?:'[\S\s]*?'))|(?:[^>]*?))+\s*/?)|\?[\S\s]*?\?|(?:!(?:(?:DOCTYPE[\S\s]*?)|(?:\[CDATA\[[\S\s]*?\]\])|(?:--[\S\s]*?--)|(?:ATTLIST[\S\s]*?)|(?:ENTITY[\S\s]*?)|(?:ELEMENT[\S\s]*?))))>)\s*|(?:\r?\n)+)
Replace:
$1
Output:
<ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate"><li class="list-group-item active"><a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"></i>Overall</a></li><li class="list-group-item list-toggle"><a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage" ><i class="fa fa-money"></i>Invoice</a><ul id="collapse-MoneyManage" class="collapse"><li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"></i>Big Invoice</a></li><li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"></i>Big big big Invoice 2</a></li></ul></li></ul>
Benchmark:
Regex1: (?:\s*(<(?:(?:/?[\w:]+\s*/?)|(?:[\w:]+\s+(?:(?:(?:"[\S\s]*?")|(?:'[\S\s]*?'))|(?:[^>]*?))+\s*/?)|\?[\S\s]*?\?|(?:!(?:(?:DOCTYPE[\S\s]*?)|(?:\[CDATA\[[\S\s]*?\]\])|(?:--[\S\s]*?--)|(?:ATTLIST[\S\s]*?)|(?:ENTITY[\S\s]*?)|(?:ELEMENT[\S\s]*?))))>)\s*|(?:\r?\n)+)
Options: < none >
Completed iterations: 50 / 50 ( x 1000 )
Matches found per iteration: 29
Elapsed Time: 6.75 s, 6749.58 ms, 6749576 µs