diff --git a/api/Tags.php b/api/Tags.php
new file mode 100644
index 0000000..1bd729c
--- /dev/null
+++ b/api/Tags.php
@@ -0,0 +1,36 @@
+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;
+ }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index dcd0c86..9a7c96b 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
"test": "react-scripts test",
"eject": "react-scripts eject"
},
- "proxy": "http://192.168.0.209",
+ "proxy": "http://192.168.0.248",
"homepage": "/",
"eslintConfig": {
"extends": "react-app"
diff --git a/src/css/CategoryPage.css b/src/css/CategoryPage.css
new file mode 100644
index 0000000..fb7be4a
--- /dev/null
+++ b/src/css/CategoryPage.css
@@ -0,0 +1,4 @@
+#categorycontent{
+ width: 70%;
+ float: left;
+}
\ No newline at end of file
diff --git a/src/css/Preview.css b/src/css/Preview.css
index 32146ea..02d8a83 100644
--- a/src/css/Preview.css
+++ b/src/css/Preview.css
@@ -4,6 +4,13 @@
text-align: center;
font-weight: bold;
max-width: 266px;
+}
+
+.tagpreviewtitle{
+ font-size: larger;
+}
+
+.videopreviewtitle{
font-size: smaller;
}
diff --git a/src/elements/Preview.js b/src/elements/Preview.js
index eb82fe2..744e424 100644
--- a/src/elements/Preview.js
+++ b/src/elements/Preview.js
@@ -39,7 +39,7 @@ class Preview extends React.Component {
render() {
return (
this.itemClick()}>
-
{this.state.name}
+
{this.state.name}
this.itemClick()}>
+
{this.props.name}
+
+
+
+
+
+
+
+ );
+ }
+
+ 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;
diff --git a/src/pages/CategoryPage.js b/src/pages/CategoryPage.js
index c3f1b9b..4f3da7d 100644
--- a/src/pages/CategoryPage.js
+++ b/src/pages/CategoryPage.js
@@ -1,13 +1,79 @@
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 {
+ constructor(props: P, context: any) {
+ super(props, context);
+
+ this.props = props;
+
+ this.state = {
+ loadedtags: []
+ };
+ }
+
+ componentDidMount() {
+ this.loadTags();
+ }
-class CategoryPage extends React.Component{
render() {
return (
<>
+
+ Category Page
+ {this.state.loadedtags ? this.state.loadedtags.length + " different Tags" : ""}
+
+
+
+ Infos:
+
+ Default Tags:
+ {
+ this.setState({tag: "All"});
+ this.fetchVideoData("all");
+ }}>All
+
+ FullHd
+ LowQuality
+ HD
+
+
+ {this.state.loadedtags ?
+ this.state.loadedtags.map((m) => (
+
+ )) :
+ "loading"
+ }
+
>
);
}
+
+ /**
+ * 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;
\ No newline at end of file