Guest User

Untitled

a guest
May 26th, 2020
120
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2. <div class="page" data-name="home">
  3. <!-- Slider container -->
  4. <div data-pagination='{"el": ".swiper-pagination"}' class="swiper-container demo-swiper">
  5. <!-- Slides wrapper -->
  6. <div class="swiper-wrapper">
  7. <!-- Slides -->
  8. <div class="swiper-slide">
  9. <div class="block">
  10. <div class="row resizable">
  11. <div class="col-100">
  12. <center>
  13. <img class="onboarding-customer-destination-two" src="assets/user/customer-destination-two.png" alt="Customer Destination">
  14. </center>
  15. </div>
  16. </div>
  17. </div>
  18. <div class="block">
  19. <div class="row resizable">
  20. <div class="col-100">
  21. <h6 class="order-text josefin-sans-bold-font">ORDER</h6>
  22. <h6 class="order-desc josefin-sans-light-font">Order for our service from your location with no stress</h6>
  23. </div>
  24. </div>
  25. </div>
  26. <div class="block">
  27. <div class="row resizable">
  28. <div class="col-100">
  29. <center>
  30. <a id="ob-one" href="#" class="getting-started-button josefin-sans-bold-font" @click="slideNext">
  31. Get Started <i class="oba-icon f7-icons size-18">arrow_right</i>
  32. </a>
  33. </center>
  34. <!-- -->
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <div class="swiper-slide">
  40. <div class="block">
  41. <div class="row resizable">
  42. <div class="col-100">
  43. <center>
  44. <img class="onboarding-customer-destination-two" src="assets/user/bike-two.png" alt="Dispatch Rider">
  45. </center>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="block">
  50. <div class="row resizable">
  51. <div class="col-100">
  52. <h6 class="order-text josefin-sans-bold-font">DISPATCH</h6>
  53. <h6 class="order-desc josefin-sans-light-font">Our dispatch riders will pick up your package and deliver to the specified drop off location</h6>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="block">
  58. <div class="row resizable">
  59. <div class="col-100">
  60. <center>
  61. <a id="ob-two" href="#" class="getting-started-button josefin-sans-bold-font" @click="slideNext">
  62. Get Started <i class="oba-icon f7-icons size-18">arrow_right</i>
  63. </a>
  64. </center>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="swiper-slide">
  70. <div class="block">
  71. <div class="row resizable">
  72. <div class="col-100">
  73. <center>
  74. <img class="onboarding-customer-destination-two" src="assets/user/map-tracker-two.png" alt="Tracker">
  75. </center>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="block">
  80. <div class="row resizable">
  81. <div class="col-100">
  82. <h6 class="order-text josefin-sans-bold-font">TRACK</h6>
  83. <h6 class="order-desc josefin-sans-light-font">You can track your package while in transit to the drop off loaction in real time</h6>
  84. </div>
  85. </div>
  86. </div>
  87. <div class="block">
  88. <div class="row resizable">
  89. <div class="col-100">
  90. <center>
  91. <a id="ob-three" href="#" class="getting-started-button josefin-sans-bold-font" @click="slideNext">
  92. Get Started <i class="oba-icon f7-icons size-18">arrow_right</i>
  93. </a>
  94. </center>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. <div class="swiper-slide">
  100. <div class="block">
  101. <div class="row resizable">
  102. <div class="col-100">
  103. <h4 class="text-center josefin-sans-bold-font">Select your profile</h4>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="block">
  108. <div class="row resizable">
  109. <div class="col-100">
  110. <h6 class="order-desc josefin-sans-light-font go-up-a-bit-20">Which one are you?</h6>
  111. <h6 class="order-desc josefin-sans-light-font">Please select whether you want to be registered to Gazelle as a user or a dispatch rider</h6>
  112. </div>
  113. </div>
  114. </div>
  115. <div class="block">
  116. <div class="row resizable">
  117. <div class="col-50">
  118. <div class="user-box" @click="userBox">
  119. <center>
  120. <img src="assets/user/customer.png" alt="User" class="select-user">
  121. </center>
  122. <h3 class="text-center josefin-sans-bold-font">User</h3>
  123. <input type="hidden" id="user-box-switch" value="0">
  124. </div>
  125. </div>
  126. <div class="col-50">
  127. <div class="rider-box" @click="riderBox">
  128. <center>
  129. <img src="assets/user/rider.png" alt="Rider" class="select-user">
  130. </center>
  131. <h3 class="text-center josefin-sans-bold-font">Dispatch Rider</h3>
  132. <input type="hidden" id="rider-box-switch" value="0">
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. <div class="block">
  138. <div class="row resizable">
  139. <div class="col-100">
  140. <center>
  141. <button id="select-profile-next-button" class="col button button-large button-fill select-profile-next-button g-button-disabled sheet-open" @click="nextButton">Next</button>
  142. <!-- data-sheet=".select-profile-error" -->
  143. </center>
  144. <h6 class="order-desc josefin-sans-light-font">Not sure what to select? <a href="#" class="gazelle-blue-text">Read about different profiles</a></h6>
  145.  
  146. <!-- SHEET MODAL -->
  147. <div class="sheet-modal select-profile-error" style="height:auto; --f7-sheet-bg-color: #fff;">
  148. <div class="sheet-modal-inner">
  149. <div class="page-content">
  150. <div class="block-title block-title-large josefin-sans-bold-font text-center red-color-text"><i class="f7-icons size-50">exclamationmark_circle</i> Oops!</div>
  151. <div class="block">
  152. <p class="josefin-sans-bold-font text-center"><b>Select either the user or rider box.</b></p>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. <!-- /END SHEET MODAL -->
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165. </template>
  166.  
  167. <!--
  168. <script>
  169. return {
  170. mounted(){
  171. const self = this;
  172. const app = self.$f7;
  173.  
  174. // var $$ = self.$Dom7;
  175.  
  176. // self.$ or self.$$ or self.$dom7 (Working code...)
  177.  
  178. // $$ = self.$dom7;
  179.  
  180. var swiper = app.swiper.create('.swiper-container', {
  181. speed: 400,
  182. spaceBetween: 0
  183. });
  184.  
  185. $$("#ob-one").on("click",function(){
  186.  
  187. swiper.slideNext();
  188.  
  189. });
  190.  
  191.  
  192. $$("#ob-two").on("click",function(){
  193.  
  194. swiper.slideNext();
  195.  
  196. });
  197.  
  198. $$("#ob-three").on("click",function(){
  199.  
  200. swiper.slideNext();
  201.  
  202. });
  203.  
  204. /* USER/RIDER SELECT BOX SWITCH */
  205.  
  206. $$(".user-box").on("click",function(){
  207.  
  208.  
  209.  
  210. userSwitch = $$("#user-box-switch");
  211.  
  212. riderSwitch = $$("#rider-box-switch");
  213.  
  214. nextButton = $$("#select-profile-next-button");
  215.  
  216.  
  217. // check the current status
  218.  
  219. if ( userSwitch.val() == 0 && riderSwitch.val() == 0 ){
  220.  
  221. // add the selected class to the user box
  222.  
  223. $$(this).addClass("user-box-selected");
  224.  
  225. // add 1 value to the hidden input
  226.  
  227. userSwitch.val(1);
  228.  
  229. // enable active button
  230.  
  231. nextButton.removeClass("g-button-disabled");
  232.  
  233. }else{
  234.  
  235. if ( userSwitch.val() == 1 && riderSwitch.val() == 0 ) {
  236.  
  237. // add the selected class to the user box
  238.  
  239. $$(this).removeClass("user-box-selected");
  240.  
  241. // add 1 value to the hidden input
  242.  
  243. userSwitch.val(0);
  244.  
  245. // disable active button
  246.  
  247. nextButton.addClass("g-button-disabled");
  248.  
  249. }
  250.  
  251. }
  252.  
  253.  
  254.  
  255. });
  256.  
  257. $$(".rider-box").on("click",function(){
  258.  
  259. userSwitch = $$("#user-box-switch");
  260.  
  261. riderSwitch = $$("#rider-box-switch");
  262.  
  263. nextButton = $$("#select-profile-next-button");
  264.  
  265.  
  266. // check the current status
  267.  
  268. if ( riderSwitch.val() == 0 && userSwitch.val() == 0 ){
  269.  
  270. // add the selected class to the user box
  271.  
  272. $$(this).addClass("rider-box-selected");
  273.  
  274. // add 1 value to the hidden input
  275.  
  276. riderSwitch.val(1);
  277.  
  278. // enable active button
  279.  
  280. nextButton.removeClass("g-button-disabled");
  281.  
  282. }else{
  283.  
  284. if ( riderSwitch.val() == 1 && userSwitch.val() == 0 ) {
  285.  
  286. // add the selected class to the user box
  287.  
  288. $$(this).removeClass("rider-box-selected");
  289.  
  290. // add 1 value to the hidden input
  291.  
  292. riderSwitch.val(0);
  293.  
  294. // disable active button
  295.  
  296. nextButton.addClass("g-button-disabled");
  297.  
  298. }
  299.  
  300. }
  301.  
  302. });
  303.  
  304. /* NEXT BUTTON */
  305.  
  306. $$("#select-profile-next-button").on("click",function(){
  307.  
  308. userSwitch = $$("#user-box-switch");
  309.  
  310. riderSwitch = $$("#rider-box-switch");
  311.  
  312. // console.log("USER BOX CLICKED:" + userSwitch.val() + " " + "RIDER BOX CLICKED:" + riderSwitch.val() );
  313.  
  314. errorSheetModal = app.sheet.create({
  315. el: '.select-profile-error',
  316. swipeToClose: true,
  317. backdrop: true,
  318. });
  319.  
  320.  
  321. if ( userSwitch.val() == 0 && riderSwitch.val() == 0 ) {
  322.  
  323. errorSheetModal.open(true);
  324.  
  325. }else{
  326.  
  327. if ( userSwitch.val() == 1 || riderSwitch.val() == 1 ) {
  328.  
  329. errorSheetModal.close(true);
  330.  
  331. // save the value to the local storage.
  332.  
  333. localStorage = window.localStorage;
  334.  
  335. localStorage.setItem('onboarding-completed', 'true');
  336.  
  337. if ( userSwitch.val() == 1 ) {
  338.  
  339. localStorage.setItem('user-type', 'user');
  340.  
  341. // redirect to user sign up
  342.  
  343. view.router.navigate('/user-signup/');
  344.  
  345. }
  346.  
  347. if ( riderSwitch.val() == 1 ) {
  348.  
  349. localStorage.setItem('user-type', 'rider');
  350.  
  351. // redirect to rider sign up
  352.  
  353. view.router.navigate('/rider-signup/');
  354.  
  355. }
  356.  
  357. }
  358. }
  359.  
  360. });
  361.  
  362.  
  363. },
  364. methods:{
  365. obOne: function () {
  366.  
  367. var self = this;
  368. self.$app.dialog.alert('Hello World');
  369. },
  370. }
  371. };
  372. </script>
  373. -->
  374.  
  375. <!--
  376. <script>
  377. return {
  378. // Component Data
  379. data: function () {
  380. // Must return an object
  381. return {
  382. name: 'Jimmy',
  383. age: 25,
  384. like: ['Tennis', 'Chess', 'Football'],
  385. }
  386. },
  387. // Component Methods
  388. methods: {
  389. openAlert: function () {
  390. var self = this;
  391. self.$app.dialog.alert('Hello World');
  392. },
  393. },
  394. on: {
  395. pageInit: function (page) {
  396.  
  397. const self = this;
  398. $$ = self.$dom7;
  399. dom7 = this.$$;
  400.  
  401. var swiper = app.swiper.create('.swiper-container', {
  402. speed: 400,
  403. spaceBetween: 0
  404. });
  405. }
  406. },
  407. mounted(){
  408.  
  409. const self = this;
  410. const app = self.$f7;
  411.  
  412. app.on('click', function (formEl, data, xhr) {
  413. // do something with response data
  414. if( formEl.id == 'ob-one' ){
  415. console.log( data );
  416. }
  417. });
  418. },
  419. }
  420. </script>
  421. -->
  422.  
  423. <!--
  424. <script>
  425. return {
  426. mounted(){
  427. const self = this;
  428. const app = self.$f7;
  429.  
  430. var $$ = self.$$;
  431.  
  432. // self.$ or self.$$ or self.$dom7 (Working code...)
  433.  
  434. var swiper = app.swiper.create('.swiper-container', {
  435. speed: 400,
  436. spaceBetween: 0
  437. });
  438.  
  439. // this.$el.find('p').addClass('red')
  440.  
  441. // this.$$('p').text('hello world')
  442.  
  443. this.$$("#ob-one").on("click",function(){
  444.  
  445. console.log("Testing Click 1,2");
  446.  
  447. swiper.slideNext();
  448.  
  449. });
  450. },
  451. // Component Methods
  452. methods: {
  453. openAlert: function () {
  454. var self = this;
  455. self.$app.dialog.alert('Hello World');
  456. },
  457. },
  458. };
  459. </script>
  460. -->
  461.  
  462. <!--
  463. <script type="text/javascript">
  464.  
  465. const self = this;
  466. const app = self.$f7;
  467.  
  468. var $$ = self.$dom7;
  469.  
  470. $$("#ob-one").on("click",function(){
  471.  
  472. alert();
  473.  
  474. console.log("Testing Click 1,2");
  475.  
  476. swiper.slideNext();
  477.  
  478. });
  479.  
  480. </script>
  481. -->
  482.  
  483. <script>
  484. // script must return component object
  485. return {
  486. mounted() {
  487. this.swiper = this.$f7.swiper.create('.swiper-container', {
  488. speed: 400,
  489. spaceBetween: 0
  490. });
  491. },
  492. data: function () {
  493. return {
  494. title: 'Component Page',
  495. names: ['John', 'Vladimir', 'Timo'],
  496. }
  497. },
  498. methods: {
  499. openAlert: function () {
  500. var self = this.$app.dialog.alert('Hello world!');
  501. },
  502. slideNext() {
  503. this.swiper.slideNext();
  504. },
  505. obOne: function(){
  506.  
  507. var self = this;
  508. const app = self.$f7;
  509.  
  510. swiper = app.swiper.get('.swiper-container');
  511.  
  512. // console.log(swiper);
  513.  
  514. swiper.slideNext();
  515.  
  516. },
  517. obTwo: function(){
  518.  
  519. swiper = this.$app.swiper.get('.swiper-container');
  520.  
  521. swiper.slideNext();
  522. },
  523. obThree: function(){
  524.  
  525. swiper = this.$app.swiper.get('.swiper-container');
  526.  
  527. swiper.slideNext();
  528. },
  529. userBox: function(){
  530. userSwitch = $$("#user-box-switch");
  531.  
  532. riderSwitch = $$("#rider-box-switch");
  533.  
  534. nextButton = $$("#select-profile-next-button");
  535.  
  536.  
  537. // check the current status
  538.  
  539. if ( userSwitch.val() == 0 && riderSwitch.val() == 0 ){
  540.  
  541. // add the selected class to the user box
  542.  
  543. $$(this).addClass("user-box-selected");
  544.  
  545. // add 1 value to the hidden input
  546.  
  547. userSwitch.val(1);
  548.  
  549. // enable active button
  550.  
  551. nextButton.removeClass("g-button-disabled");
  552.  
  553. }else{
  554.  
  555. if ( userSwitch.val() == 1 && riderSwitch.val() == 0 ) {
  556.  
  557. // add the selected class to the user box
  558.  
  559. $$(this).removeClass("user-box-selected");
  560.  
  561. // add 1 value to the hidden input
  562.  
  563. userSwitch.val(0);
  564.  
  565. // disable active button
  566.  
  567. nextButton.addClass("g-button-disabled");
  568.  
  569. }
  570.  
  571. }
  572. },
  573. riderBox: function(){
  574. userSwitch = $$("#user-box-switch");
  575.  
  576. riderSwitch = $$("#rider-box-switch");
  577.  
  578. nextButton = $$("#select-profile-next-button");
  579.  
  580.  
  581. // check the current status
  582.  
  583. if ( riderSwitch.val() == 0 && userSwitch.val() == 0 ){
  584.  
  585. // add the selected class to the user box
  586.  
  587. $$(this).addClass("rider-box-selected");
  588.  
  589. // add 1 value to the hidden input
  590.  
  591. riderSwitch.val(1);
  592.  
  593. // enable active button
  594.  
  595. nextButton.removeClass("g-button-disabled");
  596.  
  597. }else{
  598.  
  599. if ( riderSwitch.val() == 1 && userSwitch.val() == 0 ) {
  600.  
  601. // add the selected class to the user box
  602.  
  603. $$(this).removeClass("rider-box-selected");
  604.  
  605. // add 1 value to the hidden input
  606.  
  607. riderSwitch.val(0);
  608.  
  609. // disable active button
  610.  
  611. nextButton.addClass("g-button-disabled");
  612.  
  613. }
  614.  
  615. }
  616. },
  617. nextButton: function () {
  618. userSwitch = $$("#user-box-switch");
  619.  
  620. riderSwitch = $$("#rider-box-switch");
  621.  
  622. // console.log("USER BOX CLICKED:" + userSwitch.val() + " " + "RIDER BOX CLICKED:" + riderSwitch.val() );
  623.  
  624. errorSheetModal = app.sheet.create({
  625. el: '.select-profile-error',
  626. swipeToClose: true,
  627. backdrop: true,
  628. });
  629.  
  630.  
  631. if ( userSwitch.val() == 0 && riderSwitch.val() == 0 ) {
  632.  
  633. errorSheetModal.open(true);
  634.  
  635. }else{
  636.  
  637. if ( userSwitch.val() == 1 || riderSwitch.val() == 1 ) {
  638.  
  639. errorSheetModal.close(true);
  640.  
  641. // save the value to the local storage.
  642.  
  643. localStorage = window.localStorage;
  644.  
  645. localStorage.setItem('onboarding-completed', 'true');
  646.  
  647. if ( userSwitch.val() == 1 ) {
  648.  
  649. localStorage.setItem('user-type', 'user');
  650.  
  651. // redirect to user sign up
  652.  
  653. view.router.navigate('/user-signup/');
  654.  
  655. }
  656.  
  657. if ( riderSwitch.val() == 1 ) {
  658.  
  659. localStorage.setItem('user-type', 'rider');
  660.  
  661. // redirect to rider sign up
  662.  
  663. view.router.navigate('/rider-signup/');
  664.  
  665. }
  666.  
  667. }
  668. }
  669. }
  670. },
  671. on: {
  672. pageInit: function () {
  673. // do something on page init
  674. var self = this;
  675. const app = self.$f7;
  676.  
  677. var $$ = self.$dom7;
  678. // self.openAlert();
  679.  
  680. /*var swiper = app.swiper.create('.swiper-container', {
  681. speed: 400,
  682. spaceBetween: 0
  683. });
  684.  
  685. self.swiper;*/
  686. },
  687. pageAfterOut: function () {
  688. // page has left the view
  689. },
  690. }
  691. }
  692. </script>
RAW Paste Data Copied