Karl/ktvmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working react router

Browse Source
This commit is contained in:
karl.hudgell 2021-02-17 20:06:36 +00:00
parent 883efbc451
commit 486c68accc
13 changed files with 296 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
SQL (1)/BBLB_DNS_userAccounts.sql
View File

29
client/public/index.html
View File

@ -9,35 +9,14 @@
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link
<!-- rel="stylesheet"
manifest.json provides metadata used when your web app is installed on a href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ />
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>

97
client/src/App.js
View File

@ -1,81 +1,20 @@
import React, { Component } from 'react'; import React from "react";
import axios from 'axios'; import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import './App.css'; import { Navigation, Footer, Home, About, ServerList } from "./components";
class App extends Component { function App() {
constructor() { return (
super(); <div className="App">
this.state = { <Router>
fname: '', <Navigation />
lname: '', <Switch>
streams: [] <Route path="/" exact component={() => <Home />} />
}; <Route path="/about" exact component={() => <About />} />
} <Route path="/ServerList" exact component={() => <ServerList />} />
</Switch>
<Footer />
componentDidMount() { </Router>
fetch('/getStreams') </div>
.then(res => res.json()) );
.then(streams => this.setState({ streams }));
}
onChange = (e) => {
/*
Because we named the inputs to match their
corresponding values in state, it's
super easy to update the state
*/
this.setState({ [e.target.name]: e.target.value });
}
onSubmit = (e) => {
e.preventDefault();
// get our form data out of state
const { fname, lname } = this.state;
console.log({ fname, lname })
}
render() {
const { fname, lname } = this.state;
return (
<section class="container">
<div class="left-half">
<article>
<h1>User Login</h1>
<p>
<form onSubmit={this.onSubmit}>
<p>UserName
<input
type="text"
name="fname"
value={fname}
onChange={this.onChange}
/>
</p>
<p>Password
<input
type="text"
name="lname"
value={lname}
onChange={this.onChange}
/>
</p>
<br />
<button type="submit">Login</button>
</form>
</p>
</article>
</div>
<div class="right-half">
<article>
<h1>Stream Details</h1>
{this.state.streams.map(stream =>
<div key={stream.StreamName}>{stream.StreamName} - {stream.StreamURL}</div>
)}
</article>
</div>
</section>
);
}
} }
export default App; export default App;

60
client/src/app2.js
View File

@ -1,60 +0,0 @@
import React, { Component } from 'react';
import axios from 'axios';
class UserForm extends Component {
constructor() {
super();
this.state = {
fname: '',
lname: '',
email: '',
};
}
onChange = (e) => {
/*
Because we named the inputs to match their
corresponding values in state, it's
super easy to update the state
*/
this.setState({ [e.target.name]: e.target.value });
}
onSubmit = (e) => {
e.preventDefault();
// get our form data out of state
const { fname, lname, email } = this.state;
axios.post('/', { fname, lname, email })
.then((result) => {
//access the results here....
});
}
render() {
const { fname, lname, email } = this.state;
return (
<form onSubmit={this.onSubmit}>
<input
type="text"
name="fname"
value={fname}
onChange={this.onChange}
/>
<input
type="text"
name="lname"
value={lname}
onChange={this.onChange}
/>
<input
type="text"
name="email"
value={email}
onChange={this.onChange}
/>
<button type="submit">Submit</button>
</form>
);
}
}

30
client/src/components/About.jsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
function About() {
return (
<div className="about">
<div class="container">
<div class="row align-items-center my-5">
<div class="col-lg-7">
<img
class="img-fluid rounded mb-4 mb-lg-0"
src="http://placehold.it/900x400"
alt=""
/>
</div>
<div class="col-lg-5">
<h1 class="font-weight-light">About</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</p>
</div>
</div>
</div>
</div>
);
}
export default About;

17
client/src/components/Footer.jsx Normal file
View File

@ -0,0 +1,17 @@
import React from "react";
function Footer() {
return (
<div className="footer">
<footer class="py-5 bg-dark fixed-bottom">
<div class="container">
<p class="m-0 text-center text-white">
Copyright &copy; 2021
</p>
</div>
</footer>
</div>
);
}
export default Footer;

30
client/src/components/Home.jsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
function Home() {
return (
<div className="home">
<div class="container">
<div class="row align-items-center my-5">
<div class="col-lg-7">
<img
class="img-fluid rounded mb-4 mb-lg-0"
src="http://placehold.it/900x400"
alt=""
/>
</div>
<div class="col-lg-5">
<h1 class="font-weight-light">Home</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</p>
</div>
</div>
</div>
</div>
);
}
export default Home;

51
client/src/components/Navigation.jsx Normal file
View File

