API tools faq
paste
Guest User

Untitled

a guest
May 26th, 2020
259
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.93 KB | None | 0 0
raw download clone embed print report
  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>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!