diff options
author | AL-LCL <alvin@alvinhavel.com> | 2023-05-19 10:39:49 +0200 |
---|---|---|
committer | AL-LCL <alvin@alvinhavel.com> | 2023-05-19 10:39:49 +0200 |
commit | 58ebd3bc0f00c532e97e9a5571471ffab87934ba (patch) | |
tree | 6e099e59af07206df6edf2b0c585d0c5a466d4bd /server/web/src/components/Sidebar.tsx |
Diffstat (limited to 'server/web/src/components/Sidebar.tsx')
-rw-r--r-- | server/web/src/components/Sidebar.tsx | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/server/web/src/components/Sidebar.tsx b/server/web/src/components/Sidebar.tsx new file mode 100644 index 0000000..d016a19 --- /dev/null +++ b/server/web/src/components/Sidebar.tsx @@ -0,0 +1,136 @@ +import { IProps, IState } from '../interfaces/components/Sidebar.interface'; +import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'; +import { IStream } from '../interfaces/Stream.interface'; +import React, { Component } from 'react'; +import Card from './Card'; +import { + SidebarDropdown, + SidebarDropdownButton, + SidebarDropdownContent, + SidebarStreamContent, + SidebarStream, + SidebarStreamSection, + SidebarStreamInput, + SidebarStreamButton, + SidebarBlock +} from '../design/components/Sidebar.design'; + +class Sidebar extends Component<IProps, IState> { + sourceInput: any = React.createRef(); + titleInput: any = React.createRef(); + + constructor(props: IProps) { + super(props); + + this.state = { + showContent: false, + streams: [] + }; + } + + removeStream = (toRemove: IStream) => + this.setState({ + streams: this.state.streams.filter( + (stream: IStream) => ( + !(stream.source === toRemove.source + && stream.title === toRemove.title) + ) + ) + }); + + addStream = () => { + const source = this.sourceInput.current; + const title = this.titleInput.current; + const sourceValue = source.value.trim(); + const titleValue = title.value.trim(); + let sourcePassed = true; + let titlePassed = true; + + if (sourceValue === '') { + source.style.border = 'solid thin rgb(225, 53, 57)'; + sourcePassed = false; + } else + source.style.border = 'solid thin rgb(31, 93, 117)'; + + if (titleValue === '') { + title.style.border = 'solid thin rgb(225, 53, 57)'; + titlePassed = false; + } else + title.style.border = 'solid thin rgb(31, 93, 117)'; + + if (sourcePassed && titlePassed) + if (this.streamExists(sourceValue, titleValue)) + alert('Stream Already Exists!') + else { + this.state.streams.push({ + source: sourceValue, + title: titleValue + }); + source.value = ''; + title.value = ''; + } + } + + streamExists = (source: string, title: string) => { + for (const stream of this.state.streams) + if (stream.source === source && stream.title === title) + return true; + return false; + } + + updateShowContent = () => + this.setState({ showContent: !this.state.showContent }); + + render() { + const { showContent, streams } = this.state; + + return ( + <SidebarDropdown> + <SidebarDropdownButton onClick={this.updateShowContent}> + {showContent ? ( + <FaChevronRight size=".8rem" /> + ) : ( + <FaChevronLeft size=".8rem" /> + )} + </SidebarDropdownButton> + + <SidebarDropdownContent active={showContent}> + <SidebarStream> + <SidebarStreamInput + type="search" + placeholder="Flash video source..." + ref={this.sourceInput} + /> + <SidebarStreamSection> + <SidebarStreamInput + type="search" + placeholder="Stream title..." + ref={this.titleInput} + /> + <SidebarStreamButton + onClick={this.addStream} + > + Add + </SidebarStreamButton> + </SidebarStreamSection> + </SidebarStream> + {streams.length === 0 ? ( + <SidebarBlock>No Streams Available</SidebarBlock> + ) : ( + <SidebarStreamContent> + {streams.map((stream: IStream) => ( + <Card + removeStream={this.removeStream} + source={stream.source} + title={stream.title} + /> + ))} + </SidebarStreamContent> + )} + </SidebarDropdownContent> + </SidebarDropdown> + ); + } +} + +export default Sidebar; |