use css modules

add a mediacenter-name field
use state for reindex-btn greyout
This commit is contained in:
lukas 2020-07-08 19:33:23 +02:00
parent 24a29369b4
commit 75ae0d7d8b
7 changed files with 31 additions and 26 deletions

View File

@ -1,3 +0,0 @@
.GeneralForm {
width: 60%;
}

View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import {Form, Col, Button} from "react-bootstrap"; import {Form, Col, Button} from "react-bootstrap";
import "./GeneralSettings.css" import style from "./GeneralSettings.module.css"
class GeneralSettings extends React.Component { class GeneralSettings extends React.Component {
constructor(props) { constructor(props) {
@ -28,7 +28,7 @@ class GeneralSettings extends React.Component {
render() { render() {
return ( return (
<> <>
<div className='GeneralForm'> <div className={style.GeneralForm}>
<Form onSubmit={(e) => { <Form onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
this.saveSettings(); this.saveSettings();
@ -61,6 +61,10 @@ class GeneralSettings extends React.Component {
</Form.Group> : null </Form.Group> : null
} }
<Form.Group className={style.mediacenternameform} controlId="passwordfield">
<Form.Label>The name of the Mediacenter</Form.Label>
<Form.Control type="text" placeholder="Mediacentername"/>
</Form.Group>
<Button variant="primary" type="submit"> <Button variant="primary" type="submit">
Submit Submit

View File

@ -0,0 +1,8 @@
.GeneralForm {
width: 60%;
}
.mediacenternameform{
margin-top: 25px;
width: 40%;
}

View File

@ -1,15 +1,14 @@
import React from "react"; import React from "react";
import "./MovieSettings.css" import style from "./MovieSettings.module.css"
class MovieSettings extends React.Component { class MovieSettings extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
text: [] text: [],
startbtnDisabled: false
}; };
this.startbtn = React.createRef();
} }
componentDidMount() { componentDidMount() {
@ -26,11 +25,11 @@ class MovieSettings extends React.Component {
render() { render() {
return ( return (
<> <>
<button ref={this.startbtn} className='reindexbtn btn btn-success' onClick={() => { <button disabled={this.state.startbtnDisabled} className='reindexbtn btn btn-success' onClick={() => {
this.startReindex() this.startReindex()
}}>Reindex Movies }}>Reindex Movies
</button> </button>
<div className='indextextarea'>{this.state.text.map(m => ( <div className={style.indextextarea}>{this.state.text.map(m => (
<div className='textarea-element'>{m}</div> <div className='textarea-element'>{m}</div>
))}</div> ))}</div>
</> </>
@ -41,8 +40,7 @@ class MovieSettings extends React.Component {
// clear output text before start // clear output text before start
this.setState({text: []}); this.setState({text: []});
const btn = this.startbtn.current; this.setState({startbtnDisabled: true});
btn.disabled = true;
console.log("starting"); console.log("starting");
const updateRequest = new FormData(); const updateRequest = new FormData();
@ -60,7 +58,6 @@ class MovieSettings extends React.Component {
clearInterval(this.myinterval); clearInterval(this.myinterval);
} }
this.myinterval = setInterval(this.updateStatus, 1000); this.myinterval = setInterval(this.updateStatus, 1000);
console.log("sent");
} }
updateStatus = () => { updateStatus = () => {
@ -80,8 +77,7 @@ class MovieSettings extends React.Component {
// clear refresh interval if no content available // clear refresh interval if no content available
clearInterval(this.myinterval); clearInterval(this.myinterval);
const btn = this.startbtn.current; this.setState({startbtnDisabled: false});
btn.disabled = false;
} }
})) }))
.catch(() => { .catch(() => {

View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import MovieSettings from "./MovieSettings"; import MovieSettings from "./MovieSettings";
import GeneralSettings from "./GeneralSettings"; import GeneralSettings from "./GeneralSettings";
import "./SettingsPage.css" import style from "./SettingsPage.module.css"
class SettingsPage extends React.Component { class SettingsPage extends React.Component {
@ -29,19 +29,19 @@ class SettingsPage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<div className='SettingsSidebar'> <div className={style.SettingsSidebar}>
<div className='SettingsSidebarTitle'>Settings</div> <div className={style.SettingsSidebarTitle}>Settings</div>
<div onClick={() => this.setState({currentpage: "general"})} <div onClick={() => this.setState({currentpage: "general"})}
className='SettingSidebarElement'>General className={style.SettingSidebarElement}>General
</div> </div>
<div onClick={() => this.setState({currentpage: "movies"})} <div onClick={() => this.setState({currentpage: "movies"})}
className='SettingSidebarElement'>Movies className={style.SettingSidebarElement}>Movies
</div> </div>
<div onClick={() => this.setState({currentpage: "tv"})} <div onClick={() => this.setState({currentpage: "tv"})}
className='SettingSidebarElement'>TV Shows className={style.SettingSidebarElement}>TV Shows
</div> </div>
</div> </div>
<div className='SettingsContent'> <div className={style.SettingsContent}>
{this.getContent()} {this.getContent()}
</div> </div>
</div> </div>