v1.6.2/admin dashboard
This commit is contained in:
@@ -0,0 +1,515 @@
|
||||
import React, { Component } from 'react';
|
||||
import firebase from 'firebase/app';
|
||||
import 'firebase/auth';
|
||||
import 'firebase/firestore';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Table,
|
||||
Tabs,
|
||||
Tag,
|
||||
Switch,
|
||||
Input,
|
||||
notification,
|
||||
Divider,
|
||||
Row,
|
||||
Col,
|
||||
PageHeader,
|
||||
} from 'antd';
|
||||
import {
|
||||
getPartyDashboardData,
|
||||
getServerDashboardData,
|
||||
postUpdateVersionActive,
|
||||
postUpdateVideoSelectors,
|
||||
} from './Api';
|
||||
import {
|
||||
CheckCircleTwoTone,
|
||||
CloseCircleTwoTone,
|
||||
ReloadOutlined,
|
||||
LoadingOutlined,
|
||||
EnterOutlined,
|
||||
DeleteOutlined,
|
||||
PlusCircleFilled,
|
||||
SaveFilled,
|
||||
SaveOutlined,
|
||||
LogoutOutlined,
|
||||
SendOutlined,
|
||||
PlusCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const PLAYER_SOURCES = [
|
||||
{ text: 'Netflix', value: 'netflix.' },
|
||||
{ text: 'Amazon', value: 'amazon.' },
|
||||
{ text: 'Hulu', value: 'hulu.' },
|
||||
{ text: 'Disney+', value: 'disneyplus.' },
|
||||
{ text: 'YouTube', value: 'youtube.' },
|
||||
{ text: 'HBO Now', value: 'hbonow.' },
|
||||
{ text: 'HBO Max', value: 'hbomax.' },
|
||||
{ text: 'Peacock', value: 'peacocktv.' },
|
||||
{ text: 'Google Play', value: 'play.google.' },
|
||||
{ text: 'Crunchyroll', value: 'crunchyroll.' },
|
||||
];
|
||||
|
||||
const partiesColumns = [
|
||||
{
|
||||
title: 'Party Name',
|
||||
dataIndex: 'id',
|
||||
sorter: (a, b) => (a.id.toLowerCase() < b.id.toLowerCase() ? -1 : 1),
|
||||
},
|
||||
{
|
||||
title: 'Source',
|
||||
dataIndex: 'source',
|
||||
sorter: (a, b) => (a.source.toLowerCase() < b.source.toLowerCase() ? -1 : 1),
|
||||
filters: PLAYER_SOURCES,
|
||||
onFilter: (v, r) => r.source === v,
|
||||
render: (a) => PLAYER_SOURCES.filter((p) => p.value === a)[0].text,
|
||||
},
|
||||
{
|
||||
title: 'Created At',
|
||||
dataIndex: 'createTime',
|
||||
defaultSortOrder: 'descend',
|
||||
sorter: (a, b) => Date.parse(a.createTime) - Date.parse(b.createTime),
|
||||
render: (a) => new Date(Date.parse(a)).toLocaleString(),
|
||||
},
|
||||
{
|
||||
title: 'Updated At',
|
||||
dataIndex: 'updateTime',
|
||||
sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
|
||||
render: (a) => {
|
||||
const minutes = (Date.now() - Date.parse(a)) / 60000;
|
||||
const dS = new Date(a).toLocaleString();
|
||||
return (
|
||||
<Tag color={minutes <= 5 ? 'success' : minutes <= 15 ? 'processing' : 'default'}>{dS}</Tag>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'On Call',
|
||||
dataIndex: 'onCall',
|
||||
filters: [
|
||||
{
|
||||
text: 'On Call',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
text: 'Not On Call',
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
render: (a) =>
|
||||
a ? (
|
||||
<CheckCircleTwoTone color="#c0f300" id="call-icon" />
|
||||
) : (
|
||||
<CloseCircleTwoTone id="call-icon" />
|
||||
),
|
||||
onFilter: (v, r) => r.onCall === v,
|
||||
},
|
||||
];
|
||||
|
||||
export default class Dashboard extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
partiesOverview: null,
|
||||
activeTab: '1',
|
||||
refreshing: true,
|
||||
selectedParties: [],
|
||||
nameSelectors: {},
|
||||
selectors: {},
|
||||
versions: [],
|
||||
};
|
||||
this.serverStatusListener = null;
|
||||
}
|
||||
componentDidMount() {
|
||||
this.getPartiesOverview();
|
||||
this.getVersionsOverview();
|
||||
}
|
||||
getPartiesOverview = async () => {
|
||||
getPartyDashboardData()
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.setState({ partiesOverview: res.partyData, refreshing: false });
|
||||
});
|
||||
};
|
||||
getVersionsOverview = () => {
|
||||
getServerDashboardData()
|
||||
.then((res) => res.json())
|
||||
.then((res) => this.setState({ ...res.serverData, refreshing: false }));
|
||||
};
|
||||
refreshData = () => {
|
||||
this.setState({ refreshing: true });
|
||||
const { activeTab } = this.state;
|
||||
switch (activeTab) {
|
||||
case '1':
|
||||
this.getPartiesOverview();
|
||||
break;
|
||||
case '2':
|
||||
case '3':
|
||||
case '4':
|
||||
this.getVersionsOverview();
|
||||
break;
|
||||
}
|
||||
};
|
||||
tabChange = (activeTab) => {
|
||||
this.setState({ activeTab });
|
||||
};
|
||||
updateVersionMessage = (message, version) => {
|
||||
this.setState({ refreshing: true });
|
||||
const { versions } = this.state;
|
||||
const versionData = versions.filter((v) => v.version.split('.').join('') === version)[0];
|
||||
versionData.message = message;
|
||||
this.updateVersion(version, versionData);
|
||||
};
|
||||
updateVersionActive = (active, version) => {
|
||||
this.setState({ refreshing: true });
|
||||
const { versions } = this.state;
|
||||
const versionData = versions.filter((v) => v.version.split('.').join('') === version)[0];
|
||||
versionData.active = active;
|
||||
this.updateVersion(version, versionData);
|
||||
};
|
||||
updateVersion = (version, versionData) => {
|
||||
postUpdateVersionActive({ version, versionData })
|
||||
.then(() => this.refreshData())
|
||||
.catch((err) =>
|
||||
notification.error({
|
||||
description: err.message,
|
||||
message: 'Unable To Update',
|
||||
})
|
||||
);
|
||||
};
|
||||
viewPartyDetails(party) {
|
||||
console.log(party);
|
||||
}
|
||||
getSourceName(source) {
|
||||
return PLAYER_SOURCES.filter((p) => p.value === source)[0].text;
|
||||
}
|
||||
handleVideoSelectorChange = (e, s) => {
|
||||
const { selectors } = this.state;
|
||||
selectors[s] = e.target.value;
|
||||
this.setState({ selectors });
|
||||
};
|
||||
updateVideoSelector = () => {
|
||||
this.setState({ refreshing: true });
|
||||
const { selectors } = this.state;
|
||||
postUpdateVideoSelectors({ selectors })
|
||||
.then(() => this.refreshData())
|
||||
.catch((err) => {
|
||||
notification.error({
|
||||
description: err.message,
|
||||
message: 'Unable To Update',
|
||||
});
|
||||
|
||||
this.setState({ refreshing: false });
|
||||
});
|
||||
};
|
||||
handleVersionMessageChange = (e, v) => {
|
||||
const { versions } = this.state;
|
||||
versions.filter((vs) => vs.version === v)[0].message = e.target.value;
|
||||
this.setState({ versions });
|
||||
};
|
||||
handleAlertTitleChange = (value, version, index) => {
|
||||
const { versions } = this.state;
|
||||
versions.filter((vs) => vs.version === version)[0].alerts[index].title = value;
|
||||
this.setState({ versions });
|
||||
};
|
||||
handleAlertDescriptionChange = (value, version, index) => {
|
||||
const { versions } = this.state;
|
||||
versions.filter((vs) => vs.version === version)[0].alerts[index].description = value;
|
||||
this.setState({ versions });
|
||||
};
|
||||
handleAlertLinkChange = (value, version, index) => {
|
||||
const { versions } = this.state;
|
||||
versions.filter((vs) => vs.version === version)[0].alerts[index].link = value;
|
||||
this.setState({ versions });
|
||||
};
|
||||
handleAlertLinkTextChange = (value, version, index) => {
|
||||
const { versions } = this.state;
|
||||
versions.filter((vs) => vs.version === version)[0].alerts[index].linkText = value;
|
||||
this.setState({ versions });
|
||||
};
|
||||
deleteAlert = (version, index) => {
|
||||
const { versions } = this.state;
|
||||
versions.filter((vs) => vs.version === version)[0].alerts.splice(index, 1);
|
||||
if (
|
||||
versions.filter((vs) => vs.version === version)[0].importantAlert === index ||
|
||||
versions.filter((vs) => vs.version === version)[0].alerts.length < index
|
||||
) {
|
||||
versions.filter((vs) => vs.version === version)[0].importantAlert = undefined;
|
||||
}
|
||||
this.setState({ versions });
|
||||
};
|
||||
addEmptyAlert = (version) => {
|
||||
const { versions } = this.state;
|
||||
versions
|
||||
.filter((vs) => vs.version === version)[0]
|
||||
.alerts.push({
|
||||
title: '',
|
||||
description: '',
|
||||
link: '',
|
||||
linkText: '',
|
||||
});
|
||||
this.setState({ versions });
|
||||
};
|
||||
saveAlerts = (version) => {
|
||||
this.setState({ refreshing: true });
|
||||
const { versions } = this.state;
|
||||
const versionData = versions.filter((v) => v.version === version)[0];
|
||||
if (versionData.alerts.length > 0) this.updateVersion(version.split('.').join(''), versionData);
|
||||
else {
|
||||
notification.error({
|
||||
message: 'Missing Alerts',
|
||||
description: 'Must have atleast one alert',
|
||||
});
|
||||
|
||||
this.setState({ refreshing: false });
|
||||
}
|
||||
};
|
||||
changeImportantAlert = (active, version, index) => {
|
||||
const { versions } = this.state;
|
||||
if (active === false) {
|
||||
versions.filter((vs) => vs.version === version)[0].importantAlert = undefined;
|
||||
} else {
|
||||
versions.filter((vs) => vs.version === version)[0].importantAlert = index;
|
||||
}
|
||||
this.setState({ versions });
|
||||
};
|
||||
getAddMessageText = () => {
|
||||
const { activeTab } = this.state;
|
||||
switch (activeTab) {
|
||||
case '1':
|
||||
return 'Send Message';
|
||||
case '2':
|
||||
return 'Add Version';
|
||||
case '3':
|
||||
return 'Add Video Selector';
|
||||
case '4':
|
||||
return 'Add Name Selector';
|
||||
}
|
||||
};
|
||||
render() {
|
||||
const {
|
||||
partiesOverview,
|
||||
activeTab,
|
||||
refreshing,
|
||||
selectedParties,
|
||||
versions,
|
||||
nameSelectors,
|
||||
selectors,
|
||||
} = this.state;
|
||||
|
||||
const versionsColumns = [
|
||||
{
|
||||
title: 'Version',
|
||||
dataIndex: 'version',
|
||||
defaultSortOrder: 'descend',
|
||||
sorter: (a, b) =>
|
||||
parseInt(a.version.split('.').join('')) - parseInt(b.version.split('.').join('')),
|
||||
},
|
||||
{
|
||||
title: 'Active',
|
||||
dataIndex: 'active',
|
||||
filters: [
|
||||
{
|
||||
text: 'Active',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
text: 'Inactive',
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
onFilter: (v, r) => r.active === v,
|
||||
render: (a, r) => (
|
||||
<Switch
|
||||
disabled={refreshing}
|
||||
onChange={(c) => this.updateVersionActive(c, r.version.split('.').join(''))}
|
||||
checked={a}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Inactive Message',
|
||||
dataIndex: 'message',
|
||||
render: (a, r) => (
|
||||
<Input.Search
|
||||
disabled={refreshing}
|
||||
onSearch={(v) => this.updateVersionMessage(v, r.version.split('.').join(''))}
|
||||
value={a}
|
||||
onChange={(e) => this.handleVersionMessageChange(e, r.version)}
|
||||
enterButton={<EnterOutlined />}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="dashboard-wrapper">
|
||||
<Card>
|
||||
<PageHeader
|
||||
extra={[
|
||||
<Button
|
||||
key="3"
|
||||
loading={refreshing}
|
||||
disabled={refreshing}
|
||||
onClick={this.refreshData}
|
||||
shape="circle"
|
||||
icon={refreshing ? <LoadingOutlined /> : <ReloadOutlined />}
|
||||
/>,
|
||||
<Button
|
||||
key="2"
|
||||
icon={activeTab === '1' ? <SendOutlined /> : <PlusCircleOutlined />}
|
||||
disabled={activeTab === '1' && selectedParties.length === 0}
|
||||
>
|
||||
{this.getAddMessageText()}
|
||||
</Button>,
|
||||
<Button
|
||||
onClick={() => firebase.auth().signOut()}
|
||||
key="1"
|
||||
type="primary"
|
||||
danger
|
||||
icon={<LogoutOutlined />}
|
||||
>
|
||||
Logout
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<Tabs activeKey={activeTab} onChange={this.tabChange}>
|
||||
<Tabs.TabPane tab="Parties" key="1">
|
||||
<Table
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedParties,
|
||||
onChange: (selectedParties) => this.setState({ selectedParties }),
|
||||
}}
|
||||
loading={partiesOverview === null || refreshing}
|
||||
pagination={{
|
||||
position: ['bottomCenter'],
|
||||
total: partiesOverview ? partiesOverview.length : 0,
|
||||
showTotal: (t, r) => `${r[0]} to ${r[1]} of ${t}`,
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: [10, 25, 50],
|
||||
}}
|
||||
rowKey={(p) => p.id}
|
||||
onRow={(r) => ({
|
||||
onClick: () => this.viewPartyDetails(r),
|
||||
})}
|
||||
dataSource={partiesOverview}
|
||||
columns={partiesColumns}
|
||||
/>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="Versions" key="2">
|
||||
<Table
|
||||
loading={refreshing}
|
||||
pagination={{ position: ['bottomCenter'] }}
|
||||
rowKey={(p) => p.version}
|
||||
dataSource={versions}
|
||||
columns={versionsColumns}
|
||||
expandable={{
|
||||
rowExpandable: (r) => r.alerts,
|
||||
expandedRowClassName: () => 'alerts-wrapper',
|
||||
expandedRowRender: (r) => (
|
||||
<Row>
|
||||
{r.alerts.map((a, i) => (
|
||||
<Col key={`${r.version}-alerts-${i}`}>
|
||||
<Card
|
||||
actions={[
|
||||
<Button
|
||||
onClick={() => this.deleteAlert(r.version, i)}
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
shape="circle"
|
||||
color="danger"
|
||||
/>,
|
||||
<Switch
|
||||
onClick={(active) =>
|
||||
this.changeImportantAlert(active, r.version, i)
|
||||
}
|
||||
checked={r.importantAlert && r.importantAlert === i}
|
||||
/>,
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="title"
|
||||
value={a.title}
|
||||
onChange={(e) =>
|
||||
this.handleAlertTitleChange(e.target.value, r.version, i)
|
||||
}
|
||||
/>
|
||||
<Input.TextArea
|
||||
placeholder="Description"
|
||||
autoSize={{ minRows: 2, maxRows: 2 }}
|
||||
value={a.description}
|
||||
onChange={(e) =>
|
||||
this.handleAlertDescriptionChange(e.target.value, r.version, i)
|
||||
}
|
||||
/>
|
||||
<Divider orientation="left">Link</Divider>
|
||||
<Input.Group>
|
||||
<Input
|
||||
value={a.linkText}
|
||||
placeholder="Link Text"
|
||||
onChange={(e) =>
|
||||
this.handleAlertLinkTextChange(e.target.value, r.version, i)
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
value={a.link}
|
||||
placeholder="Link"
|
||||
onChange={(e) =>
|
||||
this.handleAlertLinkChange(e.target.value, r.version, i)
|
||||
}
|
||||
/>
|
||||
</Input.Group>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
<Col>
|
||||
<Card
|
||||
onClick={() => this.addEmptyAlert(r.version)}
|
||||
className="add-alert-card"
|
||||
>
|
||||
<PlusCircleFilled />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card onClick={() => this.saveAlerts(r.version)} className="add-alert-card">
|
||||
<SaveFilled />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="Video Selectors" key="3">
|
||||
{Object.keys(selectors)
|
||||
.sort()
|
||||
.map((source) => (
|
||||
<Input
|
||||
key={`video-selector-${source}`}
|
||||
className="video-selector-input"
|
||||
addonBefore={this.getSourceName(source)}
|
||||
value={selectors[source]}
|
||||
onChange={(e) => this.handleVideoSelectorChange(e, source)}
|
||||
/>
|
||||
))}
|
||||
<Button
|
||||
block
|
||||
type="primary"
|
||||
icon={<SaveOutlined />}
|
||||
className="save-video-selector"
|
||||
onClick={this.updateVideoSelector}
|
||||
loading={refreshing}
|
||||
>
|
||||
Save Video Selectors
|
||||
</Button>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="Name Selectors" key="4">
|
||||
name selectors
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user