add style for actor tiles

render actors got from backend
backend test code to get actors

src/elements/Popups/AddActorPopup/AddActorPopup.js

@@ -0,0 +1,102 @@
+import PopupBase from '../PopupBase';
+import React from 'react';
+import ActorTile from '../../ActorTile/ActorTile';
+import style from './AddActorPopup.module.css';
+import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
+
+/**
+ * Popup for Adding a new Actor to a Video
+ */
+class AddActorPopup extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            contentDefault: true,
+            actors: undefined
+        };
+
+        this.tileClickHandler = this.tileClickHandler.bind(this);
+    }
+
+    render() {
+        return (
+            <>
+                {/* todo render actor tiles here and add search field*/}
+                <PopupBase title='Add new Actor to Video' onHide={this.props.onHide} banner={
+                    <button
+                        className={style.newactorbutton}
+                        onClick={() => {this.setState({contentDefault: false});}}>Create new Actor</button>}>
+                    {this.resolvePage()}
+                </PopupBase>
+            </>
+        );
+    }
+
+    componentDidMount() {
+        // fetch the available actors
+        this.loadActors();
+    }
+
+    /**
+     * selector for current showing popup page
+     * @returns {JSX.Element}
+     */
+    resolvePage() {
+        if (this.state.contentDefault) return (this.getContent());
+        else return (<NewActorPopupContent onHide={() => {
+            this.loadActors();
+            this.setState({contentDefault: true});
+        }}/>);
+    }
+
+    /**
+     * returns content for the newActor popup
+     * @returns {JSX.Element}
+     */
+    getContent() {
+        if (this.state.actors) {
+            return (<div>
+                {this.state.actors.map((el) => (<ActorTile actor={el} onClick={this.tileClickHandler}/>))}
+            </div>);
+        } else {
+            return (<div>somekind of loading</div>);
+        }
+    }
+
+    /**
+     * event handling for ActorTile Click
+     */
+    tileClickHandler(actorid) {
+        // fetch the available actors
+        const req = new FormData();
+        req.append('action', 'addActorToVideo');
+        req.append('actorid', actorid);
+        req.append('videoid', this.props.movie_id);
+
+        fetch('/api/actor.php', {method: 'POST', body: req})
+            .then((response) => response.json()
+                .then((result) => {
+                    if (result.result === 'success') {
+                        // return back to player page
+                        this.props.onHide();
+                    } else {
+                        console.error('an error occured while fetching actors');
+                        console.error(result);
+                    }
+                }));
+    }
+
+    loadActors() {
+        const req = new FormData();
+        req.append('action', 'getAllActors');
+
+        fetch('/api/actor.php', {method: 'POST', body: req})
+            .then((response) => response.json()
+                .then((result) => {
+                    this.setState({actors: result});
+                }));
+    }
+}
+
+export default AddActorPopup;

src/elements/Popups/AddActorPopup/AddActorPopup.module.css

@@ -0,0 +1,11 @@
+.newactorbutton {
+    border-radius: 5px;
+    border-width: 0;
+    color: white;
+    margin-right: 15px;
+    margin-top: 12px;
+    padding: 6px;
+    background-color: green;
+    width: 140px;
+    width: 140px;
+}

src/elements/Popups/AddActorPopup/AddActorPopup.test.js

@@ -0,0 +1,19 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import AddActorPopup from './AddActorPopup';
+
+describe('<AddActorPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<AddActorPopup/>);
+        wrapper.unmount();
+    });
+
+    // it('simulate change to other page', function () {
+    //     const wrapper = shallow(<AddActorPopup/>);
+    //
+    //     console.log(wrapper.find('PopupBase').dive().debug());
+    //
+    //
+    //     console.log(wrapper.debug());
+    // });
+});

