Skip to content

C
cms
Commit dfcdc24c authored by PDuarte's avatar PDuarte
Browse files
Options

adding layout epg

parent f63920e1
Hide whitespace changes
Inline Side-by-side
Showing with 1422 additions and 3 deletions
src/navigation/global/screens.js
View file @ dfcdc24c
...@@ -17,6 +17,12 @@ export default [ ...@@ -17,6 +17,12 @@ export default [
title: 'layout players', title: 'layout players',
icon: <Briefcase />, icon: <Briefcase />,
navLink: '/screens/layoutplayers' navLink: '/screens/layoutplayers'
},
{
id: 'layoutepgsDash',
title: 'layout epgs',
icon: <Briefcase />,
navLink: '/screens/layoutepgs'
} }
] ]
} }
......
src/router/routes/screens.js
View file @ dfcdc24c
...@@ -49,6 +49,30 @@ const ScreensRoutes = [ ...@@ -49,6 +49,30 @@ const ScreensRoutes = [
{ {
path: '/screens/layoutplayers', path: '/screens/layoutplayers',
component: lazy(() => import('../../views/screens/layoutplayers')) component: lazy(() => import('../../views/screens/layoutplayers'))
},
// layout epg
{
path: '/screens/layoutepgs/edit',
exact: true,
component: () => <Redirect to='/screens/layoutepgs/edit/1' />
},
{
path: '/screens/layoutepgs/add',
component: lazy(() => import('../../views/screens/layoutepgs/add')),
meta: {
navLink: '/screens/layoutepgs/add'
}
},
{
path: '/screens/layoutepgs/edit/:id',
component: lazy(() => import('../../views/screens/layoutepgs/edit')),
meta: {
navLink: '/screens/layoutepgs/edit'
}
},
{
path: '/screens/layoutepgs',
component: lazy(() => import('../../views/screens/layoutepgs'))
} }
] ]
......
src/views/screens/layoutepgs/add/index.js 0 → 100644
View file @ dfcdc24c
// ** React Imports
import { Fragment } from 'react'
import { Link } from 'react-router-dom'
// ** Store & Actions
import { addlayoutEPG } from '../../store/actions'
import { useDispatch } from 'react-redux'
// ** Custom Components
import Breadcrumbs from '@components/breadcrumbs'
// ** Third Party Components
import { Row, Col } from 'reactstrap'
// module settings
import moduleSettings from '../module'
// ** Tables
import ElementCard from '../card'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
const Tables = () => {
const dispatch = useDispatch()
const onSubmitHandler = values => {
dispatch(
addlayoutEPG({
name: values.name,
slug: values.slug,
platforms: values.platforms
})
)
}
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
<Row>
<Col sm='12'>
<Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitle}</Link>
</Col>
</Row>
<Row>
<Col sm='12'>
<div className="card">
<div className="card-header">
<h4 className="card-title">New {moduleSettings.mainTitleSingle}</h4>
</div>
<div className="card-body">
<ElementCard selectedElement={{
id: '<generate>',
name: '',
slug: '',
platforms: []
}}
onSubmitHandler={onSubmitHandler}
/>
</div>
</div>
</Col>
</Row>
</Fragment>
)
}
export default Tables
src/views/screens/layoutepgs/card/index.js 0 → 100644
View file @ dfcdc24c
// ** React Imports
import { useState, useEffect, Fragment } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { toast } from 'react-toastify'
import Avatar from '@components/avatar'
import {Media, Button, Label, Form, FormGroup, Input, Table, CustomInput, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, CardHeader, CardTitle, CardText } from 'reactstrap'
import { isObjEmpty } from '@utils'
import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'
// ** Store & Actions
import { updateProject, resetResults, getPlatform } from '../../store/actions'
import { useForm } from 'react-hook-form'
import classnames from 'classnames'
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'
import ElementPlatform from './plataform'
const SuccessProgressToast = () => (
<Fragment>
<div className='toastify-header'>
<div className='title-wrapper'>
<Avatar size='sm' color='success' icon={<Check size={12} />} />
<h6 className='toast-title'>Saved !</h6>
</div>
<small className='text-muted'></small>
</div>
<div className='toastify-body'>
<span role='img' aria-label='toast-text'>
👋 Good job.
</span>
</div>
</Fragment>
)
const ElementCard = ({ selectedElement, onSubmitHandler }) => {
const store = useSelector(state => state.projectsettings)
const [PlatformName, setPlatformName] = useState('Web')
const MySwal = withReactContent(Swal)
const handleError = (text) => {
return MySwal.fire({
title: 'Error!',
text,
icon: 'error',
customClass: {
confirmButton: 'btn btn-primary'
},
buttonsStyling: false
})
}
const [dataElement, setElementData] = useState(null),
{ register, errors, handleSubmit } = useForm(),
dispatch = useDispatch(),
notifySuccessProgress = () => toast.success(<SuccessProgressToast />),
onSubmit = values => {
if (isObjEmpty(errors)) {
const submitElement = {
...dataElement,
name: values.name,
slug: values.slug
}
onSubmitHandler(submitElement)
}
}
useEffect(() => {
if (selectedElement !== null || (selectedElement !== null && dataElement !== null && selectedElement.id !== dataElement.id)) {
return setElementData(selectedElement)
}
}, [selectedElement])
useEffect(() => {
if (store.errorMsg !== '') {
handleError(store.errorMsg)
dispatch(resetResults())
}
}, [store.errorMsg])
useEffect(() => {
if (store.saveSucces) {
notifySuccessProgress()
dispatch(resetResults())
}
}, [store.saveSucces])
return (
<Fragment>
<Form
onSubmit={handleSubmit(onSubmit)}
>
<Row>
<Col md='4' sm='12'>
<FormGroup>
<Label for='email'>ID</Label>
<Input
readOnly={true}
type='text'
name='id'
id='id'
placeholder='id'
defaultValue={dataElement && dataElement.id}
/>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='name'>Name</Label>
<Input
type='text'
name='name'
id='name'
innerRef={register({ required: true })}
placeholder='Name'
defaultValue={dataElement && dataElement.name}
className={classnames({ 'is-invalid': errors['name'] })}
/>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='slug'>Slug</Label>
<Input
type='text'
name='slug'
id='slug'
innerRef={register({ required: true })}
placeholder='Slug'
defaultValue={dataElement && dataElement.slug}
className={classnames({ 'is-invalid': errors['slug'] })}
/>
</FormGroup>
</Col>
<Col sm='12'>
<ElementPlatform dataElement={dataElement} setElement={setElementData} store={store} />
</Col>
<Col className='d-flex flex-sm-row flex-column mt-2' sm='12'>
<Button.Ripple className='mb-1 mb-sm-0 mr-0 mr-sm-1' type='submit' color='primary'>
Save Changes
</Button.Ripple>
{/* <Button.Ripple color='secondary' outline onClick={() => dispatch(getPlatform(selectedElement.id))} >
Reset
</Button.Ripple> */}
</Col>
</Row>
</Form>
</Fragment>
)
}
export default ElementCard
\ No newline at end of file
src/views/screens/layoutepgs/card/plataform.js 0 → 100644
View file @ dfcdc24c
import { Fragment, useState, useEffect, useRef, memo } from 'react'
import {Media, Button, Label, Form, FormGroup, Input, Table, CustomInput, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, UncontrolledButtonDropdown } from 'reactstrap'
// ** Store & Actions
import { useDispatch } from 'react-redux'
// ** Store & Actions
import { getData_platforms } from '../../../settings/store/actions'
import { Lock, Edit, Trash2 } from 'react-feather'
import { useForm } from 'react-hook-form'
import classnames from 'classnames'
import { circle } from 'leaflet'
const ElementPlatform = ({dataElement, setElement, store}) => {
const dispatch = useDispatch(),
{ register, errors, handleSubmit } = useForm()
const [plataforms, setPlataforms] = useState(null),
[selectedOption, setSelectedOption] = useState(null),
platformsIDs = [0]
// console.log(dataElement)
// console.log(store)
// ** Function to get user on mount
useEffect(() => {
if (!store.allDataPlatforms || store.allDataPlatforms.length < 1) {
dispatch(getData_platforms({
start: 1,
length: 1000,
q: null
}))
}
}, [dispatch])
useEffect(() => {
setPlataforms(store.allDataPlatforms)
}, [store.allDataPlatforms])
const handleGridChange = (value, index, field) => {
// console.log([value, index, field])
const newData = dataElement.platforms.map((platform, i) => {
if (i === index) {
if (field === 'type') platform.pivot.type = value
if (field === 'slug') platform.pivot.slug = value
if (field === 'show_genres') platform.pivot.show_genres = value
if (field === 'show_preview') platform.pivot.show_preview = value
if (field === 'show_selected_program_info') platform.pivot.show_selected_program_info = value
if (field === 'number_days_forward') platform.pivot.number_days_forward = value
if (field === 'number_days_backward') platform.pivot.number_days_backward = value
if (field === 'days_date_format') platform.pivot.days_date_format = value
if (field === 'number_channels') platform.pivot.number_channels = value
if (field === 'number_hours') platform.pivot.number_hours = value
if (field === 'time_slot_duration') platform.pivot.time_slot_duration = value
if (field === 'show_channel_number') platform.pivot.show_channel_number = value
if (field === 'navigation_type') platform.pivot.navigation_type = value
if (field === 'program_selection_behaviour_previous') platform.pivot.program_selection_behaviour_previous = value
if (field === 'program_selection_behaviour_current') platform.pivot.program_selection_behaviour_current = value
if (field === 'program_selection_behaviour_next') platform.pivot.program_selection_behaviour_next = value
if (field === 'program_label') platform.pivot.program_label = value
if (field === 'expand_preview') platform.pivot.expand_preview = value
if (field === 'epg_features_channel_favorites') platform.pivot.epg_features_channel_favorites = value
if (field === 'epg_features_program_favorites') platform.pivot.epg_features_program_favorites = value
if (field === 'epg_features_program_recording') platform.pivot.epg_features_program_recording = value
if (field === 'epg_features_channel_purchase') platform.pivot.epg_features_channel_purchase = value
if (field === 'epg_features_program_purchase') platform.pivot.epg_features_program_purchase = value
if (field === 'epg_features_rewind') platform.pivot.epg_features_rewind = value
if (field === 'epg_features_reminders') platform.pivot.epg_features_reminders = value
if (field === 'epg_format_ratio') platform.pivot.epg_format_ratio = value
}
})
setElement(
{
...dataElement
})
}
return !!dataElement ? (
<div clssName='permissions border mt-1'>
<h6 className='py-1 mx-1 mb-0 font-medium-2'>
<Lock size={18} className='mr-25' />
<span className='align-middle'>Platforms</span>
</h6>
<Table borderless striped responsive>
<thead className='thead-light'>
<tr>
<th>plataform</th>
<th>slug</th>
<th>type</th>
<th>show genres</th>
<th>show preview</th>
<th>show selected program info</th>
<th>number days forward</th>
<th>number days backward</th>
<th>days date format</th>
<th>number channels</th>
<th>number hours</th>
<th>time slot duration</th>
<th>show channel number</th>
<th>navigation type</th>
<th>program selection behaviour previous</th>
<th>program selection behaviour current</th>
<th>program selection behaviour next</th>
<th>program label</th>
<th>expand preview</th>
<th>epg features channel favorites</th>
<th>epg features program favorites</th>
<th>epg features program recording</th>
<th>epg features channel purchase</th>
<th>epg features program purchase</th>
<th>epg features rewind</th>
<th>epg features reminders</th>
<th>epg format ratio</th>
</tr>
</thead>
<tbody>
{
!!dataElement && !!dataElement.platforms && dataElement.platforms.map((platform, index) => {
const plataformsOptions = platform.pivot,
locked = plataformsOptions.locked
platformsIDs.push(`${platform.id}`)
return (
<tr key={platform.id}>
<td>{platform.name}</td>
<td>
<Input
type='text'
name='slug'
id='slug'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.slug}
className={classnames({ 'is-invalid': errors['slug'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'slug')}
/>
</td>
<td >
<Input
type='text'
name='type'
id='type'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.type}
className={classnames({ 'is-invalid': errors['type'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'type')}
/>
</td>
<td>
<Input
type='text'
name='show_genres'
id='show_genres'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.show_genres}
className={classnames({ 'is-invalid': errors['show_genres'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'show_genres')}
/>
</td>
<td>
<Input
type='select'
name='show_preview'
id='show_preview'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.show_preview}
className={classnames({ 'is-invalid': errors['show_preview'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'show_preview')}
>
<option value="none">none</option>
<option value="image">image</option>
<option value="video">video</option>
</Input>
</td>
<td>
<Input
type='select'
name='show_selected_program_info'
id='show_selected_program_info'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.show_selected_program_info}
className={classnames({ 'is-invalid': errors['show_selected_program_info'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'show_selected_program_info')}
>
<option value="top">top</option>
<option value="popup">popup</option>
<option value="none">none</option>
<option value="expand">expand</option>
</Input>
</td>
<td>
<Input
type='text'
name='number_days_forward'
id='number_days_forward'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.number_days_forward}
className={classnames({ 'is-invalid': errors['number_days_forward'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'number_days_forward')}
/>
</td>
<td>
<Input
type='text'
name='number_days_backward'
id='number_days_backward'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.number_days_backward}
className={classnames({ 'is-invalid': errors['number_days_backward'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'number_days_backward')}
/>
</td>
<td>
<Input
type='text'
name='days_date_format'
id='days_date_format'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.days_date_format}
className={classnames({ 'is-invalid': errors['days_date_format'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'days_date_format')}
/>
</td>
<td>
<Input
type='text'
name='number_channels'
id='number_channels'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.number_channels}
className={classnames({ 'is-invalid': errors['number_channels'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'number_channels')}
/>
</td>
<td>
<Input
type='text'
name='number_hours'
id='number_hours'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.number_hours}
className={classnames({ 'is-invalid': errors['number_hours'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'number_hours')}
/>
</td>
<td>
<Input
type='text'
name='time_slot_duration'
id='time_slot_duration'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.time_slot_duration}
className={classnames({ 'is-invalid': errors['time_slot_duration'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'time_slot_duration')}
/>
</td>
<td>
<Input
type='text'
name='show_channel_number'
id='show_channel_number'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.show_channel_number}
className={classnames({ 'is-invalid': errors['show_channel_number'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'show_channel_number')}
/>
</td>
<td>
<Input
type='select'
name='navigation_type'
id='navigation_type'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.navigation_type}
className={classnames({ 'is-invalid': errors['navigation_type'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'navigation_type')}
>
<option value="none">none</option>
<option value="scroll">scroll</option>
<option value="page">page</option>
</Input>
</td>
<td>
<Input
type='select'
name='program_selection_behaviour_previous'
id='program_selection_behaviour_previous'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.program_selection_behaviour_previous}
className={classnames({ 'is-invalid': errors['program_selection_behaviour_previous'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'program_selection_behaviour_previous')}
>
<option value="none">none</option>
<option value="scroll">scroll</option>
<option value="page">page</option>
</Input>
</td>
<td>
<Input
type='select'
name='program_selection_behaviour_current'
id='program_selection_behaviour_current'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.program_selection_behaviour_current}
className={classnames({ 'is-invalid': errors['program_selection_behaviour_current'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'program_selection_behaviour_current')}
>
<option value="none">none</option>
<option value="scroll">scroll</option>
<option value="page">page</option>
</Input>
</td>
<td>
<Input
type='select'
name='program_selection_behaviour_next'
id='program_selection_behaviour_next'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.program_selection_behaviour_next}
className={classnames({ 'is-invalid': errors['program_selection_behaviour_next'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'program_selection_behaviour_next')}
>
<option value="none">none</option>
<option value="scroll">scroll</option>
<option value="page">page</option>
</Input>
</td>
<td>
<Input
type='select'
name='program_label'
id='program_label'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.program_label}
className={classnames({ 'is-invalid': errors['program_label'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'program_label')}
>
<option value="program_title">program title</option>
<option value="program_title_start_end_time">program title start end time</option>
<option value="program_title_start_time">program title start time</option>
</Input>
</td>
<td>
<Input
type='text'
name='expand_preview'
id='expand_preview'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.expand_preview}
className={classnames({ 'is-invalid': errors['expand_preview'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'expand_preview')}
>
<option value="none">none</option>
<option value="image">image</option>
<option value="video">video</option>
</Input>
</td>
<td>
<Input
type='text'
name='epg_features_channel_favorites'
id='epg_features_channel_favorites'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.epg_features_channel_favorites}
className={classnames({ 'is-invalid': errors['epg_features_channel_favorites'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'epg_features_channel_favorites')}
/>
</td>
<td>
<Input
type='text'
name='epg_features_program_favorites'
id='epg_features_program_favorites'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.epg_features_program_favorites}
className={classnames({ 'is-invalid': errors['epg_features_program_favorites'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'epg_features_program_favorites')}
/>
</td>
<td>
<Input
type='text'
name='epg_features_program_recording'
id='epg_features_program_recording'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.epg_features_program_recording}
className={classnames({ 'is-invalid': errors['epg_features_program_recording'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'epg_features_program_recording')}
/>
</td>
<td>
<Input
type='text'
name='epg_features_channel_purchase'
id='epg_features_channel_purchase'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.epg_features_channel_purchase}
className={classnames({ 'is-invalid': errors['epg_features_channel_purchase'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'epg_features_channel_purchase')}
/>
</td>
<td>
<Input
type='text'
name='epg_features_program_purchase'
id='epg_features_program_purchase'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.epg_features_program_purchase}
className={classnames({ 'is-invalid': errors['epg_features_program_purchase'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'epg_features_program_purchase')}
/>
</td>
<td>
<Input
type='text'
name='epg_features_rewind'
id='epg_features_rewind'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.epg_features_rewind}
className={classnames({ 'is-invalid': errors['epg_features_rewind'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'epg_features_rewind')}
/>
</td>
<td>
<Input
type='text'
name='epg_features_reminders'
id='epg_features_reminders'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.epg_features_reminders}
className={classnames({ 'is-invalid': errors['epg_features_reminders'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'epg_features_reminders')}
/>
</td>
<td>
<Input
type='text'
name='epg_format_ratio'
id='epg_format_ratio'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.epg_format_ratio}
className={classnames({ 'is-invalid': errors['epg_format_ratio'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'epg_format_ratio')}
/>
</td>
</tr>
)
})
}
</tbody>
</Table>
<Col md='12' sm='12'>
<br />
</Col>
<Row>
<Col md='4' sm='4'>
<FormGroup>
<Label for='addoption'>Add Platforms</Label>
<Input type='select' name='addoption' id='addoption' onChange={(e) => setSelectedOption(e.target.value)}>>
<option></option>
{!!plataforms && plataforms.map(option => {
return <option key={option.id} value={`${option.id}.${option.name}`}>{option.name}</option>
})}
</Input>
</FormGroup>
</Col>
<Col md='3' sm='4'>
<FormGroup>
<Label for='addoptionbutton'>&nbsp;</Label>
<Button.Ripple color='secondary' name="addoptionbutton" outline asyncOptions={e => console.log(e.getOptions)
} onClick={() => {
if (!selectedOption) return
const plataform = selectedOption.split('.')
if (platformsIDs.indexOf(plataform[0]) > 0) return
const elementAdded = dataElement.platforms.push({
name:plataform[1],
id: plataform[0],
key: plataform[0],
pivot:{
type: ' ',
slug: ' ',
show_genres: 0,
show_preview: 'none',
show_selected_program_info: 'top',
number_days_forward: 0,
number_days_backward: 0,
days_date_format: 0,
number_channels: 0,
number_hours: 0,
time_slot_duration: 0,
show_channel_number: 0,
navigation_type: 'none',
program_selection_behaviour_previous: 'none',
program_selection_behaviour_current: 'none',
program_selection_behaviour_next: 'none',
program_label: 'program_title',
expand_preview: 'none',
epg_features_channel_favorites: 0,
epg_features_program_favorites: 0,
epg_features_program_recording: 0,
epg_features_channel_purchase: 0,
epg_features_program_purchase: 0,
epg_features_rewind: 0,
epg_features_reminders: 0,
epg_format_ratio: '1.77'
}
})
setElement(
{
...dataElement,
elementAdded
}
)
}} >
add
</Button.Ripple>
</FormGroup>
</Col>
</Row>
</div>
) : (
<Fragment>
</Fragment>
)
}
export default ElementPlatform
src/views/screens/layoutepgs/data.js 0 → 100644
View file @ dfcdc24c
// ** React Imports
import { Link } from 'react-router-dom'
import { cleanLayoutMenu } from '../store/actions'
import { store } from '@store/storeConfig/store'
// ** Custom Components
import Avatar from '@components/avatar'
// module settings
import moduleSettings from './module'
// ** Third Party Components
import axios from 'axios'
import { MoreVertical, Edit, FileText, Archive, Trash } from 'react-feather'
import { Badge, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'
// ** Vars
const states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary']
const status = {
1: { title: 'Current', color: 'light-primary' },
2: { title: 'Professional', color: 'light-success' },
3: { title: 'Rejected', color: 'light-danger' },
4: { title: 'Resigned', color: 'light-warning' },
5: { title: 'Applied', color: 'light-info' }
}
export let data
// ** Get initial Data
axios.get('/api/datatables/initial-data').then(response => {
data = response.data
})
// ** Table Zero Config Column
export const basicColumns = [
{
name: 'ID',
selector: 'id',
sortable: true,
maxWidth: '100px'
},
{
name: 'Name',
selector: 'name',
sortable: true,
minWidth: '225px'
},
{
name: 'Email',
selector: 'email',
sortable: true,
minWidth: '310px'
},
{
name: 'Position',
selector: 'post',
sortable: true,
minWidth: '250px'
},
{
name: 'Age',
selector: 'age',
sortable: true,
minWidth: '100px'
},
{
name: 'Salary',
selector: 'salary',
sortable: true,
minWidth: '175px'
}
]
// ** Expandable table component
const ExpandableTable = ({ data }) => {
return (
<div className='expandable-content p-2'>
<p>
<span className='font-weight-bold'>City:</span> {data.city}
</p>
<p>
<span className='font-weight-bold'>Experience:</span> {data.experience}
</p>
<p className='m-0'>
<span className='font-weight-bold'>Post:</span> {data.post}
</p>
</div>
)
}
// ** Table Common Column
export const columns = [
{
name: 'Name',
selector: 'name',
sortable: true,
minWidth: '250px',
cell: row => (
<div className='d-flex align-items-center'>
{row.avatar === '' ? (
<Avatar color={`light-${states[row.status]}`} content={row.full_name} initials />
) : (
<Avatar img={require(`@src/assets/images/portrait/small/avatar-s-${row.avatar}`).default} />
)}
<div className='user-info text-truncate ml-1'>
<span className='d-block font-weight-bold text-truncate'>{row.full_name}</span>
<small>{row.post}</small>
</div>
</div>
)
},
{
name: 'Status',
selector: 'status',
sortable: true,
minWidth: '150px',
cell: row => {
return (
<Badge color={status[row.status].color} pill>
{status[row.status].title}
</Badge>
)
}
},
{
name: 'Actions',
allowOverflow: true,
cell: row => {
return (
<div className='d-flex'>
<UncontrolledDropdown>
<DropdownToggle className='pr-1' tag='span'>
<MoreVertical size={15} />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem tag='a' href='/' className='w-100' onClick={e => e.preventDefault()}>
<FileText size={15} />
<span className='align-middle ml-50'>Details</span>
</DropdownItem>
<DropdownItem tag='a' href='/' className='w-100' onClick={e => e.preventDefault()}>
<Archive size={15} />
<span className='align-middle ml-50'>Archive</span>
</DropdownItem>
<DropdownItem tag='a' href='/' className='w-100' onClick={e => e.preventDefault()}>
<Trash size={15} />
<span className='align-middle ml-50'>Delete</span>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<Edit size={15} />
</div>
)
}
}
]
// ** Table Intl Column
export const multiLingColumns = [
{
name: 'Name',
selector: 'name',
sortable: true,
minWidth: '200px'
},
{
name: 'Status',
selector: 'status',
sortable: true,
minWidth: '150px',
cell: row => {
return (
<Badge color={status[row.status].color} pill>
{status[row.status].title}
</Badge>
)
}
},
{
name: 'Actions',
allowOverflow: true,
cell: row => {
return (
<div className='d-flex'>
<UncontrolledDropdown>
<DropdownToggle className='pr-1' tag='span'>
<MoreVertical size={15} />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<FileText size={15} />
<span className='align-middle ml-50'>Details</span>
</DropdownItem>
<DropdownItem>
<Archive size={15} />
<span className='align-middle ml-50'>Archive</span>
</DropdownItem>
<DropdownItem>
<Trash size={15} />
<span className='align-middle ml-50'>Delete</span>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<Edit size={15} />
</div>
)
}
}
]
// ** Table Server Side Column
export const serverSideColumns = [
{
name: 'ID',
selector: 'id',
sortable: true,
minWidth: '25px'
},
{
name: 'Name',
selector: 'name',
sortable: true,
minWidth: '225px',
cell: row => (
<div className='d-flex justify-content-left align-items-center'>
<div className='d-flex flex-column'>
<Link
to={`${moduleSettings.baseURL}/edit/${row.id}`}
className='user-name text-truncate mb-0'
onClick={() => store.dispatch(cleanLayoutMenu(row.id))}
>
<span className='font-weight-bold'>{row.name}</span>
</Link>
<small className='text-truncate text-muted mb-0'>edit</small>
</div>
</div>
)
},
{
name: 'Slug',
selector: 'slug',
sortable: true,
minWidth: '225px'
}
]
// ** Table Adv Search Column
export const advSearchColumns = [
{
name: 'Name',
selector: 'full_name',
sortable: true,
minWidth: '200px'
},
{
name: 'Email',
selector: 'email',
sortable: true,
minWidth: '250px'
},
{
name: 'Post',
selector: 'post',
sortable: true,
minWidth: '250px'
},
{
name: 'City',
selector: 'city',
sortable: true,
minWidth: '150px'
},
{
name: 'Date',
selector: 'start_date',
sortable: true,
minWidth: '150px'
},
{
name: 'Salary',
selector: 'salary',
sortable: true,
minWidth: '100px'
}
]
export default ExpandableTable
src/views/screens/layoutepgs/edit/index.js 0 → 100644
View file @ dfcdc24c
// ** React Imports
import { Fragment } from 'react'
import { Link } from 'react-router-dom'
// ** Custom Components
import Breadcrumbs from '@components/breadcrumbs'
// ** Third Party Components
import { Row, Col } from 'reactstrap'
// ** Tables
import ElementEdit from './main'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
// module settings
import moduleSettings from '../module'
const Tables = () => {
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
<Row>
<Col sm='12'>
<Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitleSingle}</Link>
</Col>
</Row>
<Row>
<Col sm='12'>
<div className="card">
<div className="card-header">
<h4 className="card-title">{moduleSettings.mainTitleSingle}</h4>
</div>
<div className="card-body">
<ElementEdit />
</div>
</div>
</Col>
</Row>
</Fragment>
)
}
export default Tables
src/views/screens/layoutepgs/edit/main.js 0 → 100644
View file @ dfcdc24c
import { useState, useEffect, Fragment } from 'react'
import { useParams, Link } from 'react-router-dom'
// ** Store & Actions
import { getLayoutEPG, updateLayoutEPG } from '../../store/actions'
import { useSelector, useDispatch } from 'react-redux'
import { Alert } from 'reactstrap'
import ElementCard from '../card'
// module settings
import moduleSettings from '../module'
const ElementEdit = () => {
// ** States & Vars
const store = useSelector(state => state.screens),
[dataElement, setElementData] = useState(null),
dispatch = useDispatch(),
{ id } = useParams()
const onSubmitHandler = values => {
dispatch(
updateLayoutEPG({
...dataElement,
id: values.id,
name: values.name,
slug: values.slug,
platforms: values.platforms
})
)
}
// ** Function to get user on mount
useEffect(() => {
dispatch(getLayoutEPG(id))
}, [dispatch])
// ** Update user image on mount or change
useEffect(() => {
if (store.selectedLayoutEPG !== null || (store.selectedLayoutEPG !== null && dataElement !== null && store.selectedLayoutEPG.id !== dataElement.id)) {
return setElementData(store.selectedLayoutEPG)
}
}, [store.selectedLayoutEPG])
return store.selectedLayoutEPG !== null && store.selectedLayoutEPG !== undefined ? (
<ElementCard
selectedElement={store.selectedLayoutEPG}
onSubmitHandler={onSubmitHandler}
/>
) : (
<Alert color='info'>
<h4 className='alert-heading'>Loading {moduleSettings.mainTitleSingle}</h4>
<div className='alert-body'>
If {moduleSettings.mainTitleSingle} with id: {id} doesn't exist. Check list of all {moduleSettings.mainTitle}: <Link to={moduleSettings.baseURL}>{moduleSettings.mainTitle} List</Link>
</div>
</Alert>
)
}
export default ElementEdit
src/views/screens/layoutepgs/index.js 0 → 100644
View file @ dfcdc24c
// ** React Imports
import { Fragment } from 'react'
// ** Custom Components
import Breadcrumbs from '@components/breadcrumbs'
// ** Third Party Components
import { Row, Col } from 'reactstrap'
// ** Tables
import DataTable from './table'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
// module settings
import moduleSettings from './module'
const Tables = () => {
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
<Row>
<Col sm='12'>
<DataTable />
</Col>
</Row>
</Fragment>
)
}
export default Tables
src/views/screens/layoutepgs/module.js 0 → 100644
View file @ dfcdc24c
const moduleSettings = {
mainTitle: 'Layout EPGs',
mainTitleSingle: 'Layout EPG',
apiBaseURL: '/api/layoutepgs',
baseURL: '/screens/layoutepgs'
}
export default moduleSettings
\ No newline at end of file
src/views/screens/layoutepgs/table.js 0 → 100644
View file @ dfcdc24c
import { Fragment, useState, useEffect, memo } from 'react'
// ** Table Columns
import { serverSideColumns } from './data'
// ** Store & Actions
import { getData_layoutEPGs } from '../store/actions'
import { useSelector, useDispatch } from 'react-redux'
import DataTableServerSide from '@components/datatable'
// module settings
import moduleSettings from './module'
const DataTable = () => {
// ** Store Vars
const dispatch = useDispatch()
const store = useSelector(state => state.screens)
return (
<DataTableServerSide
cardTitle={moduleSettings.mainTitle}
allData={store.allDataLayoutEPGs}
getData={getData_layoutEPGs}
serverSideColumns={serverSideColumns}
linkAddButton={`${moduleSettings.baseURL}/add`}
total={store.totalLayoutEPGs}
/>
)
}
export default memo(DataTable)
src/views/screens/store/actions/index.js
View file @ dfcdc24c
export * from './layoutmenus' export * from './layoutmenus'
export * from './layoutplayer' export * from './layoutplayer'
export * from './layoutepg'
export const resetResults = id => { export const resetResults = id => {
return async dispatch => { return async dispatch => {
......
src/views/screens/store/actions/layoutepg.js 0 → 100644
View file @ dfcdc24c
import axios from 'axios'
import {setSaveSatus, setErrorMsg} from '../../../../redux/actions/api'
import moduleSettings from '../../layoutepgs/module'
// ** Get table Data ///api/datatables/data
export const getData_layoutEPGs = params => {
console.log(params)
return async dispatch => {
await axios.get(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}`, {params}
).then(response => {
dispatch({
type: 'GET_DATA_LAYOUT_EPGS',
allData: response.data.data,
// datalayoumenus: response.data.invoices,
totalPages: response.data.recordsTotal,
params: response.data.params
})
})
}
}
export const addlayoutEPG = params => {
return (dispatch, getState) => {
axios
.post(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}`, params)
.then(response => {
dispatch({
type: 'ADD_LAYOUTEPG',
params
})
})
.then(() => {
dispatch(setSaveSatus(true))
// dispatch(getlayoumenu(layoumenu.id))
// dispatch(getData_layoumenus())
})
.catch(err => {
const errosMsg = !err.response ? 'error' : err.response.data.message
console.log(errosMsg)
dispatch(setErrorMsg(errosMsg))
})
}
}
export const getLayoutEPG = id => {
return async dispatch => {
await axios
.get(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}/${id}`)
.then(response => {
// console.log('leu')
// console.log(response)
dispatch({
type: 'GET_LAYOUTEPG',
data: response.data.data
})
})
.catch(err => console.log(err))
}
}
export const cleanLayoutEPG = id => {
return async dispatch => {
dispatch({
type: 'GET_LAYOUTEPG',
data: null
})
}
}
export const updateLayoutEPG = params => {
return (dispatch, getState) => {
axios
.put(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}/${params.id}`, params)
.then(response => {
dispatch({
type: 'UPDATE_LAYOUTEPG',
params
})
})
.then(() => {
dispatch(setSaveSatus(true))
})
.catch(err => {
const errosMsg = !err.response ? 'error' : err.response.data.message
console.log(errosMsg)
dispatch(setErrorMsg(errosMsg))
})
}
}
\ No newline at end of file
src/views/screens/store/reducer/index.js
View file @ dfcdc24c
...@@ -17,7 +17,13 @@ const initialState = { ...@@ -17,7 +17,13 @@ const initialState = {
totalLayoutPlayers: 1, totalLayoutPlayers: 1,
paramsLayoutPlayers: {}, paramsLayoutPlayers: {},
allDataLayoutPlayers: [], allDataLayoutPlayers: [],
selectedLayoutPlayer: null selectedLayoutPlayer: null,
dataLayoutEPGs: [],
totalLayoutEPGs: 1,
paramsLayoutEPGs: {},
allDataLayoutEPGs: [],
selectedLayoutEPG: null
} }
...@@ -75,7 +81,7 @@ const screens = (state = initialState, action) => { ...@@ -75,7 +81,7 @@ const screens = (state = initialState, action) => {
case 'ADD_LAYOUTMENU': case 'ADD_LAYOUTMENU':
return { ...state } return { ...state }
// layout menus // layout player
case 'GET_DATA_LAYOUT_PLAYERS': case 'GET_DATA_LAYOUT_PLAYERS':
return { return {
...state, ...state,
...@@ -99,8 +105,32 @@ const screens = (state = initialState, action) => { ...@@ -99,8 +105,32 @@ const screens = (state = initialState, action) => {
case 'ADD_LAYOUTPLAYER': case 'ADD_LAYOUTPLAYER':
return { ...state } return { ...state }
// layout EPG
case 'GET_DATA_LAYOUT_EPGS':
return {
...state,
allDataLayoutEPGs: action.allData,
dataLayoutEPGs: action.data,
totalLayoutEPGs: action.totalPages,
paramsLayoutEPGs: action.params
}
case 'ADD_LAYOUTEPG':
return { ...state }
case 'GET_PROJECT':
return { ...state,
selectedLayoutEPG : action.data
}
case 'GET_LAYOUTEPG':
return { ...state,
selectedLayoutEPG : action.data
}
case 'UPDATE_LAYOUTEPG':
return { ...state }
case 'ADD_LAYOUTEPG':
return { ...state }
// //
// default // default
default: default:
return state return state
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment