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 {Form, Col, Button} from "react-bootstrap";
import "./GeneralSettings.css"
import style from "./GeneralSettings.module.css"
class GeneralSettings extends React.Component {
constructor(props) {
@ -28,7 +28,7 @@ class GeneralSettings extends React.Component {
render() {
return (
<>
<div className='GeneralForm'>
<div className={style.GeneralForm}>
<Form onSubmit={(e) => {
e.preventDefault();
this.saveSettings();
@ -61,6 +61,10 @@ class GeneralSettings extends React.Component {
</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">
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 "./MovieSettings.css"
import style from "./MovieSettings.module.css"
class MovieSettings extends React.Component {
constructor(props) {
super(props);
this.state = {
text: []
text: [],
startbtnDisabled: false
};
this.startbtn = React.createRef();
}
componentDidMount() {
@ -26,11 +25,11 @@ class MovieSettings extends React.Component {
render() {
return (
<>
<button ref={this.startbtn} className='reindexbtn btn btn-success' onClick={() => {
<button disabled={this.state.startbtnDisabled} className='reindexbtn btn btn-success' onClick={() => {
this.startReindex()
}}>Reindex Movies
</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>
</>
@ -41,8 +40,7 @@ class MovieSettings extends React.Component {
// clear output text before start
this.setState({text: []});
const btn = this.startbtn.current;
btn.disabled = true;
this.setState({startbtnDisabled: true});
console.log("starting");
const updateRequest = new FormData();
@ -60,7 +58,6 @@ class MovieSettings extends React.Component {
clearInterval(this.myinterval);
}
this.myinterval = setInterval(this.updateStatus, 1000);
console.log("sent");
}
updateStatus = () => {
@ -80,8 +77,7 @@ class MovieSettings extends React.Component {
// clear refresh interval if no content available
clearInterval(this.myinterval);
const btn = this.startbtn.current;
btn.disabled = false;
this.setState({startbtnDisabled: false});
}
}))
.catch(() => {

View File

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