How to use setSelected method in Playwright Internal

Best JavaScript code snippet using playwright-internal

HomePage.js

Source:HomePage.js Github

copy

Full Screen

1import MainWrapperDefault from '../wrappers/MainWrapper'2import {3 TreePageHeader,4 TreeTitleArea,5 StyledDisplayName,6 TreeEditorArea,7 TreeEditButtonArea,8 DocuWrapper,9 DocuHeaderArea,10 DocuBodyArea,11 NodeButtonArea,12 PrevNodeArea,13 NextNodeArea,14 HalfWidthContainer,15 HalfWidthDocumentContainer,16 EditDocuButtonArea,17} from '../pages/techtree/TechtreeDetailPage'18import DoubleSideLayout from '../wrappers/DoubleSideLayout'19import MarkdownEditor from '../components/MarkdownEditor'20import MarkdownRenderer from '../components/MarkdownRenderer'21import { HalfWidthWrapper } from '../wrappers/HalfWidthWrapper'22import TreeMapDemo from '../components/TreeMapDemo'23import { Spinner } from '../components/Spinner'24import { DangerButton, DefaultButton } from '../components/Button'25import {26 TitleInput,27 TitleBottomLine,28 StyledTitle,29} from '../components/TitleInput'30import Loader from 'react-loader-spinner'31import MainIcon from '../assets/MainIcon.png'32import HomeImage from '../assets/HomeImage.png'33import CountUp from 'react-countup'34import React, { useState, useEffect, useCallback } from 'react'35import styled from 'styled-components'36import { Link } from 'react-router-dom'37import { useDispatch, useSelector } from 'react-redux'38import { setUserPlace } from '../redux/auth'39import { changeSortingMethod } from '../redux/board'40import {41 boxShadow,42 colorPalette,43 hoverAction,44 fontSize,45 fontWeight,46} from '../lib/constants'47import { selectNode, changeTreeTitle, finishEditDocu } from '../redux/demo'48import { editTechtree, finishTechtreeEdit } from '../redux/techtree'49import { returnPreviousNodeList, returnNextNodeList } from '../lib/functions'50import departments from '../lib/yonseiDepartments.json'51import translationText from '../lib/translation.json'52import { authService } from '../lib/firebase'53import Swal from 'sweetalert2'54const colorSet = [colorPalette.teal1, colorPalette.green1, colorPalette.lime1]55const nameSet = [56 '이과대',57 '공대',58 '문과대',59 '상경대',60 '경영대',61 '생과대',62 '생명대',63 '사과대',64 '신과대',65 '음대',66 '간호대',67 '의대',68 '치대',69 '언더우드',70 '교육대',71 '글로벌인재',72 '연계전공',73 '약학',74] //shuffleArray()75//const topCatchPraise1 = 'Foresty와 함께 지식의 숲을 가꿔나가요.'76//const topCatchPraise2 = '지금까지 Foresty에 심어진 나무'77const topCatchPraise1 = translationText.en.topCatchPraise178const topCatchPraise2 = translationText.en.topCatchPraise279const catchPraise1 = 'With '80const catchPraise2 = 'Grow Your Forest'81const catchPraise3 = 'Community By Your Major'82const catchPraise4 = 'Foresty 의 전공별 게시판'83const catchPraise5 =84 '같은 전공끼리 모이는 커뮤니티를 통해 다양한 정보를 공유해 보세요.'85export default function HomePage() {86 const dispatch = useDispatch()87 const { treeSum } = useSelector((state) => {88 return { treeSum: state.techtree.treeSum }89 })90 const isClient = typeof window === 'object'91 function getSize() {92 return {93 width: isClient ? window.innerWidth : undefined,94 height: isClient ? window.innerHeight : undefined,95 }96 }97 const [windowSize, setWindowSize] = useState(getSize)98 const [isPopup, setIsPopUp] = useState(false)99 const [selectedDepts, setselectedDepts] = useState(null)100 const onSetIsPopUp = useCallback((param) => {101 setIsPopUp(param)102 })103 const onSetselectedDepts = useCallback((param) => {104 setselectedDepts(param)105 })106 useEffect(() => {107 authService.currentUser?.reload()108 dispatch(setUserPlace('main'))109 if (!isClient) {110 return false111 }112 function handleResize() {113 setWindowSize(getSize())114 }115 window.addEventListener('resize', handleResize)116 return () => window.removeEventListener('resize', handleResize)117 }, [])118 return (119 <MainWrapperDefault>120 <HomePageHeader>121 <div>122 <img src={MainIcon} height="101px" />123 <br />124 <div>125 <br />126 <div127 style={{128 fontSize: fontSize.large,129 fontWeight: fontWeight.semibold,130 }}131 >132 {topCatchPraise1}133 </div>134 <br />135 <div>{topCatchPraise2}</div>136 <br />137 <TreeSumText>138 {treeSum ? <CountUp end={treeSum} duration={2.5} /> : ''}139 </TreeSumText>140 </div>141 </div>142 </HomePageHeader>143 <DemoTree />144 <HomePageSection>145 <HomePageMiddle>146 <MiddleSectionTextArea>147 <BigText>{catchPraise3}</BigText>148 <LargeBoldText>{catchPraise4}</LargeBoldText>149 <br />150 <br />151 <br />152 <div style={{ fontSize: `${fontSize.xsmall}` }}>{catchPraise5}</div>153 </MiddleSectionTextArea>154 <div>155 <img156 style={{ width: '100%', objectFit: 'cover' }}157 src={HomeImage}158 />159 </div>160 </HomePageMiddle>161 </HomePageSection>162 <BlockWrapper>163 {windowSize.width > 1024 ? (164 <DesktopBlocks165 onSetIsPopUp={setIsPopUp}166 onSetselectedDepts={onSetselectedDepts}167 />168 ) : (169 ''170 )}171 {1024 > windowSize.width && windowSize.width > 650 ? (172 <TabletBlocks173 onSetIsPopUp={setIsPopUp}174 onSetselectedDepts={onSetselectedDepts}175 />176 ) : (177 ''178 )}179 {650 > windowSize.width ? (180 <MobileBlocks181 onSetIsPopUp={setIsPopUp}182 onSetselectedDepts={onSetselectedDepts}183 />184 ) : (185 ''186 )}187 </BlockWrapper>188 {/* popup modal에 대한 코드 시작 */}189 <PopupWrapper190 isPopup={isPopup}191 onClick={(e) => {192 setIsPopUp(false)193 setselectedDepts(null)194 }}195 >196 <PopupGridContainer197 onClick={(e) => {198 e.preventDefault()199 }}200 >201 {selectedDepts?.map((dept) => {202 return (203 <PopupDept204 onClick={(e) => {205 e.preventDefault()206 dispatch(changeSortingMethod(dept, 'time', 1))207 }}208 >209 <Link210 style={{211 cursor: 'pointer',212 display: 'grid',213 boxSizing: 'border-box',214 padding: '20px 10px',215 placeItems: 'center',216 width: '100%',217 height: '100%',218 }}219 to={`/board/${dept}?page=1`}220 >221 {dept}222 </Link>223 </PopupDept>224 )225 })}226 </PopupGridContainer>227 </PopupWrapper>228 </MainWrapperDefault>229 )230}231export const HomePageSection = styled.div`232 display: grid;233 font-size: ${fontSize.medium};234 line-height: ${fontSize.xlarge};235 text-align: center;236 text-decoration: none solid rgb(53, 53, 53);237 height: 575px;238 align-items: center;239`240export const HomePageHeader = styled(HomePageSection)``241export const HomePageMiddle = styled(HomePageSection)`242 grid-template-columns: 1fr 1fr;243 @media (max-width: 768px) {244 grid-template-columns: 1fr;245 }246`247export const MiddleSectionTextArea = styled.div`248 text-align: left;249 @media (max-width: 768px) {250 text-align: center;251 }252`253export const BigText = styled.div`254 font-size: 40px;255 line-height: 45px;256 font-weight: 900;257 margin-top: 2rem;258 margin-bottom: 0.5rem;259`260export const LargeBoldText = styled.div`261 all: unset;262 font-weight: bold;263 color: ${colorPalette.mainGreen};264 font-size: ${fontSize.large};265`266export const TreeSumText = styled.div`267 font-size: ${fontSize.xxlarge};268 font-weight: 500;269 color: ${colorPalette.teal6};270 line-height: 42px;271`272function DemoTree() {273 const dispatch = useDispatch()274 const {275 techtreeTitle,276 nodeList,277 linkList,278 selectedNode,279 previousNodeList,280 nextNodeList,281 } = useSelector((state) => {282 return {283 techtreeTitle: state.demo.demoTitle,284 nodeList: state.demo.demoNodeList,285 linkList: state.demo.demoLinkList,286 selectedNode: state.demo.selectedNode,287 previousNodeList: state.demo.previousNodeList,288 nextNodeList: state.demo.nextNodeList,289 }290 })291 const { isEditingTechtree, techtreeData } = useSelector((state) => {292 return {293 isEditingTechtree: state.techtree.isEditingTechtree,294 techtreeData: state.techtree.techtreeData,295 }296 })297 const [documentTitle, setDocumentTitle] = useState('')298 const [documentText, setDocumentText] = useState('')299 const [isEditingDocument, setIsEditingDocument] = useState(false)300 useEffect(() => {301 setDocumentTitle(selectedNode.name)302 setDocumentText(selectedNode.body)303 }, [selectedNode, dispatch])304 const onChangeDocumentTitle = useCallback(305 (e) => {306 e.preventDefault()307 setDocumentTitle(e.target.value)308 },309 [documentTitle]310 )311 const onChangeTechtreeTitle = useCallback((e) => {312 e.preventDefault()313 dispatch(changeTreeTitle(e.target.value))314 }, [])315 const onFinishDocuEdit = useCallback(() => {316 dispatch(317 finishEditDocu(318 selectedNode.id,319 documentTitle,320 documentText,321 nodeList,322 linkList,323 techtreeData324 )325 )326 setIsEditingDocument(false)327 }, [328 isEditingDocument,329 selectedNode,330 documentTitle,331 documentText,332 nodeList,333 linkList,334 techtreeData,335 ])336 const onClickTechtreeEdit = useCallback(() => {337 if (isEditingTechtree) {338 dispatch(finishTechtreeEdit())339 } else {340 dispatch(editTechtree())341 }342 }, [dispatch, isEditingTechtree])343 const onClickTechtreeCommit = useCallback(344 async (e) => {345 e.preventDefault()346 },347 [dispatch, nodeList, linkList, techtreeTitle]348 )349 return (350 <>351 <TreeTitleArea>352 <TitleInput353 value={techtreeTitle}354 placeholder="트리의 주제를 적어주세요!"355 onChange={onChangeTechtreeTitle}356 maxLength="30"357 />358 </TreeTitleArea>359 <DoubleSideLayout>360 <HalfWidthContainer>361 <TreeEditorArea>362 <TreeMapDemo />363 </TreeEditorArea>364 <TreeEditButtonArea>365 <DefaultButton366 onClick={() => {367 Swal.fire('Fork Other Tree', 'You can add tree to your Forest!')368 // alert(369 // '마음에 드는 트리를 복사해 자신의 forest 에 추가할 수 있어요!'370 // )371 }}372 >373 Fork This Tree374 </DefaultButton>375 <DefaultButton376 onClick={() => {377 Swal.fire(378 'Easy Backup',379 'You can download tree as a json format!'380 )381 //alert('작성한 트리를 json 형태로 다운받을 수 있어요.')382 }}383 >384 Download Tree385 </DefaultButton>386 {isEditingTechtree ? (387 <DefaultButton onClick={onClickTechtreeEdit}>Done</DefaultButton>388 ) : (389 <DefaultButton onClick={onClickTechtreeEdit}>390 Edit Tree391 </DefaultButton>392 )}393 <DefaultButton394 onClick={() => {395 Swal.fire(396 'Update Tree',397 'When it is clicked, changes are saved!'398 )399 //alert('이 버튼을 누르면 트리에서의 변경사항이 저장돼요!')400 }}401 >402 Save Changes403 </DefaultButton>404 <DangerButton405 onClick={() => {406 Swal.fire('Watch Out!', 'This button delete tree totally!')407 //const deleteOK = window.confirm(408 // `조심하세요! 이 버튼을 누르면 트리 전체가 삭제돼요!`409 //)410 //if (deleteOK) {411 // //alert('')412 //} else {413 // return414 //}415 }}416 >417 Delete All418 </DangerButton>419 </TreeEditButtonArea>420 </HalfWidthContainer>421 <HalfWidthDocumentContainer>422 <DocuWrapper id="docuWrapper">423 <DocuHeaderArea>424 <div className="docuTitle">425 {isEditingDocument ? (426 <div>427 <TitleInput428 value={documentTitle}429 onChange={onChangeDocumentTitle}430 />431 </div>432 ) : (433 <StyledTitle>{selectedNode.name}</StyledTitle>434 )}435 </div>436 <EditDocuButtonArea>437 {isEditingDocument ? (438 <DefaultButton onClick={onFinishDocuEdit}>439 수정완료440 </DefaultButton>441 ) : (442 ''443 )}444 {typeof selectedNode.id !== 'undefined' &&445 !isEditingDocument ? (446 <DefaultButton447 onClick={() => {448 setIsEditingDocument(true)449 }}450 >451 Edit452 </DefaultButton>453 ) : (454 ''455 )}456 </EditDocuButtonArea>457 </DocuHeaderArea>458 <TitleBottomLine />459 <DocuBodyArea>460 {isEditingDocument ? (461 <MarkdownEditor462 bindingText={documentText}463 bindingSetter={setDocumentText}464 width="100%"465 />466 ) : (467 <MarkdownRenderer text={selectedNode.body} />468 )}469 </DocuBodyArea>470 </DocuWrapper>471 <NodeButtonArea>472 <PrevNodeArea>473 {previousNodeList.length > 0 ? <div>Previous</div> : ''}474 {previousNodeList.map((node, idx) => {475 return (476 <div key={idx}>477 <DefaultButton478 onClick={() => {479 const newPreviousNodeList = returnPreviousNodeList(480 linkList,481 nodeList,482 node483 )484 const newNextNodeList = returnNextNodeList(485 linkList,486 nodeList,487 node488 )489 dispatch(490 selectNode(newPreviousNodeList, newNextNodeList, node)491 )492 const offsetElement = document.getElementById(493 'docuWrapper'494 )495 const clientRect = offsetElement.getBoundingClientRect()496 const relativeTop = clientRect.top497 const scrolledTopLength = window.pageYOffset498 const absoluteYPosition =499 scrolledTopLength + relativeTop500 window.scrollTo(0, absoluteYPosition - 80)501 }}502 >503 {node?.name}504 </DefaultButton>505 </div>506 )507 })}508 </PrevNodeArea>509 <NextNodeArea>510 {nextNodeList.length > 0 ? <div>Next</div> : ''}511 {nextNodeList.map((node, idx) => {512 return (513 <div key={idx}>514 <DefaultButton515 onClick={() => {516 const newPreviousNodeList = returnPreviousNodeList(517 linkList,518 nodeList,519 node520 )521 const newNextNodeList = returnNextNodeList(522 linkList,523 nodeList,524 node525 )526 dispatch(527 selectNode(newPreviousNodeList, newNextNodeList, node)528 )529 const offsetElement = document.getElementById(530 'docuWrapper'531 )532 const clientRect = offsetElement.getBoundingClientRect()533 const relativeTop = clientRect.top534 const scrolledTopLength = window.pageYOffset535 const absoluteYPosition =536 scrolledTopLength + relativeTop537 window.scrollTo(0, absoluteYPosition - 80)538 }}539 >540 {node?.name}541 </DefaultButton>542 </div>543 )544 })}545 </NextNodeArea>546 </NodeButtonArea>547 </HalfWidthDocumentContainer>548 </DoubleSideLayout>549 <br />550 </>551 )552}553function OneBlock({ color, name, setIsPopUp, setselectedDepts }) {554 return (555 <WidthOneBlock556 style={{557 backgroundColor: color,558 color: '#ffffff',559 fontWeight: 500,560 fontSize: fontSize.xlarge,561 cursor: 'pointer',562 }}563 onClick={() => {564 setIsPopUp(true)565 setselectedDepts(departments[name])566 }}567 >568 {name}569 {/* <Link570 to={`/board/${name}`}571 style={{572 width: '100%',573 height: '100%',574 display: 'grid',575 alignItems: 'center',576 }}577 >578 579 </Link> */}580 </WidthOneBlock>581 )582}583function ThreeBlock({ color, name, name2 }) {584 return (585 <WidthThreeBlock586 style={{587 backgroundColor: color,588 color: colorPalette.gray7,589 }}590 >591 <Link592 to={`/forest`}593 style={{594 width: '100%',595 height: '100%',596 display: 'grid',597 alignItems: 'center',598 }}599 >600 <div style={{ display: `inline` }}>601 <span>{name}</span>602 <span style={{ fontWeight: '700' }}>{name2}</span>603 </div>604 </Link>605 </WidthThreeBlock>606 )607}608export const BlockWrapper = styled.div`609 display: grid;610 grid-gap: 25px;611 align-items: center; // 내부요소들 세로중앙정렬612 justify-items: center; // 가로 중앙정렬613 grid-auto-columns: minmax(125px, auto);614 grid-auto-rows: minmax(125px, auto);615 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;616 @media (max-width: 1440px) {617 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;618 }619 @media (max-width: 1024px) {620 grid-template-columns: 1fr 1fr 1fr 1fr;621 }622 @media (max-width: 650px) {623 grid-template-columns: 1fr 1fr 1fr;624 }625`626export const WidthOneBlock = styled.div`627 grid-row-start: span 1;628 grid-column-start: span 1;629 border-radius: 5px;630 text-align: center;631 display: grid;632 align-items: center;633 width: 100%;634 height: 100%;635 aspect-ratio: 1/1; // 모바일에서는 작동을 안해!636 box-shadow: ${boxShadow.default};637 &:hover {638 ${hoverAction}639 }640`641export const WidthThreeBlock = styled.div`642 grid-row-start: span 1;643 grid-column-start: span 3;644 text-align: center;645 border-radius: 5px;646 display: grid;647 align-items: center;648 width: 100%;649 height: 100%;650 font-size: 40px;651 box-shadow: ${boxShadow.default};652 &:hover {653 ${hoverAction}654 }655`656function DesktopBlocks({ onSetIsPopUp, onSetselectedDepts }) {657 return (658 <>659 <OneBlock660 color={colorPalette.mainGreen}661 name={nameSet[0]}662 setIsPopUp={onSetIsPopUp}663 setselectedDepts={onSetselectedDepts}664 ></OneBlock>665 <OneBlock666 color={colorPalette.mainGreen}667 name={nameSet[1]}668 setIsPopUp={onSetIsPopUp}669 setselectedDepts={onSetselectedDepts}670 ></OneBlock>671 <OneBlock672 color={colorPalette.mainGreen}673 name={nameSet[2]}674 setIsPopUp={onSetIsPopUp}675 setselectedDepts={onSetselectedDepts}676 ></OneBlock>677 <OneBlock678 color={colorPalette.mainGreen}679 name={nameSet[3]}680 setIsPopUp={onSetIsPopUp}681 setselectedDepts={onSetselectedDepts}682 ></OneBlock>683 <OneBlock684 color={colorPalette.mainGreen}685 name={nameSet[4]}686 setIsPopUp={onSetIsPopUp}687 setselectedDepts={onSetselectedDepts}688 ></OneBlock>689 <OneBlock690 color={colorPalette.mainGreen}691 name={nameSet[5]}692 setIsPopUp={onSetIsPopUp}693 setselectedDepts={onSetselectedDepts}694 ></OneBlock>695 <OneBlock696 color={colorPalette.mainGreen}697 name={nameSet[6]}698 setIsPopUp={onSetIsPopUp}699 setselectedDepts={onSetselectedDepts}700 ></OneBlock>701 <ThreeBlock702 color={colorPalette.gray0}703 name={catchPraise1}704 name2={'Foresty'}705 ></ThreeBlock>706 <OneBlock707 color={colorPalette.mainGreen}708 name={nameSet[7]}709 setIsPopUp={onSetIsPopUp}710 setselectedDepts={onSetselectedDepts}711 ></OneBlock>712 <OneBlock713 color={colorPalette.mainGreen}714 name={nameSet[8]}715 setIsPopUp={onSetIsPopUp}716 setselectedDepts={onSetselectedDepts}717 ></OneBlock>718 <OneBlock719 color={colorPalette.mainGreen}720 name={nameSet[9]}721 setIsPopUp={onSetIsPopUp}722 setselectedDepts={onSetselectedDepts}723 ></OneBlock>724 <OneBlock725 color={colorPalette.mainGreen}726 name={nameSet[10]}727 setIsPopUp={onSetIsPopUp}728 setselectedDepts={onSetselectedDepts}729 ></OneBlock>730 <ThreeBlock color={colorPalette.gray0} name={catchPraise2}></ThreeBlock>731 <OneBlock732 color={colorPalette.mainGreen}733 name={nameSet[11]}734 setIsPopUp={onSetIsPopUp}735 setselectedDepts={onSetselectedDepts}736 ></OneBlock>737 <OneBlock738 color={colorPalette.mainGreen}739 name={nameSet[12]}740 setIsPopUp={onSetIsPopUp}741 setselectedDepts={onSetselectedDepts}742 ></OneBlock>743 <OneBlock744 color={colorPalette.mainGreen}745 name={nameSet[13]}746 setIsPopUp={onSetIsPopUp}747 setselectedDepts={onSetselectedDepts}748 ></OneBlock>749 <OneBlock750 color={colorPalette.mainGreen}751 name={nameSet[14]}752 setIsPopUp={onSetIsPopUp}753 setselectedDepts={onSetselectedDepts}754 ></OneBlock>755 <OneBlock756 color={colorPalette.mainGreen}757 name={nameSet[15]}758 setIsPopUp={onSetIsPopUp}759 setselectedDepts={onSetselectedDepts}760 ></OneBlock>761 <OneBlock762 color={colorPalette.mainGreen}763 name={nameSet[16]}764 setIsPopUp={onSetIsPopUp}765 setselectedDepts={onSetselectedDepts}766 ></OneBlock>767 <OneBlock768 color={colorPalette.mainGreen}769 name={nameSet[17]}770 setIsPopUp={onSetIsPopUp}771 setselectedDepts={onSetselectedDepts}772 ></OneBlock>773 </>774 )775}776function TabletBlocks({ onSetIsPopUp, onSetselectedDepts }) {777 return (778 <>779 <OneBlock780 color={colorPalette.mainGreen}781 name={nameSet[0]}782 setIsPopUp={onSetIsPopUp}783 setselectedDepts={onSetselectedDepts}784 ></OneBlock>785 <OneBlock786 color={colorPalette.mainGreen}787 name={nameSet[1]}788 setIsPopUp={onSetIsPopUp}789 setselectedDepts={onSetselectedDepts}790 ></OneBlock>791 <OneBlock792 color={colorPalette.mainGreen}793 name={nameSet[2]}794 setIsPopUp={onSetIsPopUp}795 setselectedDepts={onSetselectedDepts}796 ></OneBlock>797 <OneBlock798 color={colorPalette.mainGreen}799 name={nameSet[3]}800 setIsPopUp={onSetIsPopUp}801 setselectedDepts={onSetselectedDepts}802 ></OneBlock>803 <ThreeBlock804 color={colorPalette.gray0}805 name={catchPraise1}806 name2={'Foresty'}807 ></ThreeBlock>808 <OneBlock809 color={colorPalette.mainGreen}810 name={nameSet[4]}811 setIsPopUp={onSetIsPopUp}812 setselectedDepts={onSetselectedDepts}813 ></OneBlock>814 <OneBlock815 color={colorPalette.mainGreen}816 name={nameSet[5]}817 setIsPopUp={onSetIsPopUp}818 setselectedDepts={onSetselectedDepts}819 ></OneBlock>820 <ThreeBlock color={colorPalette.gray0} name={catchPraise2}></ThreeBlock>821 <OneBlock822 color={colorPalette.mainGreen}823 name={nameSet[6]}824 setIsPopUp={onSetIsPopUp}825 setselectedDepts={onSetselectedDepts}826 ></OneBlock>827 <OneBlock828 color={colorPalette.mainGreen}829 name={nameSet[7]}830 setIsPopUp={onSetIsPopUp}831 setselectedDepts={onSetselectedDepts}832 ></OneBlock>833 <OneBlock834 color={colorPalette.mainGreen}835 name={nameSet[8]}836 setIsPopUp={onSetIsPopUp}837 setselectedDepts={onSetselectedDepts}838 ></OneBlock>839 <OneBlock840 color={colorPalette.mainGreen}841 name={nameSet[9]}842 setIsPopUp={onSetIsPopUp}843 setselectedDepts={onSetselectedDepts}844 ></OneBlock>845 <OneBlock846 color={colorPalette.mainGreen}847 name={nameSet[10]}848 setIsPopUp={onSetIsPopUp}849 setselectedDepts={onSetselectedDepts}850 ></OneBlock>851 <OneBlock852 color={colorPalette.mainGreen}853 name={nameSet[11]}854 setIsPopUp={onSetIsPopUp}855 setselectedDepts={onSetselectedDepts}856 ></OneBlock>857 <OneBlock858 color={colorPalette.mainGreen}859 name={nameSet[12]}860 setIsPopUp={onSetIsPopUp}861 setselectedDepts={onSetselectedDepts}862 ></OneBlock>863 <OneBlock864 color={colorPalette.mainGreen}865 name={nameSet[13]}866 setIsPopUp={onSetIsPopUp}867 setselectedDepts={onSetselectedDepts}868 ></OneBlock>869 <OneBlock870 color={colorPalette.mainGreen}871 name={nameSet[14]}872 setIsPopUp={onSetIsPopUp}873 setselectedDepts={onSetselectedDepts}874 ></OneBlock>875 <OneBlock876 color={colorPalette.mainGreen}877 name={nameSet[15]}878 setIsPopUp={onSetIsPopUp}879 setselectedDepts={onSetselectedDepts}880 ></OneBlock>881 <OneBlock882 color={colorPalette.mainGreen}883 name={nameSet[16]}884 setIsPopUp={onSetIsPopUp}885 setselectedDepts={onSetselectedDepts}886 ></OneBlock>887 <OneBlock888 color={colorPalette.mainGreen}889 name={nameSet[17]}890 setIsPopUp={onSetIsPopUp}891 setselectedDepts={onSetselectedDepts}892 ></OneBlock>893 </>894 )895}896function MobileBlocks({ onSetIsPopUp, onSetselectedDepts }) {897 return (898 <>899 <OneBlock900 color={colorPalette.mainGreen}901 name={nameSet[0]}902 setIsPopUp={onSetIsPopUp}903 setselectedDepts={onSetselectedDepts}904 ></OneBlock>905 <OneBlock906 color={colorPalette.mainGreen}907 name={nameSet[1]}908 setIsPopUp={onSetIsPopUp}909 setselectedDepts={onSetselectedDepts}910 ></OneBlock>911 <OneBlock912 color={colorPalette.mainGreen}913 name={nameSet[2]}914 setIsPopUp={onSetIsPopUp}915 setselectedDepts={onSetselectedDepts}916 ></OneBlock>917 <ThreeBlock918 color={colorPalette.gray0}919 name={catchPraise1}920 name2={'Foresty'}921 ></ThreeBlock>922 <ThreeBlock color={colorPalette.gray0} name={catchPraise2}></ThreeBlock>923 <OneBlock924 color={colorPalette.mainGreen}925 name={nameSet[3]}926 setIsPopUp={onSetIsPopUp}927 setselectedDepts={onSetselectedDepts}928 ></OneBlock>929 <OneBlock930 color={colorPalette.mainGreen}931 name={nameSet[4]}932 setIsPopUp={onSetIsPopUp}933 setselectedDepts={onSetselectedDepts}934 ></OneBlock>935 <OneBlock936 color={colorPalette.mainGreen}937 name={nameSet[5]}938 setIsPopUp={onSetIsPopUp}939 setselectedDepts={onSetselectedDepts}940 ></OneBlock>941 <OneBlock942 color={colorPalette.mainGreen}943 name={nameSet[6]}944 setIsPopUp={onSetIsPopUp}945 setselectedDepts={onSetselectedDepts}946 ></OneBlock>947 <OneBlock948 color={colorPalette.mainGreen}949 name={nameSet[7]}950 setIsPopUp={onSetIsPopUp}951 setselectedDepts={onSetselectedDepts}952 ></OneBlock>953 <OneBlock954 color={colorPalette.mainGreen}955 name={nameSet[8]}956 setIsPopUp={onSetIsPopUp}957 setselectedDepts={onSetselectedDepts}958 ></OneBlock>959 <OneBlock960 color={colorPalette.mainGreen}961 name={nameSet[9]}962 setIsPopUp={onSetIsPopUp}963 setselectedDepts={onSetselectedDepts}964 ></OneBlock>965 <OneBlock966 color={colorPalette.mainGreen}967 name={nameSet[10]}968 setIsPopUp={onSetIsPopUp}969 setselectedDepts={onSetselectedDepts}970 ></OneBlock>971 <OneBlock972 color={colorPalette.mainGreen}973 name={nameSet[11]}974 setIsPopUp={onSetIsPopUp}975 setselectedDepts={onSetselectedDepts}976 ></OneBlock>977 <OneBlock978 color={colorPalette.mainGreen}979 name={nameSet[12]}980 setIsPopUp={onSetIsPopUp}981 setselectedDepts={onSetselectedDepts}982 ></OneBlock>983 <OneBlock984 color={colorPalette.mainGreen}985 name={nameSet[13]}986 setIsPopUp={onSetIsPopUp}987 setselectedDepts={onSetselectedDepts}988 ></OneBlock>989 <OneBlock990 color={colorPalette.mainGreen}991 name={nameSet[14]}992 setIsPopUp={onSetIsPopUp}993 setselectedDepts={onSetselectedDepts}994 ></OneBlock>995 <OneBlock996 color={colorPalette.mainGreen}997 name={nameSet[15]}998 setIsPopUp={onSetIsPopUp}999 setselectedDepts={onSetselectedDepts}1000 ></OneBlock>1001 <OneBlock1002 color={colorPalette.mainGreen}1003 name={nameSet[16]}1004 setIsPopUp={onSetIsPopUp}1005 setselectedDepts={onSetselectedDepts}1006 ></OneBlock>1007 <OneBlock1008 color={colorPalette.mainGreen}1009 name={nameSet[17]}1010 setIsPopUp={onSetIsPopUp}1011 setselectedDepts={onSetselectedDepts}1012 ></OneBlock>1013 </>1014 )1015}1016// popup1017const PopupWrapper = styled.div`1018 display: ${(props) => {1019 return props.isPopup ? 'grid' : 'none'1020 }};1021 opacity: ${(props) => {1022 return props.isPopup ? '1' : '0'1023 }};1024 position: fixed;1025 place-items: center;1026 width: 100vw;1027 height: 100vh;1028 background: rgba(0, 0, 0, 0.2);1029 left: 0;1030 top: 0;1031`1032const PopupGridContainer = styled.div`1033 width: 70vw;1034 display: grid;1035 align-items: center;1036 grid-gap: 10px;1037 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));1038`1039const PopupDept = styled.div`1040 border-radius: 15px;1041 color: white;1042 font-weight: bold;1043 background: ${colorPalette.mainGreen};...

