created new category page

load random picture of category to tags list
This commit is contained in:
Lukas Heiligenbrunner 2020-06-07 15:48:27 +02:00
parent 516949dc65
commit 1459abf205
6 changed files with 161 additions and 3 deletions

36
api/Tags.php Normal file
View File

@ -0,0 +1,36 @@
<?php
require 'Database.php';
$conn = Database::getInstance()->getConnection();
if (isset($_POST['action'])) {
$action = $_POST['action'];
switch ($action) {
case "getAllTags":
$query = "SELECT tag_name,tag_id from tags";
$result = $conn->query($query);
$rows = array();
while ($r = mysqli_fetch_assoc($result)) {
array_push($rows, $r);
}
echo json_encode($rows);
break;
case "getRandomTagPreview":
$id = $_POST['id'];
$query = "SELECT thumbnail from videos
INNER JOIN video_tags vt on videos.movie_id = vt.video_id
WHERE tag_id='$id'
ORDER BY RAND()
LIMIT 1";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
echo $r['thumbnail'];
break;
}
}

View File

@ -19,7 +19,7 @@
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
}, },
"proxy": "http://192.168.0.209", "proxy": "http://192.168.0.248",
"homepage": "/", "homepage": "/",
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "extends": "react-app"

4
src/css/CategoryPage.css Normal file
View File

@ -0,0 +1,4 @@
#categorycontent{
width: 70%;
float: left;
}

View File

@ -4,6 +4,13 @@
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
max-width: 266px; max-width: 266px;
}
.tagpreviewtitle{
font-size: larger;
}
.videopreviewtitle{
font-size: smaller; font-size: smaller;
} }

View File

@ -39,7 +39,7 @@ class Preview extends React.Component {
render() { render() {
return ( return (
<div className='videopreview' onClick={() => this.itemClick()}> <div className='videopreview' onClick={() => this.itemClick()}>
<div className='previewtitle'>{this.state.name}</div> <div className='previewtitle videopreviewtitle'>{this.state.name}</div>
<div className='previewpic'> <div className='previewpic'>
<img className='previewimage' <img className='previewimage'
src={this.state.previewpicture} src={this.state.previewpicture}
@ -61,4 +61,49 @@ class Preview extends React.Component {
} }
} }
export class TagPreview extends React.Component {
constructor(props: P, context: any) {
super(props, context);
this.props = props;
this.state = {
thumbnail: null
};
}
componentDidMount() {
this.loadPreview();
}
render() {
return (
<div className='videopreview' onClick={() => this.itemClick()}>
<div className='previewtitle tagpreviewtitle'>{this.props.name}</div>
<div className='previewpic'>
<img className='previewimage'
src={this.state.thumbnail}
alt='Pic loading.'/>
</div>
<div className='previewbottom'>
</div>
</div>
);
}
loadPreview() {
const updateRequest = new FormData();
updateRequest.append('action', 'getRandomTagPreview');
updateRequest.append('id', this.props.tag_id);
fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.text())
.then((result) => {
this.setState({thumbnail: result});
});
}
}
export default Preview; export default Preview;

View File

@ -1,13 +1,79 @@
import React from "react"; import React from "react";
import SideBar from "../elements/SideBar";
import Tag from "../elements/Tag";
import "../css/CategoryPage.css"
import {TagPreview} from "../elements/Preview";
class CategoryPage extends React.Component { class CategoryPage extends React.Component {
constructor(props: P, context: any) {
super(props, context);
this.props = props;
this.state = {
loadedtags: []
};
}
componentDidMount() {
this.loadTags();
}
render() { render() {
return ( return (
<> <>
<div className='pageheader'>
<span className='pageheadertitle'>Category Page</span>
<span
className='pageheadersubtitle'>{this.state.loadedtags ? this.state.loadedtags.length + " different Tags" : ""}</span>
<hr/>
</div>
<SideBar>
<div className='sidebartitle'>Infos:</div>
<hr/>
<div className='sidebartitle'>Default Tags:</div>
<Tag onClick={() => {
this.setState({tag: "All"});
this.fetchVideoData("all");
}}>All
</Tag>
<Tag>FullHd</Tag>
<Tag>LowQuality</Tag>
<Tag>HD</Tag>
</SideBar>
<div id='categorycontent'>
{this.state.loadedtags ?
this.state.loadedtags.map((m) => (
<TagPreview
name={m.tag_name}
tag_id={m.tag_id}/>
)) :
"loading"
}
</div>
</> </>
); );
} }
/**
* load all available tags from db.
*/
loadTags() {
const updateRequest = new FormData();
updateRequest.append('action', 'getAllTags');
// fetch all videos available
fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.setState({loadedtags: result});
}))
.catch(() => {
console.log("no connection to backend");
});
}
} }
export default CategoryPage; export default CategoryPage;