src/elements/Popups/AddTagPopup/AddTagPopup.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import Tag from '../../Tag/Tag';
+import PopupBase from '../PopupBase';
+
+/**
+ * component creates overlay to add a new tag to a video
+ */
+class AddTagPopup extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {items: []};
+    }
+
+    componentDidMount() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getAllTags');
+
+        fetch('/api/tags.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json())
+            .then((result) => {
+                this.setState({
+                    items: result
+                });
+            });
+    }
+
+    render() {
+        return (
+            <PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide}>
+                {this.state.items ?
+                    this.state.items.map((i) => (
+                        <Tag onclick={() => {
+                            this.addTag(i.tag_id, i.tag_name);
+                        }}>{i.tag_name}</Tag>
+                    )) : null}
+            </PopupBase>
+        );
+    }
+
+    /**
+     * add a new tag to this video
+     * @param tagid tag id to add
+     * @param tagname tag name to add
+     */
+    addTag(tagid, tagname) {
+        console.log(this.props);
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'addTag');
+        updateRequest.append('id', tagid);
+        updateRequest.append('movieid', this.props.movie_id);
+
+        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);
+                    } else {
+                        this.props.submit(tagid, tagname);
+                    }
+                    this.props.onHide();
+                }));
+    }
+}
+
+export default AddTagPopup;

src/elements/Popups/AddTagPopup/AddTagPopup.module.css

@@ -0,0 +1,26 @@
+.popup {
+    border: 3px #3574fe solid;
+    border-radius: 18px;
+    height: 80%;
+    left: 20%;
+    opacity: 0.95;
+    position: absolute;
+    top: 10%;
+    width: 60%;
+    z-index: 2;
+}
+
+.header {
+    cursor: move;
+    font-size: x-large;
+    margin-left: 15px;
+    margin-top: 10px;
+    opacity: 1;
+}
+
+.content {
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 10px;
+    opacity: 1;
+}

src/elements/Popups/AddTagPopup/AddTagPopup.test.js

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import {shallow} from 'enzyme';
+import '@testing-library/jest-dom';
+
+import AddTagPopup from './AddTagPopup';
+
+describe('<AddTagPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<AddTagPopup/>);
+        wrapper.unmount();
+    });
+
+    it('test tag insertion', function () {
+        const wrapper = shallow(<AddTagPopup/>);
+        wrapper.setState({
+            items: [{tag_id: 1, tag_name: 'test'}, {tag_id: 2, tag_name: 'ee'}]
+        }, () => {
+            expect(wrapper.find('Tag')).toHaveLength(2);
+            expect(wrapper.find('Tag').first().dive().text()).toBe('test');
+        });
+    });
+
+    it('test tag click', function () {
+        const wrapper = shallow(<AddTagPopup/>);
+        wrapper.instance().addTag = jest.fn();
+
+        wrapper.setState({
+            items: [{tag_id: 1, tag_name: 'test'}]
+        }, () => {
+            wrapper.find('Tag').first().dive().simulate('click');
+            expect(wrapper.instance().addTag).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    it('test addtag', done => {
+        const wrapper = shallow(<AddTagPopup/>);
+
+        global.fetch = prepareFetchApi({result: 'success'});
+
+        wrapper.setProps({
+            submit: jest.fn(() => {}),
+            onHide: jest.fn()
+        }, () => {
+            wrapper.instance().addTag(1, 'test');
+
+            expect(global.fetch).toHaveBeenCalledTimes(1);
+        });
+
+        process.nextTick(() => {
+            expect(wrapper.instance().props.submit).toHaveBeenCalledTimes(1);
+            expect(wrapper.instance().props.onHide).toHaveBeenCalledTimes(1);
+
+            global.fetch.mockClear();
+            done();
+        });
+    });
+
+    it('test failing addTag', done => {
+        const wrapper = shallow(<AddTagPopup/>);
+
+        global.fetch = prepareFetchApi({result: 'fail'});
+
+        wrapper.setProps({
+            submit: jest.fn(() => {}),
+            onHide: jest.fn()
+        }, () => {
+            wrapper.instance().addTag(1, 'test');
+
+            expect(global.fetch).toHaveBeenCalledTimes(1);
+        });
+
+        process.nextTick(() => {
+            expect(wrapper.instance().props.submit).toHaveBeenCalledTimes(0);
+            expect(wrapper.instance().props.onHide).toHaveBeenCalledTimes(1);
+
+            global.fetch.mockClear();
+            done();
+        });
+    });
+});

src/elements/Popups/NewActorPopup/NewActorPopup.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PopupBase from '../PopupBase';
+import style from './NewActorPopup.module.css';
+
+/**
+ * creates modal overlay to define a new Tag
+ */
+class NewActorPopup extends React.Component {
+    render() {
+        return (
+            <PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'>
+                <NewActorPopupContent onHide={this.props.onHide}/>
+            </PopupBase>
+        );
+    }
+}
+
+export class NewActorPopupContent extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.props = props;
+    }
+
+    render() {
+        return (
+            <>
+                <div>
+                    <input type='text' placeholder='Actor Name' onChange={(v) => {
+                        this.value = v.target.value;
+                    }}/></div>
+                <button className={style.savebtn} onClick={() => this.storeselection()}>Save</button>
+            </>
+        );
+    }
+
+    /**
+     * store the filled in form to the backend
+     */
+    storeselection() {
+        // check if user typed in name
+        if (this.value === '' || this.value === undefined) return;
+
+        const req = new FormData();
+        req.append('action', 'createActor');
+        req.append('actorname', this.value);
+
+        fetch('/api/actor.php', {method: 'POST', body: req})
+            .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 NewActorPopup;

src/elements/Popups/NewActorPopup/NewActorPopup.module.css

@@ -0,0 +1,8 @@
+.savebtn {
+    background-color: greenyellow;
+    border: 0;
+    border-radius: 4px;
+    float: right;
+    margin-top: 30px;
+    padding: 3px;
+}

src/elements/Popups/NewActorPopup/NewActorPopup.test.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import {shallow} from 'enzyme';
+import '@testing-library/jest-dom';
+import NewActorPopup, {NewActorPopupContent} from './NewActorPopup';
+
+describe('<NewActorPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<NewActorPopup/>);
+        wrapper.unmount();
+    });
+});
+
+describe('<NewActorPopupContent/>', () => {
+    it('renders without crashing', function () {
+        const wrapper = shallow(<NewActorPopupContent/>);
+        wrapper.unmount();
+    });
+
+    it('simulate button click', function () {
+        const wrapper = shallow(<NewActorPopupContent/>);
+
+        // manually set typed in actorname
+        wrapper.instance().value = 'testactorname';
+
+        global.fetch = prepareFetchApi({});
+
+        expect(global.fetch).toBeCalledTimes(0);
+        wrapper.find('button').simulate('click');
+
+        // fetch should have been called once now
+        expect(global.fetch).toBeCalledTimes(1);
+    });
+
+    it('test not allowing request if textfield is empty', function () {
+        const wrapper = shallow(<NewActorPopupContent/>);
+
+        global.fetch = prepareFetchApi({});
+
+        expect(global.fetch).toBeCalledTimes(0);
+        wrapper.find('button').simulate('click');
+
+        // fetch should not be called now
+        expect(global.fetch).toBeCalledTimes(0);
+    });
+
+    it('test input change', function () {
+        const wrapper = shallow(<NewActorPopupContent/>);
+
+        wrapper.find('input').simulate('change', {target: {value: 'testinput'}});
+
+        expect(wrapper.instance().value).toBe('testinput');
+    });
+});

