new settingspage sidebar with general and moviesettings

This commit is contained in:
Lukas Heiligenbrunner 2020-06-25 22:43:26 +02:00
parent afae31618c
commit fdfb36bcd2
6 changed files with 203 additions and 60 deletions

View File

@ -0,0 +1,19 @@
import React from "react";
class GeneralSettings extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<>
Generalsettings here
</>
);
}
}
export default GeneralSettings;

View File

@ -0,0 +1,20 @@
import {shallow} from "enzyme";
import React from "react";
import GeneralSettings from "./GeneralSettings";
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
describe('<GeneralSettings/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<GeneralSettings/>);
wrapper.unmount();
});
});

View File

@ -0,0 +1,77 @@
import React from "react";
class MovieSettings extends React.Component {
constructor(props) {
super(props);
this.state = {
text: []
};
}
componentDidMount() {
if (this.myinterval) {
clearInterval(this.myinterval);
}
this.myinterval = setInterval(this.updateStatus, 1000);
}
componentWillUnmount() {
clearInterval(this.myinterval);
}
render() {
return (
<>
<button className='reindexbtn btn btn-success' onClick={() => {
this.startReindex()
}}>Reindex Movies
</button>
<div className='indextextarea'>{this.state.text.map(m => (
<div className='textarea-element'>{m}</div>
))}</div>
</>
);
}
startReindex() {
console.log("starting");
const updateRequest = new FormData();
// fetch all videos available
fetch('/api/extractvideopreviews.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
console.log("returned");
}))
.catch(() => {
console.log("no connection to backend");
});
if (this.myinterval) {
clearInterval(this.myinterval);
}
this.myinterval = setInterval(this.updateStatus, 1000);
console.log("sent");
}
updateStatus = () => {
const updateRequest = new FormData();
fetch('/api/extractionData.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.contentAvailable === true) {
console.log(result);
this.setState({
text: [...result.message.split("\n"),
...this.state.text]
});
} else {
clearInterval(this.myinterval);
}
}))
.catch(() => {
console.log("no connection to backend");
});
};
}
export default MovieSettings;

View File

@ -0,0 +1,20 @@
import {shallow} from "enzyme";
import React from "react";
import MovieSettings from "./MovieSettings";
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
describe('<MovieSettings/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<MovieSettings/>);
wrapper.unmount();
});
});

View File

@ -0,0 +1,39 @@
.SettingsSidebar {
padding-top: 20px;
float: left;
width: 10%;
background-color: #d3dcef;
min-height: calc(100vh - 56px);
min-width: 110px;
}
.SettingsSidebarTitle {
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: larger;
margin-bottom: 25px;
}
.SettingsContent {
float: left;
width: 80%;
padding-left: 30px;
padding-top: 30px;
}
.SettingSidebarElement {
margin: 10px 5px 5px;
padding: 5px;
background-color: #a8b2de;
text-align: center;
font-weight: bold;
}
.SettingSidebarElement:hover {
font-weight: bolder;
background-color: #7d8dd4;
box-shadow: #7d8dd4 0 0 0 5px;
transition: all 300ms;
cursor: pointer;
}

View File

@ -1,82 +1,50 @@
import React from "react"; import React from "react";
import PageTitle from "../../elements/PageTitle/PageTitle"; import MovieSettings from "./MovieSettings";
import GeneralSettings from "./GeneralSettings";
import "./SettingsPage.css"
class SettingsPage extends React.Component { class SettingsPage extends React.Component {
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.state = { this.state = {
text: [] currentpage: "general"
}; };
} }
updateStatus = () => { getContent() {
const updateRequest = new FormData(); switch (this.state.currentpage) {
fetch('/api/extractionData.php', {method: 'POST', body: updateRequest}) case "general":
.then((response) => response.json() return <GeneralSettings/>;
.then((result) => { case "movies":
if (result.contentAvailable === true) { return <MovieSettings/>;
console.log(result); default:
this.setState({ return "unknown button clicked";
text: [...result.message.split("\n"),
...this.state.text]
});
} else {
clearInterval(this.myinterval);
} }
}))
.catch(() => {
console.log("no connection to backend");
});
};
componentDidMount() {
if (this.myinterval) {
clearInterval(this.myinterval);
}
this.myinterval = setInterval(this.updateStatus, 1000);
}
componentWillUnmount() {
clearInterval(this.myinterval);
} }
render() { render() {
return ( return (
<div> <div>
<PageTitle <div className='SettingsSidebar'>
title='Settings Page' <div className='SettingsSidebarTitle'>Settings</div>
subtitle='todo'/> <div onClick={() => this.setState({currentpage: "general"})}
className='SettingSidebarElement'>General
<button className='reindexbtn btn btn-success' onClick={() => { </div>
this.startReindex() <div onClick={() => this.setState({currentpage: "movies"})}
}}>Reindex Movies className='SettingSidebarElement'>Movies
</button> </div>
<div className='indextextarea'>{this.state.text.map(m => ( <div onClick={() => this.setState({currentpage: "tv"})}
<div className='textarea-element'>{m}</div> className='SettingSidebarElement'>TV Shows
))}</div> </div>
</div>
<div className='SettingsContent'>
{this.getContent()}
</div>
</div> </div>
); );
} }
startReindex() {
console.log("starting");
const updateRequest = new FormData();
// fetch all videos available
fetch('/api/extractvideopreviews.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
console.log("returned");
}))
.catch(() => {
console.log("no connection to backend");
});
if (this.myinterval) {
clearInterval(this.myinterval);
}
this.myinterval = setInterval(this.updateStatus, 1000);
console.log("sent");
}
} }
export default SettingsPage; export default SettingsPage;