@ -0,0 +1,51 @@
import React from "react";
import { Link, withRouter } from "react-router-dom";
function Navigation(props) {
return (
<div className="navigation">
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container">
<Link class="navbar-brand" to="/">
BBLB_DNS
</Link>
<div>
<ul class="navbar-nav ml-auto">
<li
class={`nav-item ${
props.location.pathname === "/" ? "active" : ""
}`}
>
<Link class="nav-link" to="/">
Home
<span class="sr-only">(current)</span>
</Link>
</li>
<li
class={`nav-item ${
props.location.pathname === "/about" ? "active" : ""
}`}
>
<Link class="nav-link" to="/about">
About
</Link>
</li>
<li
class={`nav-item ${
props.location.pathname === "/ServerList" ? "active" : ""
}`}
>
<Link class="nav-link" to="/ServerList">
Server List
</Link>
</li>
</ul>
</div>
</div>
</nav>
</div>
);
}
export default withRouter(Navigation);

57
client/src/components/ServerList.jsx Normal file
View File

@ -0,0 +1,57 @@
import React, { Component } from "react";
import axios from "axios";
class ServerList extends Component {
constructor() {
super();
this.state = {
fname: "",
lname: "",
streams: [],
};
}
componentDidMount() {
fetch("/getStreams")
.then((res) => res.json())
.then((streams) => this.setState({ streams }));
}
onChange = (e) => {
/*
Because we named the inputs to match their
corresponding values in state, it's
super easy to update the state
*/
this.setState({ [e.target.name]: e.target.value });
};
onSubmit = (e) => {
e.preventDefault();
// get our form data out of state
const { fname, lname } = this.state;
console.log({ fname, lname });
};
render() {
return (
<div className="contact">
<div class="container">
<div class="row align-items-center my-5">
<div class="col-lg-7">
<h1>Stream Details</h1>
</div>
<div class="col-lg-5">
{this.state.streams.map((stream) => (
<div key={stream.StreamName}>
{stream.StreamName} - {stream.StreamURL}
</div>
))}
</div>
</div>
</div>
</div>
);
}
}
export default ServerList;

5
client/src/components/index.js Normal file
View File

@ -0,0 +1,5 @@
export { default as Navigation } from "./Navigation";
export { default as Footer } from "./Footer";
export { default as Home } from "./Home";
export { default as About } from "./About";
export { default as ServerList } from "./ServerList";

81
client/src/old.js Normal file
View File

@ -0,0 +1,81 @@
import React, { Component } from 'react';
import axios from 'axios';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {
fname: '',
lname: '',
streams: []
};
}
componentDidMount() {
fetch('/getStreams')
.then(res => res.json())
.then(streams => this.setState({ streams }));
}
onChange = (e) => {
/*
Because we named the inputs to match their
corresponding values in state, it's
super easy to update the state
*/
this.setState({ [e.target.name]: e.target.value });
}
onSubmit = (e) => {
e.preventDefault();
// get our form data out of state
const { fname, lname } = this.state;
console.log({ fname, lname })
}
render() {
const { fname, lname } = this.state;
return (
<section class="container">
<div class="left-half">
<article>
<h1>User Login</h1>
<p>
<form onSubmit={this.onSubmit}>
<p>UserName
<input
type="text"
name="fname"
value={fname}
onChange={this.onChange}
/>
</p>
<p>Password
<input
type="text"
name="lname"
value={lname}
onChange={this.onChange}
/>
</p>
<br />
<button type="submit">Login</button>
</form>
</p>
</article>
</div>
<div class="right-half">
<article>
<h1>Stream Details</h1>
{this.state.streams.map(stream =>
<div key={stream.StreamName}>{stream.StreamName} - {stream.StreamURL}</div>
)}
</article>
</div>
</section>
);
}
}
export default App;

2
lib/checker.js
View File