src/elements/Popups/NewTagPopup/NewTagPopup.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PopupBase from '../PopupBase';
+import style from './NewTagPopup.module.css';
+
+/**
+ * creates modal overlay to define a new Tag
+ */
+class NewTagPopup extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.props = props;
+    }
+
+    render() {
+        return (
+            <PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'>
+                <div><input type='text' placeholder='Tagname' onChange={(v) => {
+                    this.value = v.target.value;
+                }}/></div>
+                <button className={style.savebtn} onClick={() => this.storeselection()}>Save</button>
+            </PopupBase>
+        );
+    }
+
+    /**
+     * store the filled in form to the backend
+     */
+    storeselection() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'createTag');
+        updateRequest.append('tagname', this.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;

src/elements/Popups/NewTagPopup/NewTagPopup.module.css

@@ -0,0 +1,8 @@
+.savebtn {
+    background-color: greenyellow;
+    border: 0;
+    border-radius: 4px;
+    float: right;
+    margin-top: 30px;
+    padding: 3px;
+}

src/elements/Popups/NewTagPopup/NewTagPopup.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {shallow} from 'enzyme';
+import '@testing-library/jest-dom';
+import NewTagPopup from './NewTagPopup';
+
+describe('<NewTagPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<NewTagPopup/>);
+        wrapper.unmount();
+    });
+
+    it('test storeseletion click event', done => {
+        global.fetch = prepareFetchApi({});
+
+        const func = jest.fn();
+
+        const wrapper = shallow(<NewTagPopup/>);
+        wrapper.setProps({
+            onHide: () => {
+                func();
+            }
+        });
+
+        wrapper.find('button').simulate('click');
+        expect(global.fetch).toHaveBeenCalledTimes(1);
+
+        process.nextTick(() => {
+            //callback to close window should have called
+            expect(func).toHaveBeenCalledTimes(1);
+
+            global.fetch.mockClear();
+            done();
+        });
+    });
+});

