parse genres from tmdb

popup to add a new tag manually
added some key props to prevent warnings
This commit is contained in:
2020-06-08 17:52:58 +02:00
parent 21ccd165c2
commit 3402c7fa3b
10 changed files with 194 additions and 19 deletions

View File

@ -50,7 +50,7 @@ class AddTagPopup extends React.Component {
<DropdownButton id="dropdown-basic-button" title={this.state.selection.name}>
{this.state.items ?
this.state.items.map((i) => (
<Dropdown.Item onClick={() => {
<Dropdown.Item key={i.tag_name} onClick={() => {
this.setState({selection: {name: i.tag_name, id: i.tag_id}})
}}>{i.tag_name}</Dropdown.Item>
)) :

View File

@ -0,0 +1,76 @@
import React from "react";
import Modal from 'react-bootstrap/Modal'
import {Form} from "react-bootstrap";
class NewTagPopup extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
}
componentDidMount() {
const updateRequest = new FormData();
updateRequest.append('action', 'getAllTags');
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
this.setState({
items: result
});
});
}
render() {
return (
<>
<Modal
show={this.props.show}
onHide={this.props.onHide}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Create a new Tag!
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group>
<Form.Label>Tag Name:</Form.Label>
<Form.Control id='namefield' type="text" placeholder="Enter Tag name" />
<Form.Text className="text-muted">
This Tag will automatically show up on category page.
</Form.Text>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<button className='btn btn-primary' onClick={() => {
this.storeselection();
}}>Add
</button>
</Modal.Footer>
</Modal>
</>
);
}
storeselection() {
const updateRequest = new FormData();
updateRequest.append('action', 'createTag');
updateRequest.append('tagname', document.getElementById("namefield").value);
fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
if (result.result !== "success") {
console.log("error occured while writing to db -- todo error handling");
console.log(result.result);
}
this.props.onHide();
});
}
}
export default NewTagPopup;

View File

@ -85,7 +85,7 @@ export class TagPreview extends React.Component {
this.props.categorybinding(
<VideoContainer
data={result}
viewbinding={this.props.viewbinding}/>
viewbinding={this.props.viewbinding}/>,tag
);
}))
.catch(() => {

View File

@ -3,6 +3,7 @@ import SideBar from "../elements/SideBar";
import Tag from "../elements/Tag";
import {TagPreview} from "../elements/Preview";
import NewTagPopup from "../elements/NewTagPopup";
class CategoryPage extends React.Component {
constructor(props, context) {
@ -12,7 +13,7 @@ class CategoryPage extends React.Component {
this.state = {
loadedtags: [],
selected: false
selected: null
};
}
@ -24,9 +25,9 @@ class CategoryPage extends React.Component {
return (
<>
<div className='pageheader'>
<span className='pageheadertitle'>Category Page</span>
<span className='pageheadertitle'>Categories</span>
<span
className='pageheadersubtitle'>{this.state.loadedtags ? this.state.loadedtags.length + " different Tags" : ""}</span>
className='pageheadersubtitle'>{!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}</span>
<hr/>
</div>
<SideBar>
@ -36,7 +37,10 @@ class CategoryPage extends React.Component {
<Tag>LowQuality</Tag>
<Tag>HD</Tag>
<hr/>
<button className='btn btn-success'>Add a new Tag!</button>
<button className='btn btn-success' onClick={() => {
this.setState({popupvisible: true})
}}>Add a new Tag!
</button>
</SideBar>
{!this.state.selected ?
@ -44,6 +48,7 @@ class CategoryPage extends React.Component {
{this.state.loadedtags ?
this.state.loadedtags.map((m) => (
<TagPreview
key={m.tag_name}
name={m.tag_name}
tag_id={m.tag_id}
viewbinding={this.props.viewbinding}
@ -51,18 +56,33 @@ class CategoryPage extends React.Component {
)) :
"loading"}
</div>) :
this.selectionelements
<>
{this.selectionelements}
<button className="btn btn-success" onClick={this.loadCategoryPageDefault}>Back</button>
</>
}
{this.state.popupvisible ?
<NewTagPopup show={this.state.popupvisible}
onHide={() => {
this.setState({popupvisible: false});
this.loadTags();
}}/> :
null
}
</>
);
}
setPage = (element) => {
setPage = (element, tagname) => {
this.selectionelements = element;
this.setState({selected: true});
this.setState({selected: tagname});
};
loadCategoryPageDefault = () => {
this.setState({selected: null});
};
/**

View File

@ -66,7 +66,7 @@ class Player extends React.Component {
<hr/>
<div className='sidebartitle'>Tags:</div>
{this.state.tags.map((m) => (
<Tag>{m.tag_name}</Tag>
<Tag key={m.tag_name}>{m.tag_name}</Tag>
))}
</SideBar>

View File

@ -50,7 +50,7 @@ class SettingsPage extends React.Component {
<hr/>
</div>
<button onClick={() => {
<button className='btn btn-success' onClick={() => {
this.startReindex()
}}>Reindex Movies
</button>