@ -57,7 +57,7 @@ async function main() {
console.log('Finished') console.log('Finished')
} }
main() // main()
module.exports = { module.exports = {
singleCheck, singleCheck,

2
lib/streamArray.json
View File

@ -1 +1 @@
[{"StreamName":"Insanity","StreamURL":"https://trippy.pro:443"},{"StreamName":"PremPlus","StreamURL":"https://itty.in:443"},{"StreamName":"GunSlinger","StreamURL":"http://gunslingertv.org:8080"},{"StreamName":"VIP","StreamURL":"http://oven-cleaner.com:8080/"},{"StreamName":"Technoid","StreamURL":"http://capoisagod2021.org:8080"},{"StreamName":"Old Premium","StreamURL":"https://caporeds.online:443","username":"Dazg3012","expiaryDate":"12/30/2021"},{"StreamName":"??","StreamURL":"http://screamstreams.info:8080"},{"StreamName":"Gold","StreamURL":"http://catenamode.cf:8090"},{"StreamName":"??","StreamURL":"http://sulu.xyz:2086"},{"StreamName":"??","StreamURL":"http://bigbox.me.uk:2086"},{"StreamName":"??","StreamURL":"http://beautifilm.xyz:8080"},{"StreamName":"??","StreamURL":"https://hulks.xyz:443"},{"StreamName":"??","StreamURL":"http://mytv.digital:8080/"},{"StreamName":"??","StreamURL":"http://theonlinemedia.network:2052"},{"StreamName":"Gold","StreamURL":"http://server1.jforbes.club:8090"},{"StreamName":"??","StreamURL":"http://ths.viewdns.net:8080"},{"StreamName":"??","StreamURL":"http://vpsuk.store:8080"},{"StreamName":"??","StreamURL":"http://ac.mustardsubs.tk:8880"},{"StreamName":"??","StreamURL":"http://faithhosting.xyz:25461"},{"StreamName":"??","StreamURL":"http://ip365.cx:80"},{"StreamName":"??","StreamURL":"https://trippy.pro:443"},{"StreamName":"??","StreamURL":"http://g132.caporeds.online:8080/"},{"StreamName":"??","StreamURL":"http://theonlinemedia.network:2052"},{"StreamName":"??","StreamURL":"http://beautifilm.xyz:8080"},{"StreamName":"??","StreamURL":"http://pimptv.dnsabr.com:8080"},{"StreamName":"??","StreamURL":"http://tavaratv.xyz:2095"},{"StreamName":"??","StreamURL":"http://cms-tan.media:8880"},{"StreamName":"??","StreamURL":"http://streamknighttv.xyz:8080"},{"StreamName":"??","StreamURL":"http://covidsucks.xyz:8080"},{"StreamName":"Gambler","StreamURL":"http://fckbrexit.link:8080"},{"StreamName":"??","StreamURL":"http://tv.realot.xyz:35001"},{"StreamName":"??","StreamURL":"http://www.tvxclnt.com:8080"},{"StreamName":"??","StreamURL":"http://iptv.satplex.co.uk:8080"}] [{"StreamName":"Insanity","StreamURL":"https://trippy.pro:443"},{"StreamName":"PremPlus","StreamURL":"https://itty.in:443"},{"StreamName":"GunSlinger","StreamURL":"http://gunslingertv.org:8080"},{"StreamName":"VIP","StreamURL":"http://oven-cleaner.com:8080/"},{"StreamName":"Technoid","StreamURL":"http://capoisagod2021.org:8080"},{"StreamName":"Old Premium","StreamURL":"https://caporeds.online:443","username":"Dazg3012","expiaryDate":"12/30/2021"},{"StreamName":"??","StreamURL":"http://screamstreams.info:8080"},{"StreamName":"Gold","StreamURL":"http://catenamode.cf:8090"},{"StreamName":"??","StreamURL":"http://sulu.xyz:2086"},{"StreamName":"??","StreamURL":"http://bigbox.me.uk:2086"},{"StreamName":"??","StreamURL":"http://beautifilm.xyz:8080"},{"StreamName":"??","StreamURL":"https://hulks.xyz:443"},{"StreamName":"??","StreamURL":"http://mytv.digital:8080/"},{"StreamName":"??","StreamURL":"http://theonlinemedia.network:2052"},{"StreamName":"Gold","StreamURL":"http://server1.jforbes.club:8090"},{"StreamName":"??","StreamURL":"http://ths.viewdns.net:8080"},{"StreamName":"??","StreamURL":"http://vpsuk.store:8080"},{"StreamName":"??","StreamURL":"http://ac.mustardsubs.tk:8880"},{"StreamName":"??","StreamURL":"http://faithhosting.xyz:25461"},{"StreamName":"??","StreamURL":"http://ip365.cx:80"},{"StreamName":"??","StreamURL":"http://g132.caporeds.online:8080/"},{"StreamName":"??","StreamURL":"http://theonlinemedia.network:2052"},{"StreamName":"??","StreamURL":"http://beautifilm.xyz:8080"},{"StreamName":"??","StreamURL":"http://pimptv.dnsabr.com:8080"},{"StreamName":"??","StreamURL":"http://tavaratv.xyz:2095"},{"StreamName":"??","StreamURL":"http://cms-tan.media:8880"},{"StreamName":"??","StreamURL":"http://streamknighttv.xyz:8080"},{"StreamName":"??","StreamURL":"http://covidsucks.xyz:8080"},{"StreamName":"??","StreamURL":"http://fckbrexit.link:8080"},{"StreamName":"Gambler","StreamURL":"http://tv.realot.xyz:35001"},{"StreamName":"??","StreamURL":"http://www.tvxclnt.com:8080"},{"StreamName":"??","StreamURL":"http://iptv.satplex.co.uk:8080"},{"StreamName":"??","StreamURL":"http://37723998.to:2052"}]