src/elements/Popups/PopupBase.js

@@ -0,0 +1,122 @@
+import GlobalInfos from '../../GlobalInfos';
+import style from './PopupBase.module.css';
+import {Line} from '../PageTitle/PageTitle';
+import React from 'react';
+
+/**
+ * wrapper class for generic types of popups
+ */
+class PopupBase extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {items: []};
+
+        this.wrapperRef = React.createRef();
+
+        this.handleClickOutside = this.handleClickOutside.bind(this);
+        this.keypress = this.keypress.bind(this);
+
+        // parse style props
+        this.framedimensions = {
+            width: (this.props.width ? this.props.width : undefined),
+            height: (this.props.height ? this.props.height : undefined)
+        };
+    }
+
+    componentDidMount() {
+        document.addEventListener('mousedown', this.handleClickOutside);
+        document.addEventListener('keyup', this.keypress);
+
+        // add element drag drop events
+        if (this.wrapperRef != null) {
+            this.dragElement();
+        }
+    }
+
+    componentWillUnmount() {
+        // remove the appended listeners
+        document.removeEventListener('mousedown', this.handleClickOutside);
+        document.removeEventListener('keyup', this.keypress);
+    }
+
+    render() {
+        const themeStyle = GlobalInfos.getThemeStyle();
+        return (
+            <div style={this.framedimensions} className={[style.popup, themeStyle.thirdbackground].join(' ')} ref={this.wrapperRef}>
+                <div className={style.header}>
+                    <div className={[style.title, themeStyle.textcolor].join(' ')}>{this.props.title}</div>
+                    <div className={style.banner}>{this.props.banner}</div>
+                </div>
+
+                <Line/>
+                <div className={style.content}>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+
+    /**
+     * Alert if clicked on outside of element
+     */
+    handleClickOutside(event) {
+        if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
+            this.props.onHide();
+        }
+    }
+
+    /**
+     * key event handling
+     * @param event keyevent
+     */
+    keypress(event) {
+        // hide if escape is pressed
+        if (event.key === 'Escape') {
+            this.props.onHide();
+        }
+    }
+
+    /**
+     * make the element drag and droppable
+     */
+    dragElement() {
+        let xOld = 0, yOld = 0;
+
+        const elmnt = this.wrapperRef.current;
+        if(elmnt === null) return;
+
+        elmnt.firstChild.onmousedown = dragMouseDown;
+
+
+        function dragMouseDown(e) {
+            e.preventDefault();
+            // get the mouse cursor position at startup:
+            xOld = e.clientX;
+            yOld = e.clientY;
+            document.onmouseup = closeDragElement;
+            // call a function whenever the cursor moves:
+            document.onmousemove = elementDrag;
+        }
+
+        function elementDrag(e) {
+            e.preventDefault();
+            // calculate the new cursor position:
+            const dx = xOld - e.clientX;
+            const dy = yOld - e.clientY;
+            xOld = e.clientX;
+            yOld = e.clientY;
+            // set the element's new position:
+            elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
+            elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
+        }
+
+        function closeDragElement() {
+            // stop moving when mouse button is released:
+            document.onmouseup = null;
+            document.onmousemove = null;
+        }
+    }
+}
+
+export default PopupBase;

src/elements/Popups/PopupBase.module.css

@@ -0,0 +1,43 @@
+.popup {
+    border: 3px #3574fe solid;
+    border-radius: 18px;
+    height: 80%;
+    left: 20%;
+    opacity: 0.95;
+    position: absolute;
+    top: 10%;
+    width: 60%;
+    z-index: 2;
+}
+
+.header{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+}
+
+.title {
+    cursor: move;
+    font-size: x-large;
+    margin-left: 15px;
+    margin-top: 10px;
+    opacity: 1;
+    float: left;
+    width: 60%;
+}
+
+.banner {
+    width: 40%;
+    float: left;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+.content {
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 10px;
+    opacity: 1;
+}

src/elements/Popups/PopupBase.test.js

@@ -0,0 +1,12 @@
+import {shallow} from "enzyme";
+import React from "react";
+import PopupBase from "./PopupBase";
+
+describe('<PopupBase/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<PopupBase/>);
+        wrapper.unmount();
+    });
+
+
+});