Join Free Webinar: My Favorite Cypress Plugins |Register Now 
How to use driver.title method in Appium
Best JavaScript code snippet using appium
liveTrack.js
Source:liveTrack.js 
1import React from 'react'2import { Component } from 'react'3import Moment from 'react-moment';4import $ from 'jquery'5import Wrapper from '../../hoc/wrapperHoc'6import DoneIcon from '../ui/done'7import CustomSlider from '../ui/sliders/customSlider'8import GoogleMapReact from 'google-map-react';9import { Polyline } from 'react-google-maps'10import MapMarker from "../location/marker";11import RaisedButton from 'material-ui/RaisedButton'12import axios from "axios";13import { BASE_COLOR } from '../../lib/envariables';14import LanguageWrapper from "../../hoc/language"15import "../../assets/homepage.scss";16import { getCookie, setCookie } from "../../lib/session";17const style = {18 margin: "0"19};20const buttonGreen = {21 width: '100%',22 backgroundColor: "#fff",23 border: "1px solid " + BASE_COLOR,24}25const lableFill = {26 fontSize: '13px',27 fontWeight: '700',28 color: BASE_COLOR29}30var map;31var driverMarker = null32let flightPath;33 class LiveTrackSlider extends Component {34 lang = this.props.lang35 state = {36 SliderWidth: 0,37 open: true,38 orderData: null,39 trackingOpen: false,40 map: null41 }42 constructor(props) {43 super(props);44 this.handleLeftSliderOpen = this.handleLeftSliderOpen.bind(this);45 }46 handleLeftSliderOpen = async (orderData) => {47 await this.setState({ orderData: orderData, trackingOpen: true })48 this.OrderSliderRef.handleLeftSliderToggle();49 this.showSatus();50 orderData.statusCode == 12 ? this.showLiveTrack() : ''51 orderData.statusCode != 12 ? this.hideLiveTrack() : ''52 // this.setState({ map: map })53 }54 updateData = (orderData) => {55console.log(orderData ,"kai ave ani mane")56 if (orderData == 9090) {57 this.setState({ noActiveOrder: true });58 return;59 }60 this.setState({ orderData: orderData });61 orderData.statusCode == 12 && !this.state.drawMap ? this.showLiveTrack() : ''62 orderData.statusCode == 13 ? this.hideLiveTrack() : ''63 let center = {64 lat: orderData.driverLatitude,65 lng: orderData.driverLongitude66 };67 var mapOptions = {68 center: center,69 zoom: 14,70 mapTypeId: google.maps.MapTypeId.map,71 disableDefaultUI: true72 }73 if (driverMarker && driverMarker.setMap) {74 driverMarker.setMap(null);75 }76 if (this.state.map) {77 this.state.map.setCenter(new google.maps.LatLng(orderData.driverLatitude, orderData.driverLongitude));78 driverMarker = new google.maps.Marker({79 position: { lat: orderData.driverLatitude, lng: orderData.driverLongitude },80 map: this.state.map,81 title: this.lang.driverLocation||'Driver Location!',82 icon: "/static/icons/marker/driver.png"83 });84 driverMarker.setMap(this.state.map)85 }86 this.setState({ testMap: true })87 }88 handleClose = () => {89 this.OrderSliderRef.handleLeftSliderClose(),90 this.showSatus()91 };92 componentDidMount = () => this.props.onRef(this)93 hideLiveTrack = () => {94 $(".liveTrack").hide();95 }96 showLiveTrack() {97 // $(".statusList").hide();98 // $(".liveTrack").show();99 console.log("ORDER DATA--> in show live track", this.state.orderData);100 let orderData = this.state.orderData;101 let center = {102 lat: parseFloat(orderData.dropLat),103 lng: parseFloat(orderData.dropLong)104 };105 var mapOptions = {106 center: center,107 zoom: 14,108 mapTypeId: google.maps.MapTypeId.map,109 disableDefaultUI: true110 }111 var map = new google.maps.Map(document.getElementById("liveTrackMap"), mapOptions);112 this.setState({ map: map, drawMap: true })113 var marker = new google.maps.Marker({114 position: { lat: parseFloat(orderData.dropLat), lng: parseFloat(orderData.dropLong) },115 map: map,116 title: this.lang.dropLocation||'Drop Location!',117 icon: "/static/icons/marker/marker.png"118 });119 var marker = new google.maps.Marker({120 position: { lat: orderData.pickupLat, lng: orderData.pickupLong },121 map: map,122 title: this.lang.startLocation||'Start Location!',123 icon: "/static/icons/marker/start.png"124 });125 var directionsService = new google.maps.DirectionsService;126 var directionsDisplay = new google.maps.DirectionsRenderer;127 let startLoc = new google.maps.LatLng(orderData.pickupLat, orderData.pickupLong)128 let dropLoc = new google.maps.LatLng(parseFloat(orderData.dropLat), parseFloat(orderData.dropLong))129 let flightPlanCoordinates = []130 directionsService.route({131 origin: startLoc,132 destination: dropLoc,133 travelMode: 'DRIVING'134 }, (response, status) => {135 if (status === 'OK') {136 response.routes[0].overview_path.map(async (item) => {137 flightPlanCoordinates.push({ lat: item.lat(), lng: item.lng() })138 })139 } else {140 // window.alert('Directions request failed due to ' + status);141 }142 });143 setTimeout(() => {144 let flightPath = new google.maps.Polyline({145 path: flightPlanCoordinates,146 geodesic: true,147 strokeColor: '#1a95d0',148 strokeOpacity: 1.0,149 strokeWeight: 5,150 icons: [{151 strokeColor: '#53ED00'152 }]153 });154 flightPath.setMap(map)155 this.setState({ flightPath: flightPath })156 }, 1000)157 }158 showSatus() {159 // $(".liveTrack").hide();160 $(".statusList").show();161 }162 printMap = (orderData) => {163 let lat; let lng; let cnt;164 console.log("ORDER DATA in print map-->", orderData);165 let center = {166 lat: parseFloat(orderData.dropLat),167 lng: parseFloat(orderData.dropLong)168 };169 lat = parseFloat(orderData.dropLat);170 lng = parseFloat(orderData.dropLong);171 cnt = {172 lat: lat,173 lng: lng174 }175 const pathCoordinates = [176 { lat: lat, lng: lng },177 { lat: this.state.orderData.pickupLat, lng: this.state.orderData.pickupLong },178 ]179 let icon = "static/images/cross.svg";180 let start = cnt.lat + "," + cnt.lng181 let end = orderData.pickupLat + "," + orderData.pickupLong182 let allLatLng = []183 var directionsService = new google.maps.DirectionsService;184 var directionsDisplay = new google.maps.DirectionsRenderer;185 let startLoc = new google.maps.LatLng(pathCoordinates[0].lat, pathCoordinates[0].lng)186 let dropLoc = new google.maps.LatLng(pathCoordinates[1].lat, pathCoordinates[1].lng)187 directionsService.route({188 origin: startLoc,189 destination: dropLoc,190 travelMode: 'DRIVING'191 }, (response, status) => {192 if (status === 'OK') {193 response.routes[0].overview_path.map(async (item) => {194 allLatLng.push({ lat: item.lat(), lng: item.lng() })195 })196 } else {197 // window.alert('Directions request failed due to ' + status);198 }199 });200 return (201 <GoogleMapReact202 panControl={false}203 streetViewControl={false}204 fullscreenControl={false}205 bootstrapURLKeys={{ key: 'AIzaSyBJ2LWIMnZNdsoYmUREgbN_4VEksPnoW8w' }}206 defaultCenter={center}207 defaultZoom={13}208 center={cnt} zoom={16} showPath={true}209 >210 <MapMarker point="start" lat={this.state.orderData.pickupLat} lng={this.state.orderData.pickupLong} text={'Me'} />211 <MapMarker point="start" lat={this.state.orderData.driverLatitude} lng={this.state.orderData.driverLongitude} text={'Driver'} />212 <MapMarker point="end" lat={lat} lng={lng} text={'Me'} />213 </GoogleMapReact >214 )215 }216 render() {217 218 let deliveryType =parseFloat(getCookie("deliveryType"))219 console.log(this.props.orderValue,"liveTracking")220 return (221 <Wrapper>222 <CustomSlider onRef={ref => (this.OrderSliderRef = ref)}223 // width={this.state.loginSliderWidth}224 width={this.props.RightSliderWidth}225 handleClose={this.handleClose}226 >227 { this.props.orderValue&&this.props.orderValue.serviceType ==2 ? 228 this.state.orderData ?229 <div className="col-12 p-0">230 <div className="col-12 px-4 py-3" style={{ background: '#fff', borderBottom: "1px solid #eee" }}>231 <div className="row">232 <div className="col p-1 pt-2 cartHead">233 <h6>{this.lang.orderId||"Order ID"} : {this.state.orderData.orderId} </h6>234 </div>235 <div className="closeDrawer">236 <a onClick={this.handleClose}><img src="static/images/cross.svg" height="15" width="20" /></a>237 </div>238 </div>239 </div>240 <div className="col-12 pl-4 statusList">241 {this.state.orderData.timeStampObject && this.state.orderData.timeStampObject.created ?242 <div className="listContent active col-12">243 <div className="driverTitle col-12">244 <div className="tickMark mapMark">245 <DoneIcon />246 </div><h4 >{this.lang.orderRequested||"Order requested"}</h4>247 <div className="descTitle color">248 <Moment format="ddd, D MMM, h:m A">249 {this.state.orderData.timeStampObject.created.timeStamp * 1000}250 </Moment>251 </div>252 </div>253 <div className="sideLine"></div>254 </div>255 : <div className="listContent col-12">256 <div className="driverTitle col-12 py-3 ">257 <div className="tickMark mapMark">258 <span className="selectedTick ion-checkmark-round"></span>259 </div><h4 >{this.lang.orderRequested||"Order requested"}</h4>260 <div className="descTitle color"> </div>261 </div>262 <div className="sideLine"></div>263 </div>264 }265 {this.state.orderData.statusCode >= 4 ?266 <div className="listContent active col-12">267 <div className="driverTitle col-12">268 <div className="tickMark mapMark">269 <DoneIcon />270 </div><h4 >{this.lang.orderConfirm||"Order confirmed"}</h4>271 <div className="descTitle color">272 <Moment format="ddd, D MMM, h:m A">273 {this.state.orderData.timeStampObject.created.timeStamp * 1000}274 </Moment>275 <p className="color">{this.state.orderData.storeName}</p>276 </div>277 </div>278 <div className="sideLine"></div>279 </div>280 : <div className="listContent col-12">281 <div className="driverTitle col-12 py-3 ">282 <div className="tickMark mapMark">283 <span className="selectedTick ion-checkmark-round"></span>284 </div><h4 >{this.lang.orderConfirm||"Order confirmed"}</h4>285 <div className="descTitle color"> </div>286 </div>287 <div className="sideLine"></div>288 </div>289 }290 291{this.state.orderData.timeStampObject && this.state.orderData.statusCode >= 5 ?292 <div className="listContent active col-12">293 <div className="driverTitle col-12">294 <div className="tickMark mapMark">295 <DoneIcon />296 </div><h4 >{"Order is Ready"}</h4>297 <div className="descTitle color">298 <Moment format="ddd, D MMM, h:m A">299 {this.state.orderData.timeStampObject.created.timeStamp * 1000}300 </Moment>301 <p className="color">{this.state.orderData.timeStampObject.created.message}</p>302 </div>303 </div>304 <div className="sideLine"></div>305 </div>306 : <div className="listContent col-12">307 <div className="driverTitle col-12 py-3 ">308 <div className="tickMark mapMark">309 <span className="selectedTick ion-checkmark-round"></span>310 </div><h4 >{"Order is Ready"}</h4>311 <div className="descTitle color"> </div>312 </div>313 <div className="sideLine"></div>314 </div>315 }316 317 318 {((this.state.orderData.timeStampObject && this.state.orderData.statusCode >= 14 && this.state.orderData.statusCode <= 15) || this.state.noActiveOrder) ?319 <div className="listContent active col-12">320 <div className="driverTitle col-12 py-3 ">321 <div className="tickMark mapMark">322 <DoneIcon />323 </div><h4 >{this.lang.orderComplated||"Order completed"}</h4>324 {/* <a onClick={() => this.props.handleRating(this.state.orderData)}>Rate this Order</a> */}325 <div className="descTitle color"> </div>326 </div>327 </div> :328 <div className="listContent col-12">329 <div className="driverTitle col-12 py-3 ">330 <div className="tickMark mapMark">331 <span className="selectedTick ion-checkmark-round"></span>332 </div><h4 >{this.lang.orderComplated||"Order completed"}</h4>333 {/* <a onClick={() => this.props.handleRating(this.state.orderData)}>Rate this Order</a> */}334 <div className="descTitle color"> </div>335 </div>336 </div>337 }338 </div>339 {/* {this.state.orderData.timeStampObject && this.state.orderData.timeStampObject.onTheWay ?340 <div style={{ height: '300px', width: '100%' }} className="col-12 liveTrack d-none">341 {this.printMap(this.state.orderData)}342 <div id="liveTrackMap">343 </div>344 <div className="col-12 mt-4">345 <div className="row">346 <div className="col-2 py-2 col-md-4">347 <img src={this.state.orderData.driverImage} style={{ width: '100px', height: '100px', borderRadius: '50%' }} />348 </div>349 <div className="titleRest col-10 col-md-8 pr-0 textEllipse mt-3">350 <div className="title textEllipse" style={{ fontSize: '18px', fontWeight: '700' }}>{this.state.orderData.driverName}</div>351 <div className="idOrder my-1 text-success">{this.state.orderData.driverMobile}</div>352 <div className="row">353 <div className="col-4 text-left" style={{ borderRight: '1px solid #eee' }}>354 <p> <b> Distance </b> </p>355 <p>--</p>356 </div>357 <div className="col-6 text-left">358 <p><b> ETA </b></p>359 <p>--</p>360 </div>361 </div>362 </div>363 </div>364 <hr />365 </div>366 <div className="col-12 mt-4 text-center">367 <RaisedButton label=" View Status " secondary={true} style={style} buttonStyle={buttonGreen} labelStyle={lableFill}368 onClick={() => this.showSatus()}369 />370 </div>371 </div>372 : ''} */}373 </div>374 : "" : this.state.orderData ?375 <div className="col-12 p-0">376 <div className="col-12 px-4 py-3" style={{ background: '#fff', borderBottom: "1px solid #eee" }}>377 <div className="row">378 <div className="col p-1 pt-2 cartHead">379 <h6>{this.lang.orderId||"Order ID"} : {this.state.orderData.orderId} </h6>380 </div>381 <div className="closeDrawer">382 <a onClick={this.handleClose}><img src="static/images/cross.svg" height="15" width="20" /></a>383 </div>384 </div>385 </div>386 <div className="col-12 pl-4 statusList">387 {this.state.orderData.timeStampObject && this.state.orderData.timeStampObject.created ?388 <div className="listContent active col-12">389 <div className="driverTitle col-12">390 <div className="tickMark mapMark">391 <DoneIcon />392 </div><h4 >{this.lang.orderRequested||"Order requested"}</h4>393 <div className="descTitle color">394 <Moment format="ddd, D MMM, h:m A">395 {this.state.orderData.timeStampObject.created.timeStamp * 1000}396 </Moment>397 </div>398 </div>399 <div className="sideLine"></div>400 </div>401 : <div className="listContent col-12">402 <div className="driverTitle col-12 py-3 ">403 <div className="tickMark mapMark">404 <span className="selectedTick ion-checkmark-round"></span>405 </div><h4 >{this.lang.orderRequested||"Order requested"}</h4>406 <div className="descTitle color"> </div>407 </div>408 <div className="sideLine"></div>409 </div>410 }411 {this.state.orderData.statusCode >= 4 ?412 <div className="listContent active col-12">413 <div className="driverTitle col-12">414 <div className="tickMark mapMark">415 <DoneIcon />416 </div><h4 >{this.lang.orderConfirm||"Order confirmed"}</h4>417 <div className="descTitle color">418 <Moment format="ddd, D MMM, h:m A">419 {this.state.orderData.timeStampObject.created.timeStamp * 1000}420 </Moment>421 <p className="color">{this.state.orderData.storeName}</p>422 </div>423 </div>424 <div className="sideLine"></div>425 </div>426 : <div className="listContent col-12">427 <div className="driverTitle col-12 py-3 ">428 <div className="tickMark mapMark">429 <span className="selectedTick ion-checkmark-round"></span>430 </div><h4 >{this.lang.orderConfirm||"Order confirmed"}</h4>431 <div className="descTitle color"> </div>432 </div>433 <div className="sideLine"></div>434 </div>435 }436 {this.state.orderData.timeStampObject && this.state.orderData.timeStampObject.accepted ?437 <div className="listContent active col-12">438 <div className="driverTitle col-12">439 <div className="tickMark mapMark">440 <DoneIcon />441 </div><h4 >{this.lang.driverAssign||"Driver assigned"}</h4>442 <div className="descTitle color">443 <Moment format="ddd, D MMM, h:m A">444 {this.state.orderData.timeStampObject.accepted.timeStamp * 1000}445 </Moment>446 <p className="color">{this.state.orderData.timeStampObject.accepted.message}</p>447 </div>448 </div>449 <div className="sideLine"></div>450 </div>451 : <div className="listContent col-12">452 <div className="driverTitle col-12 py-3 ">453 <div className="tickMark mapMark">454 <span className="selectedTick ion-checkmark-round"></span>455 </div><h4 >{this.lang.driverAssign||"Driver assigned"}</h4>456 <div className="descTitle color"> </div>457 </div>458 <div className="sideLine"></div>459 </div>460 }461 {this.state.orderData.timeStampObject && this.state.orderData.timeStampObject.onTheWay ?462 <div className="listContent active col-12">463 <div className="driverTitle col-12">464 <div className="tickMark mapMark">465 <DoneIcon />466 </div><h4 >{this.lang.driverOnTheWay||"Driver on the way to store "}</h4>467 <div className="descTitle color">468 {/* <Moment format="ddd, D MMM, h:m A">469 {this.state.orderData.timeStampObject.arrived.timeStamp * 1000}470 </Moment> */}471 <p className="color">{this.state.orderData.timeStampObject.onTheWay.message}</p>472 </div>473 </div>474 <div className="sideLine"></div>475 </div>476 : <div className="listContent col-12">477 <div className="driverTitle col-12 py-3 ">478 <div className="tickMark mapMark">479 <span className="selectedTick ion-checkmark-round"></span>480 </div><h4 >{this.lang.driverOnTheWay||"Driver on the way to store "}</h4>481 <div className="descTitle color"> </div>482 </div>483 <div className="sideLine"></div>484 </div>485 }486 {this.state.orderData.timeStampObject && this.state.orderData.timeStampObject.arrived ?487 <div className="listContent active col-12">488 <div className="driverTitle col-12">489 <div className="tickMark mapMark">490 <DoneIcon />491 </div><h4 >{this.lang.driverAtStore||"Driver at the store "}</h4>492 <div className="descTitle color">493 <Moment format="ddd, D MMM, h:m A">494 {this.state.orderData.timeStampObject.arrived.timeStamp * 1000}495 </Moment>496 <p className="color">{this.state.orderData.timeStampObject.arrived.message}</p>497 </div>498 </div>499 <div className="sideLine"></div>500 </div>501 : <div className="listContent col-12">502 <div className="driverTitle col-12 py-3 ">503 <div className="tickMark mapMark">504 <span className="selectedTick ion-checkmark-round"></span>505 </div><h4 >{this.lang.driverAtStore||"Driver at the store"}</h4>506 <div className="descTitle color"> </div>507 </div>508 <div className="sideLine"></div>509 </div>510 }511 {this.state.orderData.timeStampObject && this.state.orderData.timeStampObject.journeyStart ?512 <div className="listContent active col-12">513 <div className="driverTitle col-12">514 <div className="tickMark mapMark">515 <DoneIcon />516 </div><h4 >{this.lang.driverOntheWay||"Driver on the way"}</h4>517 <div className="descTitle color">518 <Moment format="ddd, D MMM, h:m A">519 {this.state.orderData.timeStampObject.journeyStart.timeStamp * 1000}520 </Moment>521 <p className="color">{this.state.orderData.timeStampObject.journeyStart.message}</p>522 </div>523 <div className="col-12 mt-2 p-0 text-left">524 {/* <RaisedButton label=" Live Track " secondary={true} style={style} buttonStyle={buttonGreen} labelStyle={lableFill}525 onClick={() => this.showLiveTrack()}526 /> */}527 <div style={{ height: '430px', width: '100%' }} className="liveTrack">528 {/* {this.printMap(this.state.orderData)} */}529 <div id="liveTrackMap">530 </div>531 <div className="mt-4">532 <div className="row">533 <div className="col-2 py-2 col-md-4">534 <img src={this.state.orderData.driverImage} style={{ width: '100px', height: '100px', borderRadius: '50%' }} />535 </div>536 <div className="titleRest col-10 col-md-8 pr-0 textEllipse mt-3">537 <div className="title textEllipse" style={{ fontSize: '18px', fontWeight: '700' }}>{this.state.orderData.driverName}</div>538 <div className="idOrder my-1 text-success">{this.state.orderData.driverMobile}</div>539 540 </div>541 </div>542 <hr />543 </div>544 </div>545 </div>546 </div>547 <div className="sideLine"></div>548 </div>549 : <div className="listContent col-12">550 <div className="driverTitle col-12 py-3 ">551 <div className="tickMark mapMark">552 <span className="selectedTick ion-checkmark-round"></span>553 </div><h4 >{this.lang.driverOntheWay||"Driver on the way"}</h4>554 <div className="descTitle color"> </div>555 </div>556 <div className="sideLine"></div>557 </div>558 }559 {this.state.orderData.timeStampObject && this.state.orderData.timeStampObject.reached ?560 <div className="listContent active col-12">561 <div className="driverTitle col-12">562 <div className="tickMark mapMark">563 <DoneIcon />564 </div><h4 >{this.lang.driverRiched||"Driver reached"}</h4>565 <div className="descTitle color">566 <Moment format="ddd, D MMM, h:m A">567 {this.state.orderData.timeStampObject.reached.timeStamp * 1000}568 </Moment>569 <p className="color">{this.state.orderData.timeStampObject.reached.message}</p>570 </div>571 </div>572 <div className="sideLine"></div>573 </div>574 : <div className="listContent col-12">575 <div className="driverTitle col-12 py-3 ">576 <div className="tickMark mapMark">577 <span className="selectedTick ion-checkmark-round"></span>578 </div><h4 >{this.lang.driverRiched||"Driver reached"}</h4>579 <div className="descTitle color"> </div>580 </div>581 <div className="sideLine"></div>582 </div>583 }584 {( this.state.noActiveOrder) ?585 <div className="listContent active col-12">586 <div className="driverTitle col-12 py-3 ">587 <div className="tickMark mapMark">588 <DoneIcon />589 </div><h4 >{this.lang.orderComplated||"Order completed"}</h4>590 {/* <a onClick={() => this.props.handleRating(this.state.orderData)}>Rate this Order</a> */}591 <div className="descTitle color"> </div>592 </div>593 </div> :594 <div className="listContent col-12">595 <div className="driverTitle col-12 py-3 ">596 <div className="tickMark mapMark">597 <span className="selectedTick ion-checkmark-round"></span>598 </div><h4 >{this.lang.orderComplated||"Order completed"}</h4>599 {/* <a onClick={() => this.props.handleRating(this.state.orderData)}>Rate this Order</a> */}600 <div className="descTitle color"> </div>601 </div>602 </div>603 }604 </div>605 {/* {this.state.orderData.timeStampObject && this.state.orderData.timeStampObject.onTheWay ?606 <div style={{ height: '300px', width: '100%' }} className="col-12 liveTrack d-none">607 {this.printMap(this.state.orderData)}608 <div id="liveTrackMap">609 </div>610 <div className="col-12 mt-4">611 <div className="row">612 <div className="col-2 py-2 col-md-4">613 <img src={this.state.orderData.driverImage} style={{ width: '100px', height: '100px', borderRadius: '50%' }} />614 </div>615 <div className="titleRest col-10 col-md-8 pr-0 textEllipse mt-3">616 <div className="title textEllipse" style={{ fontSize: '18px', fontWeight: '700' }}>{this.state.orderData.driverName}</div>617 <div className="idOrder my-1 text-success">{this.state.orderData.driverMobile}</div>618 <div className="row">619 <div className="col-4 text-left" style={{ borderRight: '1px solid #eee' }}>620 <p> <b> Distance </b> </p>621 <p>--</p>622 </div>623 <div className="col-6 text-left">624 <p><b> ETA </b></p>625 <p>--</p>626 </div>627 </div>628 </div>629 </div>630 <hr />631 </div>632 <div className="col-12 mt-4 text-center">633 <RaisedButton label=" View Status " secondary={true} style={style} buttonStyle={buttonGreen} labelStyle={lableFill}634 onClick={() => this.showSatus()}635 />636 </div>637 </div>638 : ''} */}639 </div>640 :""641}642 </CustomSlider>643 </Wrapper>644 )645 }646}...
trip_proposal.js
Source:trip_proposal.js
1import BaseTrip from 'appkit/mixins/base_trip';2import TripDetailMixinController from 'appkit/mixins/trip_detail_mixin_controller';3import modalMenu from 'appkit/utils/modal_menu';4import MessageDialog from 'appkit/utils/message_dialog';5import GenericModalDialog from 'appkit/utils/generic_modal_dialog';6import timezonejsDate from 'appkit/utils/timezonejs_date';7import TimeDateFormatting from 'appkit/utils/time_date_formatting';8var MemberTripProposalController = Ember.ObjectController.extend(BaseTrip, TripDetailMixinController, {9 cw: [],10 selectedWeek: null,11 selectedDay: null,12 inviteCount: 0,13 // Calender header14 sundaySelected: false,15 mondaySelected: false,16 tuesdaySelected: false,17 wednesdaySelected: false,18 thursdaySelected: false,19 fridaySelected: false,20 saturdaySelected: false,21 weekHeaderFlags: ['sundaySelected','mondaySelected','tuesdaySelected','wednesdaySelected','thursdaySelected','fridaySelected','saturdaySelected'],22 //!!!!!!!!!!!!!!!!!!!!!!!!!!!23 // This is all for mobile...24 infographicUrl: '/assets/img/mobile-infographic-outbound-0@2x.gif',25 isReturnTrip: false,26 direction: 'out',27 hght: "height: 480px",28 showPickADay: false,29 noteAttached: "",30 watchdirection: function() {31 if (this.get('direction') === 'out') {32 this.set('infographicUrl', '/assets/img/mobile-infographic-outbound-0@2x.gif');33 this.set('isReturnTrip', false);34 } else {35 this.set('infographicUrl', '/assets/img/mobile-infographic-inbound-0@2x.gif');36 this.set('isReturnTrip', true);37 }38 }.observes('direction'),39 watchSelectedDriverMode: function() {40 if (this.get('selectedDriverMode') === 'driver') {41 $('#ml').addClass('active');42 $('#pl').removeClass('active');43 } else {44 $('#ml').removeClass('active');45 $('#pl').addClass('active');46 }47 }.observes('selectedDriverMode'),48 memberIsDriver: function() {49 return this.get('selectedDriverMode') === 'driver';50 }.property('selectedDriveMode'),51 showAddress: function(title, address) {52 new GenericModalDialog().modalDialog(53 {54 dialogTitle: title,55 dialogImageUrl: '/assets/img/icon-car-blue.png',56 dialogText: address57 });58 },59 actions: {60 selectDate: function(timestamp, before, selectedWeek, day) {61 var dt = timezonejsDate(timestamp);62 var d = new TimeDateFormatting().formatDateMonthDayYear(dt);63 this.set('selectedDate', d);64 this.set('selectedDay', day);65 var weekHeaders = this.get('weekHeaderFlags');66 for (var i = 0; i < 7; i++) {67 if (selectedWeek.objectAt(i).get('timestamp') === timestamp) {68 selectedWeek.objectAt(i).set('selectedCell', true);69 } else {70 selectedWeek.objectAt(i).set('selectedCell', false);71 }72 this.set(weekHeaders[i], false);73 }74 this.set(weekHeaders[dt.getDay()], true);75 },76 upperLeftTap: function() {77 var title, address;78 if (this.get('isReturnTrip')){79 if (this.get('memberIsDriver')) {80 title = 'Your work location';81 } else {82 title = this.get('partner.possessiveFirstName') + ' work location';83 }84 if (this.get('isAccepted')) {85 address = this.get('driverWorkAddressCityState');86 } else {87 address = this.get('driverWorkName');88 }89 } else {90 if (this.get('memberIsDriver')) {91 title = 'Your home location';92 } else {93 title = this.get('partner.possessiveFirstName') + ' home location';94 }95 if (this.get('isAccepted')) {96 address = this.get('driverHomeAddressCityState');97 } else {98 address = this.get('driverHomeStreetCityState');99 }100 }101 this.showAddress(title, address);102 },103 upperRightTap: function() {104 var title, address;105 if (this.get('isReturnTrip')){106 if (this.get('memberIsDriver')) {107 title = this.get('partner.possessiveFirstName') + ' work location';108 } else {109 title = 'Your work location';110 }111 if (this.get('isAccepted')) {112 address = this.get('passengerWorkAddressCityState');113 } else {114 address = this.get('passengerWorkName');115 }116 } else {117 if (this.get('memberIsDriver')) {118 title = this.get('partner.possessiveFirstName') + ' home location';119 } else {120 title = 'Your home location';121 }122 if (this.get('isAccepted')) {123 address = this.get('passengerHomeAddressCityState');124 } else {125 address = this.get('passengerHomeStreetCityState');126 }127 }128 this.showAddress(title, address);129 },130 lowerLeftTap: function() {131 var title, address;132 if (this.get('isReturnTrip')){133 if (this.get('memberIsDriver')) {134 title = this.get('partner.possessiveFirstName') + ' home location';135 } else {136 title = 'Your home location';137 }138 if (this.get('isAccepted')) {139 address = this.get('passengerHomeAddressCityState');140 } else {141 address = this.get('passengerHomeStreetCityState');142 }143 } else {144 if (this.get('memberIsDriver')) {145 title = this.get('partner.possessiveFirstName') + ' work location';146 } else {147 title = 'Your work location';148 }149 if (this.get('isAccepted')) {150 address = this.get('passengerWorkAddressCityState');151 } else {152 address = this.get('passengerWorkName');153 }154 }155 this.showAddress(title, address);156 },157 lowerRightTap: function() {158 var title, address;159 if (this.get('isReturnTrip')){160 if (this.get('memberIsDriver')) {161 title = 'Your home location';162 } else {163 title = this.get('partner.possessiveFirstName') + ' home location';164 }165 if (this.get('isAccepted')) {166 address = this.get('driverHomeAddressCityState');167 } else {168 address = this.get('driverHomeStreetCityState');169 }170 } else {171 if (this.get('memberIsDriver')) {172 title = 'Your work location';173 } else {174 title = this.get('partner.possessiveFirstName') + ' work location';175 }176 if (this.get('isAccepted')) {177 address = this.get('driverWorkAddressCityState');178 } else {179 address = this.get('driverWorkName');180 }181 }182 this.showAddress(title, address);183 },184 toggleDirection: function(direction, id, other) {185 this.set('direction', direction);186 $(id).addClass('active');187 $(other).removeClass('active');188 },189 toggleDriver: function(mode, id, other) {190 this.set('selectedDriverMode', mode);191 $(id).addClass('active');192 $(other).removeClass('active');193 },194 showOptions: function() {195 var controller = this;196 var partnerName = this.get('partner.firstName');197 var plankAcceptProposal = {198 title: "Accept Proposal",199 iconClass: "fa fa-check",200 handler: function() {201 controller.send("acceptProposal");202 },203 transition: null204 };205 var plankMakeProposal = {206 title: "Send It",207 iconClass: "fa fa-check",208 handler: function() {209 controller.send("makeProposal");210 },211 transition: null212 };213 var plankProposeRide = {214 title: "Send It",215 iconClass: "fa fa-check",216 handler: function() {217 controller.send("propose");218 },219 transition: null220 };221 var plankMapRoute = {222 title: " Map the Ride",223 iconClass: "fa fa-map-marker",224 handler: function() {225 controller.send("showRoute", true);226 },227 transition: null228 };229 var cancelRideProposal = "Decline Proposal";230 if (this.get('isCurrentMemberOwner')) {231 if (this.get('isWaitingForResponse')) {232 cancelRideProposal = "Cancel Ride Proposal";233 } else {234 cancelRideProposal = "Decline Ride Proposal";235 }236 }237 var plankDeclineProposal = {238 title: cancelRideProposal,239 iconClass: "fa fa-thumbs-down",240 handler: function() {241 controller.send("declineProposal");242 },243 transition: null244 };245 var plankCancelTrip = {246 title: 'Cancel Trip',247 iconClass: "fa fa-thumbs-down",248 handler: function() {249 controller.send("cancelProposal");250 },251 transition: null252 };253 var plankDone = {254 title: " Cancel",255 iconClass: "fa fa-times-circle",256 handler: function() {257 controller.send("done");258 },259 transition: null260 };261 var plankCancelEdit = {262 title: " Cancel Edit",263 iconClass: "fa fa-times",264 handler: function() {265 controller.send("cancel");266 },267 transition: null268 };269 var plankAttachNote = {270 title: "Note to " + this.get('partner.firstName'),271 iconClass: "fa fa-edit",272 handler: function() {273 controller.send('attachNote');274 },275 transition: null276 };277 var plankSendMessage = {278 title: "Message " + partnerName,279 iconClass: "fa fa-comment-o",280 handler: function() {281 controller.send("sendMessage");282 },283 transition: null284 };285 var plankMakeChanges = {286 title: "Make Changes",287 iconClass: "fa fa-pencil",288 handler: function() {289 controller.send("proposeChanges");290 },291 transition: null292 };293 var plankCall = {294 title: "Call " + this.get('partner.firstName'),295 iconClass: "fa fa-phone",296 handler: function() {297 window.location = "tel:1" + controller.get('partner.mobilePhone');298 },299 transition: null300 };301 var selections;302 if (this.get('rideProposal')) {303 if (this.get('editing')) {304 selections = [plankProposeRide, plankCancelEdit, plankAttachNote, plankMapRoute];305 } else if (this.get('isAccepted')) {306 selections = [plankSendMessage, plankCall, plankCancelTrip, plankMapRoute];307 } else {308 if(this.get('isWaitingForResponse')) {309 selections = [plankDeclineProposal, plankMapRoute];310 } else {311 selections = [plankAcceptProposal, plankMakeChanges, plankDeclineProposal, plankAttachNote, plankMapRoute];312 }313 }314 } else {315 selections = [plankMakeProposal, plankDone, plankAttachNote, plankMapRoute];316 }317 modalMenu(selections);318 },319 attachNote: function() {320 new MessageDialog().modalDialog(321 {322 dialogTitle: 'Attach a note',323 dialogImageUrl: '/assets/img/ios-bookmark-icon.png',324 dialogText: 'Enter note for ' + this.get('partner.firstName'),325 controller: this,326 message: this.get('personalMessage'),327 limit: 300,328 actionText: 'Attach', actionClass: 'btn-success', func: this.attachTheNote,329 cancelText: 'Cancel', cancelClass: 'btn-default'330 }, !this.get('controllers.login.onDesktop'));331 }332 },333 attachTheNote: function(controller, msg) {334 controller.set('personalMessage', msg);335 if (msg.length > 0) controller.set('noteAttached', "You've attached a note");336 }337});...
LeftSection.js
Source:LeftSection.js
1var partanA = "<a class='employee517-service'> <div class='employee517-service-icon'><i class='";2var partanB = "'></i></div><div class='employee517-serviceName'>";3var partanC = "</div><div class='employee517-serviceCaption'>";4var partanD = "</div></a>";5var OperatorCategory = "<h2>Operator   </h2>";6 var OperationIcon = partanA +"fa fa-street-view fa-3x"+partanB+"Operation"+partanC+"Operating Orders"+partanD;7 var NewOrderIcon = partanA +"fa fa-pencil fa-3x"+partanB+"New Order"+partanC+"Place New Orders"+partanD;8var RestaurantCategory = "<h2>Restaurant   </h2>";9 var InformationIcon = partanA +"fa fa-home fa-3x"+partanB+"Information"+partanC+"Check/Edit Restaurants"+partanD;10 var DishIcon = partanA +"fa fa-cube fa-3x"+partanB+"Dish"+partanC+"Check/Edit Dish"+partanD;11 var OrderHistoryIcon = partanA +"fa fa-file-text-o fa-3x"+partanB+"Order History"+partanC+"View & Search Order"+partanD;12var DriverCategory = "<h2>Driver   </h2>";13 var DriverOrderHistoryIcon = partanA +"fa fa-file-text-o fa-3x"+partanB+"Order History"+partanC+"View & Search Orders"+partanD;14var mainpanel_left_panel_minWidth = 400;var mainpanel_left_icon_Height = 50;var mainpanel_left_icon_Width = 350;15Ext.define('517Employee.view.navigation.mainpanel.LeftSection', {16 extend: 'Ext.panel.Panel',17 requires: [18 19 ],20 xtype: 'employee-navigation-mainpanel-left',21 frame:false,border:false,22 minWidth:mainpanel_left_panel_minWidth,23 layout: 'absolute',24 initComponent: function() {25 var Lx = 25;26 var Ly = 0;27 var items=[];28 ////console.log( Ext.getCmp( 'Employee-Header').getUserInfo() );29 //if ( Ext.getCmp( 'Employee-Header').getUserInfo().email == 'test@test.test' ) {30 // var driverTitle = this.createIconTitle( DriverCategory , Lx , Ly ); Ly += 50;31 // var driverBlockOrderHistory = this.createIcon( DriverOrderHistoryIcon , 'employee-driverUnique orderHistory' , Lx , Ly );32 // items.push( driverTitle ); items.push( driverBlockOrderHistory );33 //} else {34 // If Admin35 if ( Ext.getCmp( 'Employee-Header').checkUserPermissions( 'admin' ) == true ) {36 var operatorTitle = this.createIconTitle( OperatorCategory , Lx , Ly ); Ly += 50;37 var operatorBlockOperation = this.createIcon( OperationIcon , 'employee-operator operation' , Lx , Ly ); Ly += 50;38 var operatorBlockNewOrder = this.createIcon( NewOrderIcon , 'employee-operator newOrder' , Lx , Ly ); Ly += 70;39 items.push( operatorTitle ); items.push( operatorBlockOperation ); items.push( operatorBlockNewOrder );40 var restaurantTitle = this.createIconTitle( RestaurantCategory , Lx , Ly ); Ly += 50;41 var restaurantBlockOrderHistory = this.createIcon( OrderHistoryIcon , 'employee-restaurant orderHistory' , Lx , Ly ); Ly += 50;42 items.push( restaurantTitle ); items.push( restaurantBlockOrderHistory );43 var restaurantBlockInformation = this.createIcon( InformationIcon , 'employee-restaurant information' , Lx , Ly ); Ly += 50;44 var restaurantBlockDish = this.createIcon( DishIcon , 'employee-restaurant dish' , Lx , Ly ); Ly += 70;45 items.push( restaurantBlockInformation ); items.push( restaurantBlockDish );46 var driverTitle = this.createIconTitle( DriverCategory , Lx , Ly ); Ly += 50;47 var driverBlockOrderHistory = this.createIcon( DriverOrderHistoryIcon , 'employee-driver orderHistory' , Lx , Ly );48 items.push( driverTitle ); items.push( driverBlockOrderHistory );49 } else if ( Ext.getCmp( 'Employee-Header').checkUserPermissions( 'operator' ) == true ) {50 // If Operator51 var operatorTitle = this.createIconTitle( OperatorCategory , Lx , Ly ); Ly += 50;52 var operatorBlockOperation = this.createIcon( OperationIcon , 'employee-operator operation' , Lx , Ly ); Ly += 50;53 var operatorBlockNewOrder = this.createIcon( NewOrderIcon , 'employee-operator newOrder' , Lx , Ly ); Ly += 70;54 items.push( operatorTitle ); items.push( operatorBlockOperation ); items.push( operatorBlockNewOrder );55 var restaurantTitle = this.createIconTitle( RestaurantCategory , Lx , Ly ); Ly += 50;56 var restaurantBlockOrderHistory = this.createIcon( OrderHistoryIcon , 'employee-restaurant orderHistory' , Lx , Ly ); Ly += 50;57 items.push( restaurantTitle ); items.push( restaurantBlockOrderHistory );58 var driverTitle = this.createIconTitle( DriverCategory , Lx , Ly ); Ly += 50;59 var driverBlockOrderHistory = this.createIcon( DriverOrderHistoryIcon , 'employee-driver orderHistory' , Lx , Ly );60 items.push( driverTitle ); items.push( driverBlockOrderHistory );61 } else if ( Ext.getCmp( 'Employee-Header').checkUserPermissions( 'driver' ) == true ) {62 // If Only Driver Permission63 var driverTitle = this.createIconTitle( DriverCategory , Lx , Ly ); Ly += 50;64 var driverBlockOrderHistory = this.createIcon( DriverOrderHistoryIcon , 'employee-driverUnique orderHistory' , Lx , Ly );65 items.push( driverTitle ); items.push( driverBlockOrderHistory );66 }67 // }68 this.items = items;69 this.callParent(arguments);70 },71 createIcon:function( html , action , x , y ) {72 var newIcon = new Object();73 newIcon.html = html;74 newIcon.navigateAction = action;75 newIcon.x = x;76 newIcon.y = y;77 newIcon.listeners = {78 render: function( panel , b , c , d , e , f , g ) {79 panel.el.on('click', function() {80 Ext.getCmp( 'Employee-Navigation' ).doNavigation( panel );81 });82 }, scope: this83 };84 newIcon.height = mainpanel_left_icon_Height;85 newIcon.width = mainpanel_left_icon_Width;86 newIcon.border = false;87 newIcon.frame = false;88 newIcon.bodyStyle = {'border-width':'0px',cursor:'pointer'};89 return newIcon;90 },91 createIconTitle:function( html , x , y ) {92 var newIcon = new Object();93 newIcon.html = html;94 newIcon.x = x;95 newIcon.y = y;96 newIcon.height = 50;97 newIcon.width = mainpanel_left_icon_Width;98 newIcon.frame = false;99 newIcon.bodyStyle = {'border-width':'0px',cursor:'pointer'};100 return newIcon;101 }102});103/*104 * Order105 *106 */107var orderBlockTitle = {108 x:L0x,y:L0y,height:50,width:mainpanel_left_panel_minWidth , frame:false,bodyStyle:{'border-width':'0px',},109 html: OrderCategory,110 listeners: {111 render: function( panel , b , c , d , e , f , g ) {112 panel.el.on('click', function() {113 });114 }, scope: this115 }116};117var OperatorBlockTitle = {118 x:L0x,y:L0y,height:50,width:mainpanel_left_panel_minWidth , frame:false,bodyStyle:{'border-width':'0px',},119 html: OrderCategory,120 listeners: {121 render: function( panel , b , c , d , e , f , g ) {122 panel.el.on('click', function() {123 ////console.log( panel );124 });125 }, scope: this126 }...
safari-window-e2e-specs.js
Source:safari-window-e2e-specs.js
...85 await driver.get(GUINEA_PIG_FRAME_PAGE);86 });87 it('should switch to frame by name', async () => {88 await driver.frame('first');89 (await driver.title()).should.be.equal('Frameset guinea pig');90 let h1 = await driver.elementByTagName('h1');91 (await h1.text()).should.be.equal('Sub frame 1');92 });93 it('should switch to frame by index', async () => {94 await driver.frame(1);95 (await driver.title()).should.be.equal('Frameset guinea pig');96 let h1 = await driver.elementByTagName('h1');97 (await h1.text()).should.be.equal('Sub frame 2');98 });99 it('should switch to frame by id', async () => {100 await driver.frame('frame3');101 (await driver.title()).should.be.equal('Frameset guinea pig');102 let h1 = await driver.elementByTagName('h1');103 (await h1.text()).should.be.equal('Sub frame 3');104 });105 it('should switch back to default content from frame', async () => {106 await driver.frame('first');107 (await driver.title()).should.be.equal('Frameset guinea pig');108 let h1 = await driver.elementByTagName('h1');109 (await h1.text()).should.be.equal('Sub frame 1');110 await driver.frame(null);111 (await driver.elementByTagName('frameset')).should.exist;112 });113 it('should switch to child frames', async () => {114 await driver.frame('third');115 (await driver.title()).should.be.equal('Frameset guinea pig');116 await driver.frame('childframe');117 (await driver.elementById('only_on_page_2')).should.exist;118 });119 it('should execute javascript in frame', async () => {120 await driver.frame('first');121 (await driver.execute(GET_ELEM_SYNC)).should.be.equal('Sub frame 1');122 });123 it.skip('should execute async javascript in frame', async () => {124 await driver.frame('first');125 (await driver.executeAsync(GET_ELEM_ASYNC)).should.be.equal('Sub frame 1');126 });127 });128 describe('iframes', function () {129 beforeEach(async () => {130 await driver.get(GUINEA_PIG_IFRAME_PAGE);131 });132 it('should switch to iframe by name', async () => {133 await driver.frame('iframe1');134 (await driver.title()).should.be.equal('Iframe guinea pig');135 let h1 = await driver.elementByTagName('h1');136 (await h1.text()).should.be.equal('Sub frame 1');137 });138 it('should switch to iframe by index', async () => {139 await driver.frame(1);140 (await driver.title()).should.be.equal('Iframe guinea pig');141 let h1 = await driver.elementByTagName('h1');142 (await h1.text()).should.be.equal('Sub frame 2');143 });144 it('should switch to iframe by id', async () => {145 await driver.frame('id-iframe3');146 (await driver.title()).should.be.equal('Iframe guinea pig');147 let h1 = await driver.elementByTagName('h1');148 (await h1.text()).should.be.equal('Sub frame 3');149 });150 it('should switch to iframe by element', async () => {151 let frame = await driver.elementById('id-iframe3');152 await driver.frame(frame);153 (await driver.title()).should.be.equal('Iframe guinea pig');154 let h1 = await driver.elementByTagName('h1');155 (await h1.text()).should.be.equal('Sub frame 3');156 });157 it('should not switch to iframe by element of wrong type', async () => {158 let h1 = await driver.elementByTagName('h1');159 await driver.frame(h1).should.eventually.be.rejected;160 });161 it('should switch back to default content from iframe', async () => {162 await driver.frame('iframe1');163 (await driver.title()).should.be.equal('Iframe guinea pig');164 let h1 = await driver.elementByTagName('h1');165 (await h1.text()).should.be.equal('Sub frame 1');166 await driver.frame(null);167 (await driver.elementsByTagName('iframe')).should.have.length(3);168 });169 });...
checkdrivers.js
Source:checkdrivers.js
1import React from "react";2import { render } from "react-dom";3import { Form, Button, Row, Col} from 'react-bootstrap';45class CheckAddDriver extends React.Component {6 7 state = {8 drivers_Details_List:[],9 drivers_details: [{10 driver_title: "",11 driver_first_name: "",12 driver_last_name: "",13 driver_gender: "",14 driver_dob: "",15 driver_marital_status: "",16 17 }],18 driver_title_options: ["Mr","Mrs","Dr","Miss","Ms"],19 driver_gender_options: ["Male", "Female"],20 driver_marital_status_options: ["Single","Married"],21 22 };2324 componentDidUpdate(){25 console.log("After Update");26 //console.log(this.state.drivers_details);27 }2829 handleChange = idx => e => {30 const { name, value } = e.target;31 const drivers_details = [...this.state.drivers_details];32 drivers_details[idx][name] = {33 [name]: value34 };35 this.setState({36 drivers_details37 });3839 console.log(this.state.drivers_details);40 41 };4243 handleAddRow = (e) => {44 e.preventDefault();45 const item = {46 driver_title: "",47 driver_first_name: "",48 driver_last_name: "",49 driver_gender: "",50 driver_dob: "",51 driver_marital_status: "",52 53 };54 this.setState({55 drivers_details: [...this.state.drivers_details, item]56 });57 };5859 handleRemoveSpecificRow = (idx) => (e) => {60 e.preventDefault();61 const drivers_details = [...this.state.drivers_details]62 if(drivers_details.length === 1){63 const drivers_details = [...this.state.drivers_details];64 drivers_details[idx] = {65 driver_title: null,66 driver_first_name: null,67 driver_last_name: null,68 driver_gender: null,69 driver_dob: null,70 driver_marital_status: null,71 72 };73 this.setState({74 drivers_details75 });76 }77 else{78 drivers_details.splice(idx, 1);79 this.setState({ drivers_details });80 }81 }8283 radioButtonCheck = (e) => {84 85 [...document.getElementsByClassName("radio-button-input")].forEach(node => {86 node.checked === true87 ? (node.parentElement.classList.add("radio-button-checked"))88 : (node.parentElement.classList.remove("radio-button-checked"));89 });9091}9293 render() {94 return (95 <div>96 <h2>About Driver</h2>97 {this.state.drivers_details.map((item, idx) => (98 <React.Fragment key={idx}>99 <Form.Group>100 <Form.Label>Driver's Title</Form.Label>101 <Form.Control className="form-field " name="driver_title" as="select" value={this.state.drivers_details[idx].driver_title} onChange={this.handleChange(idx)}>102 <option >-- Please Select --</option>103 {this.state.driver_title_options.length > 0 && this.state.driver_title_options.map((option, i) =>104 <option value={option} key={i}>{option}</option>105 )}106 </Form.Control>107 </Form.Group>108 109 <Row>110 <Col>111 <Form.Group>112 <Form.Label>Driver's First Name</Form.Label>113 <Form.Control className="form-field" name="driver_first_name" value={this.state.drivers_details[idx].driver_first_name} onChange={this.handleChange(idx)}/>114 </Form.Group>115 </Col>116 <Col>117 <Form.Group>118 <Form.Label>Driver's Last Name</Form.Label>119 <Form.Control className="form-field" name="driver_last_name" value={this.state.drivers_details[idx].driver_last_name} onChange={this.handleChange(idx)}/>120 </Form.Group>121 </Col>122 </Row>123124 <Row>125 <Col>126 <Form.Group>127 <Form.Label id="radio-button-label">Driver's Gender</Form.Label>128 <Row>129 {this.state.driver_gender_options.length > 0 && this.state.driver_gender_options.map((option, i) =>130 <Col key={i} lg={5}>131 <Form.Group key={i} id="radio-button-field" className="radio-button" onChange={this.radioButtonCheck()} >132 <input id={option} name="driver_gender" className="radio-button-input" type="radio" value={option} checked={this.state.drivers_details[idx].driver_gender === option} onChange={this.handleChange(idx)} />133 {' '}{' '}134 <Form.Label>{option}</Form.Label>135 </Form.Group>136 </Col>137 )}138 </Row>139 </Form.Group>140 </Col>141 <Col>142143 <Form.Group>144 <Form.Label>Driver's Date of Birth</Form.Label>145 <Form.Control className="form-field" name="driver_dob" type="date" value={this.state.drivers_details[idx].driver_dob} onChange={this.handleChange(idx)}/>146 </Form.Group>147 </Col>148 </Row>149150 151 <Form.Group>152 <Form.Label>Driver's Marital Status</Form.Label>153 <Form.Control className="form-field " name="driver_marital_status" as="select" value={this.state.drivers_details[idx].driver_marital_status} onChange={this.handleChange(idx)}>154 <option >-- Please Select --</option>155 {this.state.driver_marital_status_options.length > 0 && this.state.driver_marital_status_options.map((option, i) =>156 <option value={option} key={i}>{option}</option>157 )}158 </Form.Control>159 </Form.Group>160 161162163 <Button variant="danger" className="button-rounded btn-sm" onClick={this.handleRemoveSpecificRow(idx)}>164 Remove165 </Button>166 {' '} 167 <Button variant="info" onClick={this.handleAddRow} className="button-rounded btn-sm">168 Add Another Driver169 </Button>170 </React.Fragment>171 ))}172173 </div>174 );175 }176}177 ...
frames-specs.js
Source:frames-specs.js
...23 );24 });25 it('should switch to frame by name', async function () {26 await driver.setFrame('first');27 (await driver.title()).should.be.equal(FRAMESET_TITLE);28 let h1 = await driver.findElement('tag name', 'h1');29 (await driver.getText(h1)).should.be.equal(SUB_FRAME_1_TITLE);30 });31 it('should switch to frame by index', async function () {32 await driver.setFrame(1);33 (await driver.title()).should.be.equal(FRAMESET_TITLE);34 let h1 = await driver.findElement('tag name', 'h1');35 (await driver.getText(h1)).should.be.equal(SUB_FRAME_2_TITLE);36 });37 it('should switch to frame by id', async function () {38 await driver.setFrame('frame3');39 (await driver.title()).should.be.equal(FRAMESET_TITLE);40 let h1 = await driver.findElement('tag name', 'h1');41 (await driver.getText(h1)).should.be.equal(SUB_FRAME_3_TITLE);42 });43 it('should switch back to default content from frame', async function () {44 await driver.setFrame('first');45 (await driver.title()).should.be.equal(FRAMESET_TITLE);46 let h1 = await driver.findElement('tag name', 'h1');47 (await driver.getText(h1)).should.be.equal(SUB_FRAME_1_TITLE);48 await driver.setFrame(null);49 (await driver.findElement('tag name', 'frameset')).should.exist;50 });51 it('should switch to child frames', async function () {52 await driver.setFrame('third');53 (await driver.title()).should.be.equal(FRAMESET_TITLE);54 await driver.setFrame('childframe');55 (await driver.findElement('id', 'only_on_page_2')).should.exist;56 });57 it('should execute javascript in frame', async function () {58 await driver.setFrame('first');59 (await driver.execute(GET_ELEM_SYNC)).should.be.equal(SUB_FRAME_1_TITLE);60 });61 it('should execute async javascript in frame', async function () {62 await driver.setFrame('first');63 (await driver.executeAsync(GET_ELEM_ASYNC)).should.be.equal(SUB_FRAME_1_TITLE);64 });65 it('should get source within a frame', async function () {66 let pageSource = await driver.getPageSource();67 pageSource.should.include(FRAMESET_TITLE);68 await driver.setFrame('first');69 let frameSource = await driver.getPageSource();70 frameSource.should.include(SUB_FRAME_1_TITLE);71 frameSource.should.not.include(FRAMESET_TITLE);72 });73 });74 describe('iframes', function () {75 beforeEach(async function () {76 return await loadWebView(77 desired,78 driver,79 `${env.TEST_END_POINT}iframes.html`,80 'Iframe guinea pig'81 );82 });83 it('should switch to iframe by name', async function () {84 await driver.setFrame('iframe1');85 (await driver.title()).should.be.equal(IFRAME_FRAMESET_TITLE);86 let h1 = await driver.findElement('tag name', 'h1');87 (await driver.getText(h1)).should.be.equal(SUB_FRAME_1_TITLE);88 });89 it('should switch to iframe by index', async function () {90 await driver.setFrame(1);91 (await driver.title()).should.be.equal(IFRAME_FRAMESET_TITLE);92 let h1 = await driver.findElement('tag name', 'h1');93 (await driver.getText(h1)).should.be.equal(SUB_FRAME_2_TITLE);94 });95 it('should switch to iframe by id', async function () {96 await driver.setFrame('id-iframe3');97 (await driver.title()).should.be.equal(IFRAME_FRAMESET_TITLE);98 let h1 = await driver.findElement('tag name', 'h1');99 (await driver.getText(h1)).should.be.equal(SUB_FRAME_3_TITLE);100 });101 it('should switch to iframe by element', async function () {102 let frame = await driver.findElement('id', 'id-iframe3');103 await driver.setFrame(frame);104 (await driver.title()).should.be.equal(IFRAME_FRAMESET_TITLE);105 let h1 = await driver.findElement('tag name', 'h1');106 (await driver.getText(h1)).should.be.equal(SUB_FRAME_3_TITLE);107 });108 it('should not switch to iframe by element of wrong type', async function () {109 let h1 = await driver.findElement('tag name', 'h1');110 await driver.setFrame(h1).should.eventually.be.rejected;111 });112 it('should switch back to default content from iframe', async function () {113 await driver.setFrame('iframe1');114 (await driver.title()).should.be.equal(IFRAME_FRAMESET_TITLE);115 let h1 = await driver.findElement('tag name', 'h1');116 (await driver.getText(h1)).should.be.equal(SUB_FRAME_1_TITLE);117 await driver.setFrame(null);118 (await driver.findElements('tag name', 'iframe')).should.have.length(3);119 });120 it('should get source within an iframe', async function () {121 let pageSource = await driver.getPageSource();122 pageSource.should.include(IFRAME_FRAMESET_TITLE);123 await driver.setFrame('iframe1');124 let frameSource = await driver.getPageSource();125 frameSource.should.include(SUB_FRAME_1_TITLE);126 frameSource.should.not.include(IFRAME_FRAMESET_TITLE);127 });128 });...
leaderboard.js
Source:leaderboard.js
1console.clear();2const tableRow = document.querySelectorAll(".list__row");3const overlay = document.querySelector(".overlay");4const sidebar = document.querySelector(".sidebar");5const closeOverlayBtn = document.querySelector(".button--close");6const sidebarClose = () => {7 sidebar.classList.remove("is-open");8 overlay.style.opacity = 0;9 setTimeout(() => {10 overlay.classList.remove("is-open");11 overlay.style.opacity = 1;12 }, 300);13};14tableRow.forEach(tableRow => {15 tableRow.addEventListener("click", function() {16 overlay.style.opacity = 0;17 overlay.classList.add("is-open");18 sidebar.classList.add("is-open");19 setTimeout(() => {20 overlay.style.opacity = 1;21 }, 100);22 23 // Sidebar content24 const sidebarBody = document.querySelector(".sidebar__body");25 sidebarBody.innerHTML = '';26 27 const driverPlace = this.querySelector(".list__cell:nth-of-type(1) .list__value").innerHTML;28 const driverName = this.querySelector(".list__cell:nth-of-type(2) .list__value").innerHTML;29 const driverTeam = this.querySelector(".list__cell:nth-of-type(3) .list__value").innerHTML;30 const driverPoints = this.querySelector(".list__cell:nth-of-type(4) .list__value").innerHTML;31 const driverImage = this.dataset.image;32 const driverNationality = this.dataset.nationality;33 const driverDOB = this.dataset.dob;34 const driverCountry = this.dataset.country;35 36 const newDriver = document.createElement('div');37 newDriver.classList = 'driver';38 39 const driverContent = document.createElement('div');40 driverContent.classList = 'driver__content';41 42 const profile = document.createElement('div');43 profile.classList = 'driver__image';44 profile.style.backgroundImage = `url('${driverImage}')`;45 newDriver.appendChild(profile);46 47 const driverTitle = document.createElement('div');48 driverTitle.classList = 'driver__title';49 driverTitle.innerHTML = driverName;50 driverContent.appendChild(driverTitle);51 52 const driverInfo = document.createElement('div');53 driverInfo.innerHTML = `54 <table class="driver__table">55 <tbody>56 <tr>57 <td><small>Time Of Last Answer</small></td>58 <td>${driverTeam}</td>59 </tr>60 61 62 <tr>63 <td><small>Rank</small></td>64 <td>${driverPlace}</td>65 </tr>66 <tr>67 <td><small>Points</small></td>68 <td>${driverPoints}</td>69 </tr>70 </tbody>71 </table>`;72 driverContent.appendChild(driverInfo);73 74 newDriver.appendChild(driverContent);75 sidebarBody.appendChild(newDriver);76 77 });78});79closeOverlayBtn.addEventListener("click", function() {80 sidebarClose();81});82overlay.addEventListener("click", function() {83 sidebarClose();...
ranking.js
Source:ranking.js
1const tableRow = document.querySelectorAll(".list__row");2const overlay = document.querySelector(".overlay");3const sidebar = document.querySelector(".sidebar");4const closeOverlayBtn = document.querySelector(".button--close");5const sidebarClose = () => {6 sidebar.classList.remove("is-open");7 overlay.style.opacity = 0;8 setTimeout(() => {9 overlay.classList.remove("is-open");10 overlay.style.opacity = 1;11 }, 300);12};13tableRow.forEach(tableRow => {14 tableRow.addEventListener("click", function () {15 overlay.style.opacity = 0;16 overlay.classList.add("is-open");17 sidebar.classList.add("is-open");18 setTimeout(() => {19 overlay.style.opacity = 1;20 }, 100);21 // Sidebar content22 const sidebarBody = document.querySelector(".sidebar__body");23 sidebarBody.innerHTML = '';24 const driverName = this.querySelector(".list__cell:nth-of-type(2) .list__value").innerHTML;25 const driverTeam = this.querySelector(".list__cell:nth-of-type(4) .list__value").innerHTML;26 const driverPoints = this.querySelector(".list__cell:nth-of-type(4) .list__value").innerHTML;27 const driverImage = this.dataset.image;28 const driverNationality = this.dataset.nationality;29 const driverCountry = this.dataset.country;30 const newDriver = document.createElement('div');31 newDriver.classList = 'driver';32 const driverContent = document.createElement('div');33 driverContent.classList = 'driver__content';34 const profile = document.createElement('div');35 profile.classList = 'driver__image';36 profile.style.backgroundImage = `url('${driverImage}')`;37 newDriver.appendChild(profile);38 const driverTitle = document.createElement('div');39 driverTitle.classList = 'driver__title';40 driverTitle.innerHTML = driverName;41 driverContent.appendChild(driverTitle);42 const driverInfo = document.createElement('div');43 driverInfo.innerHTML = `44 <table class="driver__table">45 <tbody>46 <tr>47 <td><small>Missing</small></td>48 <td style="color: red;">${driverTeam}</td>49 </tr>50 </tbody>51 </table>`;52 driverContent.appendChild(driverInfo);53 newDriver.appendChild(driverContent);54 sidebarBody.appendChild(newDriver);55 });56});57closeOverlayBtn.addEventListener("click", function () {58 sidebarClose();59});60overlay.addEventListener("click", function () {61 sidebarClose();...
Using AI Code Generation
1var webdriver = require('selenium-webdriver');2 build();3driver.getTitle().then(function(title) {4 console.log(title);5});6driver.quit();7var webdriver = require('selenium-webdriver');8 build();9driver.getTitle().then(function(title) {10 console.log(title);11});12driver.quit();13var webdriver = require('selenium-webdriver');14 build();15driver.getTitle().then(function(title) {16 console.log(title);17});18driver.quit();19var webdriver = require('selenium-webdriver');20 build();21driver.getTitle().then(function(title) {22 console.log(title);23});24driver.quit();25var webdriver = require('selenium-webdriver');26 build();27driver.getTitle().then(function(title) {28 console.log(title);29});30driver.quit();31var webdriver = require('selenium-webdriver');32 build();33driver.getTitle().then(function
Using AI Code Generation
1var webdriver = require('selenium-webdriver');2var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();3driver.getTitle().then(function(title) {4 console.log(title);5});6driver.quit();7var webdriver = require('selenium-webdriver');8var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();9driver.getTitle().then(function(title) {10 console.log(title);11});12driver.quit();13var webdriver = require('selenium-webdriver');14var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();15driver.getCurrentUrl().then(function(url) {16 console.log(url);17});18driver.quit();19var webdriver = require('selenium-webdriver');20var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();21driver.getPageSource().then(function(source) {22 console.log(source);23});24driver.quit();25var webdriver = require('selenium-webdriver');26var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();27driver.findElement(webdriver.By.name('q')).sendKeys('webdriver');28driver.quit();29var webdriver = require('selenium-webdriver');30var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();31driver.findElements(webdriver.By.name('q')).then(function(elements) {32 console.log(elements.length);33});34driver.quit();35var webdriver = require('selenium-webdriver');36var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();37driver.findElement(webdriver.By.name('q')).sendKeys('webdriver');38driver.quit();
Using AI Code Generation
1driver.title().then(function(title) {2 console.log("The title is: " + title);3});4driver.contexts().then(function(contexts) {5 console.log("The contexts are: " + contexts);6});7driver.currentContext().then(function(context) {8 console.log("The current context is: " + context);9});10driver.setContext("WEBVIEW_1").then(function() {11 console.log("The context has been set to: " + "WEBVIEW_1");12});13driver.getWindowHandles().then(function(handles) {14 console.log("The window handles are: " + handles);15});16driver.getWindowHandle().then(function(handle) {17 console.log("The window handle is: " + handle);18});19driver.setWindow("NATIVE_APP").then(function() {20 console.log("The window has been set to: " + "NATIVE_APP");21});22driver.getPageSource().then(function(source) {23 console.log("The page source is: " + source);24});25driver.close().then(function() {26 console.log("The window has been closed");27});28driver.getOrientation().then(function(orientation) {29 console.log("The orientation is: " + orientation);30});31driver.setOrientation("LANDSCAPE").then(function() {32 console.log("The orientation has been set to: " + "LANDSCAPE");33});34driver.getGeoLocation().then(function(location) {35 console.log("The location is: " + location);36});37driver.setGeoLocation({latitude: 1.23, longitude: 4.56, altitude: 7.89}).then(function() {38 console.log("The location has been set to: " + {latitude: 1.23, longitude: 4.56, altitude
Using AI Code Generation
1describe('WebdriverIO and Appium, when interacting with an Android device', () => {2 it('should be able to get the title of the current page', () => {3 driver.title().then((title) => {4 console.log(`The title is: '${title}'`);5 });6 });7});8describe('WebdriverIO and Appium, when interacting with an Android device', () => {9 it('should be able to click a button', () => {10 driver.click('~buttonTestCD');11 });12});13[0-0] COMMAND click("buttonTestCD")14describe('WebdriverIO and Appium, when interacting with an Android device', () => {15 it('should be able to click a button', () => {16 driver.click('~buttonTestCD');17 });18});19[0-0] COMMAND click("buttonTestCD")20describe('WebdriverIO and Appium, when interacting with an Android device', () => {21 it('should be able to set a value in a text field', () => {22 driver.setValue('Hello World!', '~editTextCD');23 });24});25[0-0] COMMAND setValue("Hello World!", "editTextCD")26describe('WebdriverIO and Appium, when interacting with an Android device', () => {27 it('should be able to get the text of an element', () => {28 driver.getText('~textViewCD').then((text) => {29 console.log(`The text is: '${text}'`);30 });31 });32});33[0-0] COMMAND getText("textViewCD")
Using AI Code Generation
1driver.title().then(function(title) {2 console.log("Title is: " + title);3});4driver.quit();5driver.elementById("content").text().then(function(text) {6 console.log("Text is: " + text);7});8driver.quit();9driver.elementById("content").text().then(function(text) {10 console.log("Text is: " + text);11});12driver.quit();13 console.log("Clicked on My Account link");14});15driver.quit();16 console.log("Clicked on My Account link");17});18driver.quit();19 console.log("Clicked on My Account link");20});21driver.quit();22 console.log("Clicked on My Account link");23});24driver.quit();
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run Appium automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
