From fdfb36bcd24cf805b2e5d51c9cfff051d0bd5fa9 Mon Sep 17 00:00:00 2001 From: Lukas Heiligenbrunner Date: Thu, 25 Jun 2020 22:43:26 +0200 Subject: [PATCH] new settingspage sidebar with general and moviesettings --- src/pages/SettingsPage/GeneralSettings.js | 19 ++++ .../SettingsPage/GeneralSettings.test.js | 20 +++++ src/pages/SettingsPage/MovieSettings.js | 77 ++++++++++++++++ src/pages/SettingsPage/MovieSettings.test.js | 20 +++++ src/pages/SettingsPage/SettingsPage.css | 39 ++++++++ src/pages/SettingsPage/SettingsPage.js | 88 ++++++------------- 6 files changed, 203 insertions(+), 60 deletions(-) create mode 100644 src/pages/SettingsPage/GeneralSettings.js create mode 100644 src/pages/SettingsPage/GeneralSettings.test.js create mode 100644 src/pages/SettingsPage/MovieSettings.js create mode 100644 src/pages/SettingsPage/MovieSettings.test.js create mode 100644 src/pages/SettingsPage/SettingsPage.css diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js new file mode 100644 index 0000000..e33d38f --- /dev/null +++ b/src/pages/SettingsPage/GeneralSettings.js @@ -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; \ No newline at end of file diff --git a/src/pages/SettingsPage/GeneralSettings.test.js b/src/pages/SettingsPage/GeneralSettings.test.js new file mode 100644 index 0000000..88d2f6a --- /dev/null +++ b/src/pages/SettingsPage/GeneralSettings.test.js @@ -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('', function () { + it('renders without crashing ', function () { + const wrapper = shallow(); + wrapper.unmount(); + }); + + +}); diff --git a/src/pages/SettingsPage/MovieSettings.js b/src/pages/SettingsPage/MovieSettings.js new file mode 100644 index 0000000..5ff54aa --- /dev/null +++ b/src/pages/SettingsPage/MovieSettings.js @@ -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 ( + <> + +
{this.state.text.map(m => ( +
{m}
+ ))}
+ + ); + } + + 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; \ No newline at end of file diff --git a/src/pages/SettingsPage/MovieSettings.test.js b/src/pages/SettingsPage/MovieSettings.test.js new file mode 100644 index 0000000..61d7821 --- /dev/null +++ b/src/pages/SettingsPage/MovieSettings.test.js @@ -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('', function () { + it('renders without crashing ', function () { + const wrapper = shallow(); + wrapper.unmount(); + }); + + +}); diff --git a/src/pages/SettingsPage/SettingsPage.css b/src/pages/SettingsPage/SettingsPage.css new file mode 100644 index 0000000..216e5e2 --- /dev/null +++ b/src/pages/SettingsPage/SettingsPage.css @@ -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; +} \ No newline at end of file diff --git a/src/pages/SettingsPage/SettingsPage.js b/src/pages/SettingsPage/SettingsPage.js index 776dae8..44aa747 100644 --- a/src/pages/SettingsPage/SettingsPage.js +++ b/src/pages/SettingsPage/SettingsPage.js @@ -1,82 +1,50 @@ 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 { constructor(props, context) { super(props, context); + this.state = { - text: [] + currentpage: "general" }; } - 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"); - }); - }; - - componentDidMount() { - if (this.myinterval) { - clearInterval(this.myinterval); + getContent() { + switch (this.state.currentpage) { + case "general": + return ; + case "movies": + return ; + default: + return "unknown button clicked"; } - this.myinterval = setInterval(this.updateStatus, 1000); - } - - componentWillUnmount() { - clearInterval(this.myinterval); } render() { return (
- - - -
{this.state.text.map(m => ( -
{m}
- ))}
+
+
Settings
+
this.setState({currentpage: "general"})} + className='SettingSidebarElement'>General +
+
this.setState({currentpage: "movies"})} + className='SettingSidebarElement'>Movies +
+
this.setState({currentpage: "tv"})} + className='SettingSidebarElement'>TV Shows +
+
+
+ {this.getContent()} +
); } - - 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;