Full Screen

Full Screen

kit.js

Source:kit.js Github

copy

Full Screen

1import React, { useState } from 'react';2import ItemsLayout from './itemsLayout';3import SideNavigation from './Sidebar'4function Uikit() {5 //Kit state objects6 const [selectedAvatars, setselectedAvatars] = useState(true);7 const [selectedButtons, setSelectedButtons] = useState(false);8 const [selectedCards, setselectedCards] = useState(false);9 const [selectedCharts, setselectedCharts] = useState(false);10 const [selectedContainers, setselectedContainers] = useState(false);11 const [selectedDropdowns, setselectedDropdowns] = useState(false);12 const [selectedForms, setselectedForms] = useState(false);13 const [selectedInputs, setselectedInputs] = useState(false);14 const [selectedMenus, setselectedMenus] = useState(false);15 const [selectedModals, setselectedModals] = useState(false);16 const [selectedNavs, setselectedNavs] = useState(false);17 const [selectedNotifications, setselectedNotifications] = useState(false);18 const [selectedPagination, setselectedPagination] = useState(false);19 const [selectedProgresses, setselectedProgresses] = useState(false);20 const [selectedScrolls, setselectedScrolls] = useState(false);21 const [selectedSpinners, setselectedSpinners] = useState(false);22 const [selectedTables, setselectedTables] = useState(false);23 //Render component functions24 const renderAvatars =() =>{25 setselectedAvatars(true);26 setSelectedButtons(false);27 setselectedCards(false);28 setselectedCharts(false);29 setselectedContainers(false);30 setselectedDropdowns(false);31 setselectedForms(false);32 setselectedInputs(false);33 setselectedMenus(false);34 setselectedModals(false);35 setselectedNavs(false);36 setselectedNotifications(false);37 setselectedPagination(false);38 setselectedProgresses(false);39 setselectedScrolls(false);40 setselectedSpinners(false);41 setselectedTables(false);42 }43 const renderButtons=()=>{44 setselectedAvatars(false);45 setSelectedButtons(true);46 setselectedCards(false);47 setselectedCharts(false);48 setselectedContainers(false);49 setselectedDropdowns(false);50 setselectedForms(false);51 setselectedInputs(false);52 setselectedMenus(false);53 setselectedModals(false);54 setselectedNavs(false);55 setselectedNotifications(false);56 setselectedPagination(false);57 setselectedProgresses(false);58 setselectedScrolls(false);59 setselectedSpinners(false);60 setselectedTables(false);61 }62 const renderCards =()=>{63 setselectedAvatars(false);64 setSelectedButtons(false);65 setselectedCards(true);66 setselectedCharts(false);67 setselectedContainers(false);68 setselectedDropdowns(false);69 setselectedForms(false);70 setselectedInputs(false);71 setselectedMenus(false);72 setselectedModals(false);73 setselectedNavs(false);74 setselectedNotifications(false);75 setselectedPagination(false);76 setselectedProgresses(false);77 setselectedScrolls(false);78 setselectedSpinners(false);79 setselectedTables(false);80 }81 const renderCharts =()=>{82 setselectedAvatars(false);83 setSelectedButtons(false);84 setselectedCards(false);85 setselectedCharts(true);86 setselectedContainers(false);87 setselectedDropdowns(false);88 setselectedForms(false);89 setselectedInputs(false);90 setselectedMenus(false);91 setselectedModals(false);92 setselectedNavs(false);93 setselectedNotifications(false);94 setselectedPagination(false);95 setselectedProgresses(false);96 setselectedScrolls(false);97 setselectedSpinners(false);98 setselectedTables(false);99 }100 const renderContainers =()=>{101 setselectedAvatars(false);102 setSelectedButtons(false);103 setselectedCards(false);104 setselectedCharts(false);105 setselectedContainers(true);106 setselectedDropdowns(false);107 setselectedForms(false);108 setselectedInputs(false);109 setselectedMenus(false);110 setselectedModals(false);111 setselectedNavs(false);112 setselectedNotifications(false);113 setselectedPagination(false);114 setselectedProgresses(false);115 setselectedScrolls(false);116 setselectedSpinners(false);117 setselectedTables(false);118 }119 const renderDropdowns =()=>{120 setselectedAvatars(false);121 setSelectedButtons(false);122 setselectedCards(false);123 setselectedCharts(false);124 setselectedContainers(false);125 setselectedDropdowns(true);126 setselectedForms(false);127 setselectedInputs(false);128 setselectedMenus(false);129 setselectedModals(false);130 setselectedNavs(false);131 setselectedNotifications(false);132 setselectedPagination(false);133 setselectedProgresses(false);134 setselectedScrolls(false);135 setselectedSpinners(false);136 setselectedTables(false);137 }138 const renderForms =()=>{139 setselectedAvatars(false);140 setSelectedButtons(false);141 setselectedCards(false);142 setselectedCharts(false);143 setselectedContainers(false);144 setselectedDropdowns(false);145 setselectedForms(true);146 setselectedInputs(false);147 setselectedMenus(false);148 setselectedModals(false);149 setselectedNavs(false);150 setselectedNotifications(false);151 setselectedPagination(false);152 setselectedProgresses(false);153 setselectedScrolls(false);154 setselectedSpinners(false);155 setselectedTables(false);156 }157 const renderInputs =()=>{158 setselectedAvatars(false);159 setSelectedButtons(false);160 setselectedCards(false);161 setselectedCharts(false);162 setselectedContainers(false);163 setselectedDropdowns(false);164 setselectedForms(false);165 setselectedInputs(true);166 setselectedMenus(false);167 setselectedModals(false);168 setselectedNavs(false);169 setselectedNotifications(false);170 setselectedPagination(false);171 setselectedProgresses(false);172 setselectedScrolls(false);173 setselectedSpinners(false);174 setselectedTables(false);175 }176 const renderMenus =()=>{177 setselectedAvatars(false);178 setSelectedButtons(false);179 setselectedCards(false);180 setselectedCharts(false);181 setselectedContainers(false);182 setselectedDropdowns(false);183 setselectedForms(false);184 setselectedInputs(false);185 setselectedMenus(true);186 setselectedModals(false);187 setselectedNavs(false);188 setselectedNotifications(false);189 setselectedPagination(false);190 setselectedProgresses(false);191 setselectedScrolls(false);192 setselectedSpinners(false);193 setselectedTables(false);194 }195 const renderModals =()=>{196 setselectedAvatars(false);197 setSelectedButtons(false);198 setselectedCards(false);199 setselectedCharts(false);200 setselectedContainers(false);201 setselectedDropdowns(false);202 setselectedForms(false);203 setselectedInputs(false);204 setselectedMenus(false);205 setselectedModals(true);206 setselectedNavs(false);207 setselectedNotifications(false);208 setselectedPagination(false);209 setselectedProgresses(false);210 setselectedScrolls(false);211 setselectedSpinners(false);212 setselectedTables(false);213 }214 const renderNavigations =()=>{215 setselectedAvatars(false);216 setSelectedButtons(false);217 setselectedCards(false);218 setselectedCharts(false);219 setselectedContainers(false);220 setselectedDropdowns(false);221 setselectedForms(false);222 setselectedInputs(false);223 setselectedMenus(false);224 setselectedModals(false);225 setselectedNavs(true);226 setselectedNotifications(false);227 setselectedPagination(false);228 setselectedProgresses(false);229 setselectedScrolls(false);230 setselectedSpinners(false);231 setselectedTables(false);232 }233 const renderNotifications =()=>{234 setselectedAvatars(false);235 setSelectedButtons(false);236 setselectedCards(false);237 setselectedCharts(false);238 setselectedContainers(false);239 setselectedDropdowns(false);240 setselectedForms(false);241 setselectedInputs(false);242 setselectedMenus(false);243 setselectedModals(false);244 setselectedNavs(false);245 setselectedNotifications(true);246 setselectedPagination(false);247 setselectedProgresses(false);248 setselectedScrolls(false);249 setselectedSpinners(false);250 setselectedTables(false);251 }252 const renderPagination =()=>{253 setselectedAvatars(false);254 setSelectedButtons(false);255 setselectedCards(false);256 setselectedCharts(false);257 setselectedContainers(false);258 setselectedDropdowns(false);259 setselectedForms(false);260 setselectedInputs(false);261 setselectedMenus(false);262 setselectedModals(false);263 setselectedNavs(false);264 setselectedNotifications(false);265 setselectedPagination(true);266 setselectedProgresses(false);267 setselectedScrolls(false);268 setselectedSpinners(false);269 setselectedTables(false);270 } 271 const renderProgresses =()=>{272 setselectedAvatars(false);273 setSelectedButtons(false);274 setselectedCards(false);275 setselectedCharts(false);276 setselectedContainers(false);277 setselectedDropdowns(false);278 setselectedForms(false);279 setselectedInputs(false);280 setselectedMenus(false);281 setselectedModals(false);282 setselectedNavs(false);283 setselectedNotifications(false);284 setselectedPagination(false);285 setselectedProgresses(true);286 setselectedScrolls(false);287 setselectedSpinners(false);288 setselectedTables(false);289 }290 const renderScrolls =()=>{291 setselectedAvatars(false);292 setSelectedButtons(false);293 setselectedCards(false);294 setselectedCharts(false);295 setselectedContainers(false);296 setselectedDropdowns(false);297 setselectedForms(false);298 setselectedInputs(false);299 setselectedMenus(false);300 setselectedModals(false);301 setselectedNavs(false);302 setselectedNotifications(false);303 setselectedPagination(false);304 setselectedProgresses(false);305 setselectedScrolls(true);306 setselectedSpinners(false);307 setselectedTables(false);308 }309 const renderSpinners =()=>{310 setselectedAvatars(false);311 setSelectedButtons(false);312 setselectedCards(false);313 setselectedCharts(false);314 setselectedContainers(false);315 setselectedDropdowns(false);316 setselectedForms(false);317 setselectedInputs(false);318 setselectedMenus(false);319 setselectedModals(false);320 setselectedNavs(false);321 setselectedNotifications(false);322 setselectedPagination(false);323 setselectedProgresses(false);324 setselectedScrolls(false);325 setselectedSpinners(true);326 setselectedTables(false);327 }328 const renderTables =()=>{329 setselectedAvatars(false);330 setSelectedButtons(false);331 setselectedCards(false);332 setselectedCharts(false);333 setselectedContainers(false);334 setselectedDropdowns(false);335 setselectedForms(false);336 setselectedInputs(false);337 setselectedMenus(false);338 setselectedModals(false);339 setselectedNavs(false);340 setselectedNotifications(false);341 setselectedPagination(false);342 setselectedProgresses(false);343 setselectedScrolls(false);344 setselectedSpinners(false);345 setselectedTables(true);346 }347 const allRenders ={348 renderAvatars,349 renderButtons,350 renderCards,351 renderCharts,352 renderContainers,353 renderDropdowns,354 renderForms,355 renderInputs,356 renderMenus,357 renderModals,358 renderNavigations,359 renderNotifications, 360 renderPagination,361 renderProgresses,362 renderScrolls, 363 renderSpinners,364 renderTables365 }366 const showComponents ={367 selectedAvatars,368 selectedButtons,369 selectedCards,370 selectedCharts,371 selectedContainers,372 selectedDropdowns,373 selectedForms,374 selectedInputs,375 selectedMenus,376 selectedModals,377 selectedNavs,378 selectedNotifications,379 selectedPagination,380 selectedProgresses,381 selectedScrolls,382 selectedSpinners,383 selectedTables384 }385 return (386 <div>387 <SideNavigation allRenders={allRenders}/>388 <ItemsLayout showComponents={showComponents}/>389 </div>390 )391}...

Full Screen

Full Screen

Layout.js

Source:Layout.js Github

copy

Full Screen

1import React, { useState, useEffect } from "react";2import { Layout, Menu, Avatar, Dropdown } from "antd";3import axios from "axios";4import {5 MenuUnfoldOutlined,6 SettingOutlined,7 CameraOutlined,8 MessageOutlined,9 MenuFoldOutlined,10 VideoCameraOutlined,11 UserOutlined,12 HomeOutlined,13 ContainerOutlined,14 UsergroupAddOutlined,15 UserSwitchOutlined,16 LogoutOutlined,17 NotificationOutlined,18} from "@ant-design/icons";19import { Link } from "react-router-dom";20const { Header, Sider, Content } = Layout;21const AdminLayout = ({ children }) => {22 const [collapsed, setcollapsed] = useState(false);23 const [selectedKey, setselectedKey] = useState("0");24 const [loading, setLoading] = useState(true);25 const [profile, setProfile] = useState({26 first_name: "",27 last_name: "",28 address: "",29 phone_number: "",30 picture: null,31 gender: "",32 password: "",33 });34 useEffect(() => {35 axios36 .post("http://localhost:5000/users/fetchusersettngs", {37 email: localStorage.getItem("useremail"),38 })39 .then((response) => {40 console.log(response);41 setLoading(false);42 setProfile({43 first_name: response.data[0].first_name,44 last_name: response.data[0].last_name,45 address: response.data[0].address,46 phone_number: response.data[0].phone_number,47 picture: response.data[0].picture,48 gender: response.data[0].gender,49 });50 })51 .catch((err) => {52 console.log(err);53 return err;54 });55 }, []);56 const shiftprofile = () => {57 setselectedKey("2");58 if (localStorage.getItem("profile") === "admin") {59 localStorage.setItem("profile", "normal");60 window.location.reload();61 } else if (localStorage.getItem("profile") === "normal") {62 localStorage.setItem("profile", "admin");63 window.location.reload();64 }65 };66 const toggle = () => {67 setcollapsed(!collapsed);68 };69 const menu = (70 <Menu style={{ padding: "10px", borderRadius: "2px" }}>71 <Menu.Item72 key="1"73 icon={74 <LogoutOutlined75 style={{ fontSize: "1.2em", verticalAlign: "0.05em" }}76 />77 }78 >79 <Link to="/logout" style={{ fontSize: "1rem" }}>80 Logout81 </Link>82 </Menu.Item>83 </Menu>84 );85 return (86 <Layout>87 <Sider trigger={null} collapsible collapsed={collapsed}>88 <div className="logo">89 <img src={require("../../assets/locked-white.png")} alt="logo" />90 </div>91 <Menu theme="dark" mode="inline" selectedKeys={[selectedKey]}>92 {localStorage.getItem("admin") === "true" && (93 <Menu.Item94 key="1"95 icon={<UserSwitchOutlined />}96 onClick={() => shiftprofile()}97 >98 Shift To Normal99 </Menu.Item>100 )}101 <Menu.Item102 key="2"103 icon={<HomeOutlined />}104 onClick={() => setselectedKey("2")}105 >106 <Link to="/dashboard" onClick={() => setselectedKey("2")}>107 Dashboard108 </Link>109 </Menu.Item>110 <Menu.Item111 key="3"112 icon={<VideoCameraOutlined />}113 onClick={() => setselectedKey("3")}114 >115 <Link to="/allvideos" onClick={() => setselectedKey("3")}>116 All Videos117 </Link>118 </Menu.Item>119 <Menu.Item120 key="4"121 icon={<VideoCameraOutlined />}122 onClick={() => setselectedKey("4")}123 >124 <Link to="/allsuspvid" onClick={() => setselectedKey("4")}>125 All Suspicious Videos126 </Link>127 </Menu.Item>128 <Menu.Item129 key="5"130 icon={<VideoCameraOutlined />}131 onClick={() => setselectedKey("5")}132 >133 <Link to="/allstaticvid" onClick={() => setselectedKey("5")}>134 All Static Videos135 </Link>136 </Menu.Item>137 <Menu.Item138 key="6"139 icon={<VideoCameraOutlined />}140 onClick={() => setselectedKey("6")}141 >142 <Link to="/allnormalvid" onClick={() => setselectedKey("6")}>143 All Normal Videos144 </Link>145 </Menu.Item>146 <Menu.Item147 key="7"148 icon={<UserOutlined />}149 onClick={() => setselectedKey("7")}150 >151 <Link to="/allusers" onClick={() => setselectedKey("7")}>152 All Users153 </Link>154 </Menu.Item>155 <Menu.Item156 key="8"157 icon={<ContainerOutlined />}158 onClick={() => setselectedKey("8")}159 >160 <Link to="/allcontacts" onClick={() => setselectedKey("8")}>161 All Contact Queries162 </Link>163 </Menu.Item>164 <Menu.Item165 key="9"166 icon={<UsergroupAddOutlined />}167 onClick={() => setselectedKey("9")}168 >169 <Link to="/allrequests" onClick={() => setselectedKey("9")}>170 All Requests171 </Link>172 </Menu.Item>173 <Menu.Item174 key="10"175 icon={<MessageOutlined />}176 onClick={() => setselectedKey("10")}177 >178 <Link to="/allmessages" onClick={() => setselectedKey("10")}>179 All Messages180 </Link>181 </Menu.Item>182 <Menu.Item183 key="11"184 icon={<CameraOutlined />}185 onClick={() => setselectedKey("11")}186 >187 <Link to="/allcctvs" onClick={() => setselectedKey("11")}>188 All CCTV Cams189 </Link>190 </Menu.Item>191 <Menu.Item192 key="12"193 icon={<NotificationOutlined />}194 onClick={() => setselectedKey("12")}195 >196 <Link to="/allnotifications" onClick={() => setselectedKey("12")}>197 All Notifications198 </Link>199 </Menu.Item>200 <Menu.Item201 key="13"202 icon={<SettingOutlined />}203 onClick={() => setselectedKey("13")}204 >205 <Link to="/settings" onClick={() => setselectedKey("13")}>206 Settings207 </Link>208 </Menu.Item>209 </Menu>210 </Sider>211 <Layout className="site-layout">212 <Header className="navbar" style={{ padding: 0 }}>213 {React.createElement(214 collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,215 {216 className: "trigger",217 onClick: toggle,218 }219 )}220 <Dropdown overlay={menu} trigger={["click"]}>221 <Avatar222 loading={loading}223 icon={<UserOutlined />}224 style={{ margin: "0px 50px", cursor: "pointer" }}225 size="large"226 onClick={(e) => e.preventDefault()}227 src={"http://localhost:5000/" + profile?.picture}228 />229 </Dropdown>230 </Header>231 <Content232 className="site-layout-background"233 style={{234 margin: "24px 16px",235 padding: 24,236 minHeight: 280,237 }}238 >239 <main className="app">{children}</main>240 </Content>241 </Layout>242 </Layout>243 );244};...

Full Screen

Full Screen

WebLayout.js

Source:WebLayout.js Github

copy

Full Screen

1import React, { useState, useEffect } from "react";2import { Layout, Menu, Avatar, Dropdown } from "antd";3import axios from "axios";4import {5 MenuUnfoldOutlined,6 UserSwitchOutlined,7 MenuFoldOutlined,8 VideoCameraOutlined,9 UserOutlined,10 HomeOutlined,11 LogoutOutlined,12 UserAddOutlined,13 MessageOutlined,14 CameraOutlined,15 SettingOutlined,16 NotificationOutlined,17} from "@ant-design/icons";18import { Link } from "react-router-dom";19const { Header, Sider, Content } = Layout;20const WebLayout = ({ children }) => {21 const [collapsed, setcollapsed] = useState(false);22 const [selectedKey, setselectedKey] = useState("0");23 const [loading, setLoading] = useState(true);24 const [profile, setProfile] = useState({25 first_name: "",26 last_name: "",27 address: "",28 phone_number: "",29 picture: null,30 gender: "",31 password: "",32 });33 useEffect(() => {34 axios35 .post("http://localhost:5000/users/fetchusersettngs", {36 email: localStorage.getItem("useremail"),37 })38 .then((response) => {39 setLoading(false);40 setProfile({41 first_name: response.data[0].first_name,42 last_name: response.data[0].last_name,43 address: response.data[0].address,44 phone_number: response.data[0].phone_number,45 picture: response.data[0].picture,46 gender: response.data[0].gender,47 });48 })49 .catch((err) => {50 console.log(err);51 return err;52 });53 }, []);54 const shiftprofile = () => {55 setselectedKey("2");56 if (localStorage.getItem("profile") === "admin") {57 localStorage.setItem("profile", "normal");58 window.location.reload();59 } else if (localStorage.getItem("profile") === "normal") {60 localStorage.setItem("profile", "admin");61 window.location.reload();62 }63 };64 const toggle = () => {65 setcollapsed(!collapsed);66 };67 const menu = (68 <Menu style={{ padding: "10px", borderRadius: "2px" }}>69 <Menu.Item70 key="1"71 icon={72 <LogoutOutlined73 style={{ fontSize: "1.2em", verticalAlign: "0.05em" }}74 />75 }76 >77 <Link to="/logout" style={{ fontSize: "1rem", margin: "10px 0px" }}>78 Logout79 </Link>80 </Menu.Item>81 </Menu>82 );83 return (84 <Layout>85 <Sider trigger={null} collapsible collapsed={collapsed}>86 <div className="logo">87 <img src={require("../../assets/locked-white.png")} alt="logo" />88 </div>89 <Menu theme="dark" mode="inline" selectedKeys={[selectedKey]}>90 <Menu.Item91 key="1"92 icon={<UserOutlined />}93 onClick={() => setselectedKey("1")}94 >95 <Link to="/profile" onClick={() => setselectedKey("1")}>96 Profile97 </Link>98 </Menu.Item>99 {localStorage.getItem("admin") === "true" && (100 <Menu.Item101 key="2"102 icon={<UserSwitchOutlined />}103 onClick={() => shiftprofile()}104 >105 Shift To Admin106 </Menu.Item>107 )}108 <Menu.Item109 key="3"110 icon={<HomeOutlined />}111 onClick={() => setselectedKey("3")}112 >113 <Link to="/main" onClick={() => setselectedKey("3")}>114 Main115 </Link>116 </Menu.Item>117 <Menu.Item118 key="4"119 icon={<VideoCameraOutlined />}120 onClick={() => setselectedKey("4")}121 >122 <Link to="/videos" onClick={() => setselectedKey("4")}>123 Videos124 </Link>125 </Menu.Item>126 <Menu.Item127 key="5"128 icon={<VideoCameraOutlined />}129 onClick={() => setselectedKey("5")}130 >131 <Link to="/favvideos" onClick={() => setselectedKey("5")}>132 Fav Videos133 </Link>134 </Menu.Item>135 <Menu.Item136 key="6"137 icon={<VideoCameraOutlined />}138 onClick={() => setselectedKey("6")}139 >140 <Link to="/suspiciousvideos" onClick={() => setselectedKey("6")}>141 Suspicious Videos142 </Link>143 </Menu.Item>144 <Menu.Item145 key="7"146 icon={<VideoCameraOutlined />}147 onClick={() => setselectedKey("7")}148 >149 <Link to="/staticvideos" onClick={() => setselectedKey("7")}>150 Static Videos151 </Link>152 </Menu.Item>153 <Menu.Item154 key="8"155 icon={<VideoCameraOutlined />}156 onClick={() => setselectedKey("8")}157 >158 <Link to="/normalvideos" onClick={() => setselectedKey("8")}>159 Normal Videos160 </Link>161 </Menu.Item>162 <Menu.Item163 key="9"164 icon={<MessageOutlined />}165 onClick={() => setselectedKey("9")}166 >167 <Link to="/usermessages" onClick={() => setselectedKey("9")}>168 Messages169 </Link>170 </Menu.Item>171 <Menu.Item172 key="10"173 icon={<CameraOutlined />}174 onClick={() => setselectedKey("10")}175 >176 <Link to="/usercctvs" onClick={() => setselectedKey("10")}>177 Manage CCTV's178 </Link>179 </Menu.Item>180 <Menu.Item181 key="11"182 icon={<UserAddOutlined />}183 onClick={() => setselectedKey("11")}184 >185 <Link186 to="/request-admin-access"187 onClick={() => setselectedKey("11")}188 >189 Admin Access190 </Link>191 </Menu.Item>192 <Menu.Item193 key="12"194 icon={<NotificationOutlined />}195 onClick={() => setselectedKey("12")}196 >197 <Link to="/notifications" onClick={() => setselectedKey("12")}>198 Notifications199 </Link>200 </Menu.Item>201 <Menu.Item202 key="13"203 icon={<SettingOutlined />}204 onClick={() => setselectedKey("13")}205 >206 <Link to="/settings" onClick={() => setselectedKey("13")}>207 Settings208 </Link>209 </Menu.Item>210 </Menu>211 </Sider>212 <Layout className="site-layout">213 <Header className="navbar" style={{ padding: 0 }}>214 {React.createElement(215 collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,216 {217 className: "trigger",218 onClick: toggle,219 }220 )}221 <Dropdown overlay={menu} trigger={["click"]}>222 <Avatar223 loading={loading}224 icon={<UserOutlined />}225 style={{ margin: "0px 50px", cursor: "pointer" }}226 size="large"227 onClick={(e) => e.preventDefault()}228 src={"http://localhost:5000/" + profile?.picture}229 />230 </Dropdown>231 </Header>232 <Content233 className="site-layout-background"234 style={{235 margin: "24px 16px",236 padding: 24,237 minHeight: 280,238 }}239 >240 <main className="app">{children}</main>241 </Content>242 </Layout>243 </Layout>244 );245};...

Full Screen

Full Screen

App.js

Source:App.js Github

copy

Full Screen

1import React, { useState } from "react";2import { BrowserRouter, Switch, Route } from "react-router-dom";3// Add a general theme4import { ThemeProvider } from "@material-ui/core/styles";5import theme from "../components/ui/theme";6import Header from "../components/ui/Header";7import Footer from "../components/ui/Footer";8import BackToTop from "../components/ui/BackToTop";9import LandingPage from "../components/LandingPage";10import Services from "../components/Services";11import CustomSoftware from "../components/CustomSoftware";12import MobileApps from "../components/MobileApps";13import Websites from "../components/Websites";14import Revolution from "../components/Revolution";15import Contact from "../components/Contact";16import Estimate from "../components/Estimate";17function App() {18 // useState to change the value when changing the tab in header19 const [tabValue, setTabValue] = useState(0);20 // Indicator to be used when selecting the menu item in header21 const [selectedMenuItemIndex, setselectedMenuItemIndex] = useState(0);22 return (23 <ThemeProvider theme={theme}>24 <BrowserRouter>25 <Header26 tabValue={tabValue}27 setTabValue={setTabValue}28 selectedMenuItemIndex={selectedMenuItemIndex}29 setselectedMenuItemIndex={setselectedMenuItemIndex}30 />31 <BackToTop />32 <Switch>33 <Route34 exact35 path="/"36 render={(props) => (37 <LandingPage38 {...props}39 setTabValue={setTabValue}40 setselectedMenuItemIndex={setselectedMenuItemIndex}41 />42 )}43 />44 <Route45 exact46 path="/services"47 render={(props) => (48 <Services49 {...props}50 setTabValue={setTabValue}51 setselectedMenuItemIndex={setselectedMenuItemIndex}52 />53 )}54 />55 <Route56 exact57 path="/customsoftware"58 render={(props) => (59 <CustomSoftware60 {...props}61 setTabValue={setTabValue}62 setselectedMenuItemIndex={setselectedMenuItemIndex}63 />64 )}65 />66 <Route67 exact68 path="/mobileapps"69 render={(props) => (70 <MobileApps71 {...props}72 setTabValue={setTabValue}73 setselectedMenuItemIndex={setselectedMenuItemIndex}74 />75 )}76 />77 <Route78 exact79 path="/websites"80 render={(props) => (81 <Websites82 {...props}83 setTabValue={setTabValue}84 setselectedMenuItemIndex={setselectedMenuItemIndex}85 selectedMenuItemIndex={selectedMenuItemIndex}86 />87 )}88 />89 <Route90 exact91 path="/revolution"92 render={(props) => <Revolution {...props} />}93 />94 <Route exact path="/about" component={() => <div>about</div>} />95 <Route96 exact97 path="/contact"98 render={(props) => (99 <Contact100 {...props}101 setTabValue={setTabValue}102 setselectedMenuItemIndex={setselectedMenuItemIndex}103 selectedMenuItemIndex={selectedMenuItemIndex}104 />105 )}106 />107 <Route108 exact109 path="/estimate"110 render={(props) => <Estimate {...props} />}111 />112 </Switch>113 <Footer114 tabValue={tabValue}115 setTabValue={setTabValue}116 selectedMenuItemIndex={selectedMenuItemIndex}117 setselectedMenuItemIndex={setselectedMenuItemIndex}118 />119 </BrowserRouter>120 </ThemeProvider>121 );122}...

Full Screen

Full Screen

Sidebar.js

Source:Sidebar.js Github

copy

Full Screen

1import {VscTwitter} from 'react-icons/vsc'2import SidebarOptions from '../SidebarOptions/SidebarOptions'3import { useState } from 'react';4import {RiHome7Line , RiHome7Fill ,RiFileList2Fill} from 'react-icons/ri'5import {FiBell , FiMoreHorizontal} from 'react-icons/fi'6import {HiOutlineMail,HiMail} from 'react-icons/hi'7import {FaRegListAlt,FaHashtag,FaBell} from 'react-icons/fa'8import {CgMoreO} from 'react-icons/cg';9import {BiHash} from 'react-icons/bi'10import {BsPersonFill,BsPerson,BsBookmarkFill,BsBookmark} from 'react-icons/bs'11const style = {12 wrapper : `flex-[0.7] px-8 flex flex-col`,13 twitterIconContainer : `text-3xl m-4`,14 tweetButton: `bg-[#1d9bf0] hover:bg-[#1b8cd8] flex items-center justify-center font-bold rounded-3xl h-[50px] mt-[20px] cursor-pointer`,15 navContainer : `flex-1`,16 profileButton : `flex items-center mb-6 cursor-pointer hover:bg-[#333c45] rounded-full`,17 profileLeft : `flex items-center justify-center mr-4`,18 profileImage : `height-22 w-12 rounded-full`,19 profileRight : `flex-1 flex`,20 details : `flex-1`,21 name : `text-lg`,22 handle : `text-[#8899a6]`,23 moreContainer : `flex items-center mr-2`24}25 26export default function Sidebar({initialSelectionIcon = 'Home'}) {27 const [selected,setSelected] = useState(initialSelectionIcon);28 return (29 <div className={style.wrapper}>30 <div className={style.twitterIconContainer}>31 <VscTwitter />32 </div>33 <div className={style.navContainer}>34 <SidebarOptions 35 text={'Home'}36 Icon={selected === 'Home' ? RiHome7Fill : RiHome7Line }37 isActive={Boolean(selected === 'Home')}38 setSelected={setSelected}39 redirect={'/'}40 />41 <SidebarOptions 42 text={'Explore'}43 Icon={selected === 'Explore' ? FaHashtag : BiHash }44 isActive={Boolean(selected === 'Explore')}45 setSelected={setSelected}46 redirect={'/explore'}47 />48 <SidebarOptions 49 text={'Notification'}50 Icon={selected === 'Notification' ? FaBell : FiBell }51 isActive={Boolean(selected === 'Notification')}52 setSelected={setSelected}53 redirect={'/notification'}54 />55 <SidebarOptions 56 text={'Messages'}57 Icon={selected === 'Messages' ? HiMail : HiOutlineMail }58 isActive={Boolean(selected === 'Messages')}59 setSelected={setSelected}60 redirect={'/messages'}61 />62 <SidebarOptions 63 text={'Bookmarks'}64 Icon={selected === 'Bookmarks' ? BsBookmarkFill : BsBookmark }65 isActive={Boolean(selected === 'Bookmarks')}66 setSelected={setSelected}67 redirect={'/bookmarks'}68 />69 <SidebarOptions 70 text={'Lists'}71 Icon={selected === 'Lists' ? RiFileList2Fill : FaRegListAlt }72 isActive={Boolean(selected === 'Lists')}73 setSelected={setSelected}74 redirect={'/lists'}75 />76 <SidebarOptions 77 text={'Profile'}78 Icon={selected === 'Profile' ? BsPersonFill : BsPerson }79 isActive={Boolean(selected === 'Profile')}80 setSelected={setSelected}81 redirect={'/profile'}82 />83 <SidebarOptions text={'More'} Icon={CgMoreO} 84 setSelected={setSelected}85 86 />87 <div className={style.tweetButton}>88 Mint89 </div>90 </div>91 <div className={style.profileButton}>92 <div className={style.profileLeft}>93 </div>94 <div className={style.profileRight}>95 <div className={style.details}>96 <div className={style.name}>sakthi</div>97 <div className={style.handle}>@Ox25F...Jx95f</div>98 </div>99 </div>100 <div className={style.moreContainer}>101 <FiMoreHorizontal />102 </div>103 </div>104 105 106 </div>107 )...

Full Screen

Full Screen

product.js

Source:product.js Github

copy

Full Screen

1import React from 'react'2import { useState } from "react";3import "./product.css"4import Dropdown1 from '../components/layout/dropdown1'5import Carousel from './carousel';6import Carousel2 from './carousel2';7import imgG from "../images/visual1.png";8function Product() {9 const [selected, setSelected] = useState("");10 return (11 <div className="main-container">12 <div className="left"> 13 <h2>600+ Pieces</h2>14 <Dropdown1 selected={selected} setSelected={setSelected}/>15 <Dropdown1 selected={selected} setSelected={setSelected}/>16 <Dropdown1 selected={selected} setSelected={setSelected}/>17 <Dropdown1 selected={selected} setSelected={setSelected}/>18 <Dropdown1 selected={selected} setSelected={setSelected}/>19 <Dropdown1 selected={selected} setSelected={setSelected}/>20 <Dropdown1 selected={selected} setSelected={setSelected}/>21 <Dropdown1 selected={selected} setSelected={setSelected}/>22 <Dropdown1 selected={selected} setSelected={setSelected}/>23 </div>24 <div className="right">25 <div className="shop">26 <h2>Shop Women</h2>27 28 <Carousel/>29 </div>30 <div className="shop">31 <h2>Shop MEN</h2>32 <Carousel/>33 </div>34 <div className="bagimg">35 <img src={imgG}/>36 </div>37 <div className="sell">38 <h3>Top Selling</h3>39 <Carousel2/>40 </div>41 <div className="new">42 <h3>New IN</h3>43 <Carousel2/> 44 </div>45 </div>46 </div>47 )48}...

Full Screen

Full Screen

Nav.js

Source:Nav.js Github

copy

Full Screen

1import React from "react";2import "./Nav.css";3import requests from "./request";4function Nav({ setselectedOption }) {5 return (6 <div className="nav">7 <h2 onClick={() => setselectedOption(requests.fetchTrending)}>8 Trending9 </h2>10 <h2 onClick={() => setselectedOption(requests.fetchTopRated)}>11 Top Rated12 </h2>13 <h2 onClick={() => setselectedOption(requests.fetchActionMovies)}>14 Action15 </h2>16 <h2 onClick={() => setselectedOption(requests.fetchComedyMovies)}>17 Comedy18 </h2>19 <h2 onClick={() => setselectedOption(requests.fetchHorrorMovies)}>20 Horror21 </h2>22 <h2 onClick={() => setselectedOption(requests.fetchRomanceMovies)}>23 Romance24 </h2>25 <h2 onClick={() => setselectedOption(requests.fetchMystery)}>Mystery</h2>26 <h2 onClick={() => setselectedOption(requests.fetchSciFi)}>Sci-fi</h2>27 <h2 onClick={() => setselectedOption(requests.fetchWestern)}>Western</h2>28 <h2 onClick={() => setselectedOption(requests.fetchAnimation)}>29 Animation30 </h2>31 <h2 onClick={() => setselectedOption(requests.fetchTV)}>TV Movie</h2>32 </div>33 );34}...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.evaluate(() => {7 document.querySelector('input[name="q"]').setSelected(true);8 });9 await page.screenshot({ path: 'google.png' });10 await browser.close();11})();12const { chromium } = require('playwright');13(async () => {14 const browser = await chromium.launch();15 const context = await browser.newContext();16 const page = await context.newPage();17 await page.evaluate(() => {18 document.querySelector('input[name="q"]').setSelected(false);19 });20 await page.screenshot({ path: 'google.png' });21 await browser.close();22})();23const { chromium } = require('playwright');24(async () => {25 const browser = await chromium.launch();26 const context = await browser.newContext();27 const page = await context.newPage();28 await page.evaluate(() => {29 document.querySelector('input[name="q"]').setSelected(true);30 document.querySelector('input[name="q"]').setSelected(false);31 });32 await page.screenshot({ path: 'google.png' });33 await browser.close();34})();35const { chromium } = require('playwright');36(async () => {37 const browser = await chromium.launch();38 const context = await browser.newContext();39 const page = await context.newPage();40 await page.evaluate(() => {41 document.querySelector('input[name="q"]').setSelected(true);42 document.querySelector('input[name="q"]').setSelected(false);43 document.querySelector('input[name="q"]').setSelected(true);44 document.querySelector('input[name="q"]').setSelected(false);45 });46 await page.screenshot({ path: 'google.png' });47 await browser.close();48})();49const { chromium } =

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const element = await page.$('h1');7 await element.evaluate(element => element.setSelected(true));8 await browser.close();9})();10const { chromium } = require('playwright');11const internalChromium = chromium._internalApi;12const { chromium } = require('playwright');13const internalChromium = chromium._internalApi;14const { chromium } = require('playwright');15const internalChromium = chromium._internalApi;16const { chromium } = require('playwright');17const internalChromium = chromium._internalApi;18const { chromium } = require('playwright');19const internalChromium = chromium._internalApi;20const { chromium } = require('playwright');21const internalChromium = chromium._internalApi;22const {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click('input[title="Search"]');7 await page.keyboard.type('Hello World');8 await page.keyboard.press('Enter');9 await page.waitForNavigation();10 await page.click('input[title="Search"]');11 await page.keyboard.down('Shift');12 await page.keyboard.press('Home');13 await page.keyboard.up('Shift');14 await page.keyboard.press('Delete');15 await page.keyboard.type('Hello World');16 await page.keyboard.press('Enter');17 await page.waitForNavigation();18 await page.click('input[title="Search"]');19 await page.keyboard.down('Shift');20 await page.keyboard.press('Home');21 await page.keyboard.up('Shift');22 await page.keyboard.press('Delete');23 await page.keyboard.type('Hello World');24 await page.keyboard.press('Enter');25 await page.waitForNavigation();26 await page.click('input[title="Search"]');27 await page.keyboard.down('Shift');28 await page.keyboard.press('Home');29 await page.keyboard.up('Shift');30 await page.keyboard.press('Delete');31 await page.keyboard.type('Hello World');32 await page.keyboard.press('Enter');33 await page.waitForNavigation();34 await page.click('input[title="Search"]');35 await page.keyboard.down('Shift');36 await page.keyboard.press('Home');37 await page.keyboard.up('Shift');38 await page.keyboard.press('Delete');39 await page.keyboard.type('Hello World');40 await page.keyboard.press('Enter');41 await page.waitForNavigation();42 await page.click('input[title="Search"]');43 await page.keyboard.down('Shift');44 await page.keyboard.press('Home');45 await page.keyboard.up('Shift');46 await page.keyboard.press('Delete');47 await page.keyboard.type('Hello World');48 await page.keyboard.press('Enter');49 await page.waitForNavigation();50 await page.click('input[title="Search"]');51 await page.keyboard.down('Shift');52 await page.keyboard.press('Home');53 await page.keyboard.up('Shift');54 await page.keyboard.press('Delete');55 await page.keyboard.type('Hello World');56 await page.keyboard.press('Enter');57 await page.waitForNavigation();58 await page.click('input[title="Search"]');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1await page._client.send('Input.dispatchMouseEvent', {2});3await page._client.send('Input.dispatchMouseEvent', {4});5await page._client.send('Input.dispatchMouseEvent', {6});7await page._client.send('Input.dispatchMouseEvent', {8});9await page._client.send('Input.dispatchMouseEvent', {10});11await page._client.send('Input.dispatchMouseEvent', {12});13await page._client.send('Input.dispatchKeyEvent', {14});15await page._client.send('Input.dispatchKeyEvent', {16});17await page._client.send('Input.dispatchKeyEvent', {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.selectOption('select', 'Volvo');7 await page.waitForTimeout(10000);8 await browser.close();9})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {chromium} = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.click('input[title="Search"]');6 await page.keyboard.type('Hello World');7 await page.keyboard.down('Shift');8 await page.keyboard.press('ArrowLeft');9 await page.keyboard.press('ArrowLeft');10 await page.keyboard.press('ArrowLeft');11 await page.keyboard.up('Shift');12 await page.keyboard.press('Backspace');13 await page.keyboard.type('Playwright');14 await page.keyboard.press('Enter');15 await page.waitForSelector('text="Playwright - Google Search"');16 await browser.close();17})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { _electron } = require('playwright');2const { app } = require('electron');3const { BrowserWindow } = require('electron');4const { dialog } = require('electron');5(async () => {6 const browser = await _electron.launch({ headless: false });7 const page = await browser.newPage();8 const [fileChooser] = await Promise.all([9 page.waitForEvent('filechooser'),10 ]);11 await fileChooser.setFiles('/home/username/Desktop/my-file.pdf');12 await browser.close();13})();14const { test, expect } = require('@playwright/test');15test('file upload', async ({ page }) => {16 const [fileChooser] = await Promise.all([17 page.waitForEvent('filechooser'),18 ]);19 await fileChooser.setFiles('/home/username/Desktop/my-file.pdf');20});

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful