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

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%;