lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

use flexbox to wrap settings tiles correctly

Browse Source 
new icon for different tags
ignore test files in codeclimate test
This commit is contained in:
Lukas Heiligenbrunner
2020-10-19 21:12:07 +00:00
parent b21d2a29cc
commit 28f3d6db70
22 changed files with 307 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.module.css
View File

@@ -37,9 +37,8 @@
}
.navcontainer {
border-bottom-width: 2px;
border-width: 0 0 2px 0;
border-style: dotted;
border-width: 0;
padding-bottom: 40px;
padding-top: 20px;

4
src/elements/AddTagPopup/AddTagPopup.test.js
View File

@@ -39,7 +39,7 @@ describe('<AddTagPopup/>', function () {
global.fetch = prepareFetchApi({result: "success"});
wrapper.setProps({
submit: jest.fn((arg1, arg2) => {}),
submit: jest.fn(() => {}),
onHide: jest.fn()
}, () => {
wrapper.instance().addTag(1, "test");
@@ -62,7 +62,7 @@ describe('<AddTagPopup/>', function () {
global.fetch = prepareFetchApi({result: "fail"});
wrapper.setProps({
submit: jest.fn((arg1, arg2) => {}),
submit: jest.fn(() => {}),
onHide: jest.fn()
}, () => {
wrapper.instance().addTag(1, "test");

34
src/elements/InfoHeaderItem/InfoHeaderItem.js Normal file
View File

@@ -0,0 +1,34 @@
import React from "react";
import style from './InfoHeaderItem.module.css';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {Spinner} from "react-bootstrap";
/**
* a component to display one of the short quickinfo tiles on dashboard
*/
class InfoHeaderItem extends React.Component {
render() {
return (
<div onClick={() => {
// call clicklistener if defined
if (this.props.onClick != null) this.props.onClick();
}} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>
<div className={style.icon}>
<FontAwesomeIcon style={{
verticalAlign: "middle",
lineHeight: "130px"
}} icon={this.props.icon} size='5x'/>
</div>
{this.props.text !== null && this.props.text !== undefined ?
<>
<div className={style.maintext}>{this.props.text}</div>
<div className={style.subtext}>{this.props.subtext}</div>
</>
: <span className={style.loadAnimation}><Spinner animation='border'/></span>
}
</div>
);
}
}
export default InfoHeaderItem;

58
src/elements/InfoHeaderItem/InfoHeaderItem.module.css Normal file
View File

@@ -0,0 +1,58 @@
/* styling for tile */
.infoheaderitem {
background-color: lightblue;
border-radius: 5px;
flex: calc(25% - 10px);
margin: 5px;
}
/* On screens that are 1317px wide or less, go from four columns to two columns */
@media screen and (max-width: 1317px) {
.infoheaderitem {
flex: calc(50% - 10px);
}
}
/* change opacity of icon when hovering whole tile */
.infoheaderitem:hover .icon {
opacity: 0.75;
transition: opacity linear 0.4s;
}
/* change cursor on hover */
.infoheaderitem:hover {
cursor: pointer;
}
.icon {
float: left;
height: 130px;
margin-left: 5px;
margin-right: 17px;
margin-top: 20px;
opacity: 0.5;
text-align: center;
width: 30%;
}
/* big main text in tile */
.maintext {
font-size: x-large;
font-weight: bold;
margin-top: 30px;
}
/* small subtext in tile */
.subtext {
font-size: large;
margin-top: 5px;
opacity: 0.7;
}
.loadAnimation {
display: inline-block;
line-height: 145px;
margin-left: calc(25% - 15px);
vertical-align: middle;
}

43
src/elements/InfoHeaderItem/InfoHeaderItem.test.js Normal file
View File

@@ -0,0 +1,43 @@
import {shallow} from "enzyme";
import React from "react";
import InfoHeaderItem from "./InfoHeaderItem";
describe('<InfoHeaderItem/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<InfoHeaderItem/>);
wrapper.unmount();
});
it('renders correct text', function () {
const wrapper = shallow(<InfoHeaderItem text='mytext'/>);
expect(wrapper.find(".maintext").text()).toBe("mytext");
});
it('renders correct subtext', function () {
const wrapper = shallow(<InfoHeaderItem text='mimi' subtext='testtext'/>);
expect(wrapper.find(".subtext").text()).toBe("testtext");
});
it('test no subtext if no text defined', function () {
const wrapper = shallow(<InfoHeaderItem subtext='testi'/>);
expect(wrapper.find(".subtext")).toHaveLength(0);
});
it('test custom click handler', function () {
const func = jest.fn();
const wrapper = shallow(<InfoHeaderItem onClick={() => func()}/>);
expect(func).toBeCalledTimes(0);
wrapper.simulate("click");
expect(func).toBeCalledTimes(1);
});
it('test insertion of loading spinner', function () {
const wrapper = shallow(<InfoHeaderItem text={null}/>);
expect(wrapper.find("Spinner").length).toBe(1);
});
it('test loading spinner if undefined', function () {
const wrapper = shallow(<InfoHeaderItem/>);
expect(wrapper.find("Spinner").length).toBe(1);
});
});

10
src/elements/NewTagPopup/NewTagPopup.js
View File

@@ -18,21 +18,21 @@ class NewTagPopup extends React.Component {
<Modal
show={this.props.show}
onHide={this.props.onHide}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
size='lg'
aria-labelledby='contained-modal-title-vcenter'
centered>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
<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" onChange={(v) => {
<Form.Control id='namefield' type='text' placeholder='Enter Tag name' onChange={(v) => {
this.value = v.target.value
}}/>
<Form.Text className="text-muted">
<Form.Text className='text-muted'>
This Tag will automatically show up on category page.
</Form.Text>
</Form.Group>

2
src/elements/Preview/Preview.js
View File

@@ -48,7 +48,7 @@ class Preview extends React.Component {
<img className={style.previewimage}
src={this.state.previewpicture}
alt='Pic loading.'/> :
<span className={style.loadAnimation}><Spinner animation="border"/></span>}
<span className={style.loadAnimation}><Spinner animation='border'/></span>}
</div>
<div className={style.previewbottom}>

2
src/elements/Tag/Tag.js
View File

@@ -10,7 +10,7 @@ class Tag extends React.Component {
render() {
return (
<button className={styles.tagbtn} onClick={() => this.TagClick()}
data-testid="Test-Tag">{this.props.children}</button>
data-testid='Test-Tag'>{this.props.children}</button>
);
}

2
src/pages/CategoryPage/CategoryPage.js
View File

@@ -84,7 +84,7 @@ class CategoryPage extends React.Component {
<VideoContainer
data={this.videodata}
viewbinding={this.props.viewbinding}/> : null}
<button data-testid='backbtn' className="btn btn-success"
<button data-testid='backbtn' className='btn btn-success'
onClick={this.loadCategoryPageDefault}>Back
</button>
</> :

4
src/pages/CategoryPage/CategoryPage.test.js
View File

@@ -98,7 +98,7 @@ describe('<CategoryPage/>', function () {
const func = jest.fn();
CategoryPage.prototype.fetchVideoData = func;
shallow(<CategoryPage category="fullhd"/>);
shallow(<CategoryPage category='fullhd'/>);
expect(func).toBeCalledTimes(1);
});
@@ -106,7 +106,7 @@ describe('<CategoryPage/>', function () {
it('test sidebar tag clicks', function () {
const func = jest.fn();
const wrapper = mount(<CategoryPage category="fullhd"/>);
const wrapper = mount(<CategoryPage category='fullhd'/>);
wrapper.instance().loadTag = func;
console.log(wrapper.debug());

6
src/pages/HomePage/HomePage.js
View File

@@ -131,12 +131,12 @@ class HomePage extends React.Component {
e.preventDefault();
this.searchVideos(this.keyword);
}}>
<input data-testid='searchtextfield' className="form-control mr-sm-2"
type="text" placeholder="Search"
<input data-testid='searchtextfield' className='form-control mr-sm-2'
type='text' placeholder='Search'
onChange={(e) => {
this.keyword = e.target.value
}}/>
<button data-testid='searchbtnsubmit' className="btn btn-success" type="submit">Search</button>
<button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search</button>
</form>
</PageTitle>
<SideBar>

8
src/pages/Player/Player.js
View File

@@ -126,7 +126,7 @@ class Player extends React.Component {
<SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
{this.state.length !== 0 ?
<SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of
length!</SideBarItem> : null}
length!</SideBarItem> : null}
<Line/>
<SideBarTitle>Tags:</SideBarTitle>
{this.state.tags.map((m) => (
@@ -167,8 +167,10 @@ class Player extends React.Component {
<div>not loaded yet</div>}
<div className={style.videoactions}>
<button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
<button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this Video a Tag</button>
<button className='btn btn-danger' onClick={() =>{this.deleteVideo()}}>Delete Video</button>
<button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this
Video a Tag
</button>
<button className='btn btn-danger' onClick={() => {this.deleteVideo()}}>Delete Video</button>
</div>
</div>
<button className={style.closebutton} onClick={() => this.closebtn()}>Close</button>

1
src/pages/Player/Player.module.css
View File

@@ -12,7 +12,6 @@
display: block;
float: left;
margin-left: 20px;
margin-top: 25px;
margin-top: 20px;
width: 60%;
}

5
src/pages/RandomPage/RandomPage.js
View File

@@ -25,9 +25,8 @@ class RandomPage extends React.Component {
render() {
return (
<div>
<PageTitle
title='Random Videos'
subtitle='4pc'/>
<PageTitle title='Random Videos'
subtitle='4pc'/>
<SideBar>
<SideBarTitle>Visible Tags:</SideBarTitle>

73
src/pages/SettingsPage/GeneralSettings.js
View File

@@ -2,6 +2,9 @@ import React from "react";
import {Button, Col, Form} from "react-bootstrap";
import style from "./GeneralSettings.module.css"
import GlobalInfos from "../../GlobalInfos";
import InfoHeaderItem from "../../elements/InfoHeaderItem/InfoHeaderItem";
import {faArchive, faBalanceScaleLeft, faRulerVertical} from "@fortawesome/free-solid-svg-icons";
import {faAddressCard} from "@fortawesome/free-regular-svg-icons";
/**
* Component for Generalsettings tag on Settingspage
@@ -18,7 +21,12 @@ class GeneralSettings extends React.Component {
videopath: "",
tvshowpath: "",
mediacentername: "",
password: ""
password: "",
videonr: null,
dbsize: null,
difftagnr: null,
tagsadded: null
};
}
@@ -30,31 +38,49 @@ class GeneralSettings extends React.Component {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<>
<div className={style.infoheader}>
<InfoHeaderItem backColor='lightblue'
text={this.state.videonr}
subtext='Videos in Gravity'
icon={faArchive}/>
<InfoHeaderItem backColor='yellow'
text={this.state.dbsize !== undefined ? this.state.dbsize + " MB" : undefined}
subtext='Database size'
icon={faRulerVertical}/>
<InfoHeaderItem backColor='green'
text={this.state.difftagnr}
subtext='different Tags'
icon={faAddressCard}/>
<InfoHeaderItem backColor='orange'
text={this.state.tagsadded}
subtext='tags added'
icon={faBalanceScaleLeft}/>
</div>
<div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
<Form data-testid='mainformsettings' onSubmit={(e) => {
e.preventDefault();
this.saveSettings();
}}>
<Form.Row>
<Form.Group as={Col} data-testid="videpathform">
<Form.Group as={Col} data-testid='videpathform'>
<Form.Label>Video Path</Form.Label>
<Form.Control type="text" placeholder="/var/www/html/video" value={this.state.videopath}
<Form.Control type='text' placeholder='/var/www/html/video' value={this.state.videopath}
onChange={(ee) => this.setState({videopath: ee.target.value})}/>
</Form.Group>
<Form.Group as={Col} data-testid="tvshowpath">
<Form.Group as={Col} data-testid='tvshowpath'>
<Form.Label>TV Show Path</Form.Label>
<Form.Control type='text' placeholder="/var/www/html/tvshow"
<Form.Control type='text' placeholder='/var/www/html/tvshow'
value={this.state.tvshowpath}
onChange={(e) => this.setState({tvshowpath: e.target.value})}/>
</Form.Group>
</Form.Row>
<Form.Check
type="switch"
id="custom-switch"
type='switch'
id='custom-switch'
data-testid='passwordswitch'
label="Enable Password support"
label='Enable Password support'
checked={this.state.passwordsupport}
onChange={() => {
this.setState({passwordsupport: !this.state.passwordsupport})
@@ -62,18 +88,18 @@ class GeneralSettings extends React.Component {
/>
{this.state.passwordsupport ?
<Form.Group data-testid="passwordfield">
<Form.Group data-testid='passwordfield'>
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="**********" value={this.state.password}
<Form.Control type='password' placeholder='**********' value={this.state.password}
onChange={(e) => this.setState({password: e.target.value})}/>
</Form.Group> : null
}
<Form.Check
type="switch"
id="custom-switch-2"
type='switch'
id='custom-switch-2'
data-testid='tmdb-switch'
label="Enable TMDB video grabbing support"
label='Enable TMDB video grabbing support'
checked={this.state.tmdbsupport}
onChange={() => {
this.setState({tmdbsupport: !this.state.tmdbsupport})
@@ -81,10 +107,10 @@ class GeneralSettings extends React.Component {
/>
<Form.Check
type="switch"
id="custom-switch-3"
type='switch'
id='custom-switch-3'
data-testid='darktheme-switch'
label="Enable Dark-Theme"
label='Enable Dark-Theme'
checked={GlobalInfos.isDarkTheme()}
onChange={() => {
GlobalInfos.enableDarkTheme(!GlobalInfos.isDarkTheme());
@@ -93,13 +119,13 @@ class GeneralSettings extends React.Component {
}}
/>
<Form.Group className={style.mediacenternameform} data-testid="nameform">
<Form.Group className={style.mediacenternameform} data-testid='nameform'>
<Form.Label>The name of the Mediacenter</Form.Label>
<Form.Control type="text" placeholder="Mediacentername" value={this.state.mediacentername}
<Form.Control type='text' placeholder='Mediacentername' value={this.state.mediacentername}
onChange={(e) => this.setState({mediacentername: e.target.value})}/>
</Form.Group>
<Button variant="primary" type="submit">
<Button variant='primary' type='submit'>
Submit
</Button>
</Form>
@@ -125,7 +151,12 @@ class GeneralSettings extends React.Component {
mediacentername: result.mediacenter_name,
password: result.password,
passwordsupport: result.passwordEnabled,
tmdbsupport: result.TMDB_grabbing
tmdbsupport: result.TMDB_grabbing,
videonr: result.videonr,
dbsize: result.dbsize,
difftagnr: result.difftagnr,
tagsadded: result.tagsadded
});
}));
}
@@ -142,7 +173,7 @@ class GeneralSettings extends React.Component {
updateRequest.append('tvshowpath', this.state.tvshowpath);
updateRequest.append('mediacentername', this.state.mediacentername);
updateRequest.append("tmdbsupport", this.state.tmdbsupport);
updateRequest.append("darkmodeenabled", GlobalInfos.isDarkTheme());
updateRequest.append("darkmodeenabled", GlobalInfos.isDarkTheme().toString());
fetch('/api/settings.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()

14
src/pages/SettingsPage/GeneralSettings.module.css
View File

@@ -1,4 +1,5 @@
.GeneralForm {
margin-top: 55px;
width: 60%;
}
@@ -6,3 +7,16 @@
margin-top: 25px;
width: 40%;
}
.infoheader {
display: flex;
flex-wrap: wrap;
}
/* On screens that are 722px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 722px) {
.infoheader {
flex-direction: column;
}
}

5
src/pages/SettingsPage/GeneralSettings.test.js
View File

@@ -109,4 +109,9 @@ describe('<GeneralSettings/>', function () {
wrapper.find("[data-testid='tmdb-switch']").simulate("change");
expect(wrapper.state().tmdbsupport).toBe(false);
});
it('test insertion of 4 infoheaderitems', function () {
const wrapper = shallow(<GeneralSettings/>);
expect(wrapper.find("InfoHeaderItem").length).toBe(4);
});
});

3
src/pages/SettingsPage/SettingsPage.module.css
View File

@@ -2,7 +2,8 @@
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
float: left;
min-height: calc(100vh - 62px);
margin-top: 10px;
min-height: calc(100vh - 70px);
min-width: 110px;
padding-top: 20px;
width: 10%;