SHARE
TWEET

Untitled

a guest May 22nd, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div class="container">
  3.     <h1>
  4.       Hood and Fan Assistant
  5.       <span v-if="user_route === 'hood_and_fan'">— Complete System</span>
  6.       <span v-if="user_route === 'fan_only'">— Fan Only</span>
  7.     </h1>
  8.     <div class="builder">
  9.       <div class="image">
  10.         <img :src="getImgUrl(current_step.image)">
  11.       </div>
  12.       <div class="content-outer">
  13.         <Pagination :current_step="current_step" :user_answers="user_answers" :json="json"/>
  14.         <BuilderQuestionsInit v-if="current_step.id == '10'" :current_step="current_step"/>
  15.         <BuilderQuestionsPathChoice v-else-if="current_step.id == '20-A' || current_step.id == '20-B'" :current_step="current_step"/>
  16.         <Results v-else-if="current_step.type == 'results'" :current_step="current_step" :user_answers="user_answers"/>
  17.         <BuilderQuestionsGeneral v-else :current_step="current_step" :user_answers="user_answers"/>
  18.       </div>
  19.     </div>
  20.   </div>
  21. </template>
  22.  
  23. <script>
  24. import { EventBus } from '../main.js';
  25. import BuilderQuestionsInit from './partials/_BuilderQuestionsInit.vue';
  26. import BuilderQuestionsPathChoice from './partials/_BuilderQuestionsPathChoice.vue';
  27. import BuilderQuestionsGeneral from './partials/_BuilderQuestionsGeneral.vue';
  28. import Pagination from './partials/_Pagination.vue';
  29. import Results from './partials/_Results.vue';
  30.  
  31. export default {
  32.   name: 'Builder',
  33.   components: {
  34.     BuilderQuestionsInit,
  35.     BuilderQuestionsPathChoice,
  36.     BuilderQuestionsGeneral,
  37.     Pagination,
  38.     Results
  39.   },
  40.   props: {
  41.     json: Object
  42.   },
  43.   data: () => ({
  44.     current_step: '',
  45.     user_answers: Array(),
  46.     user_route: '',
  47.   }),
  48.   created() {
  49.     this.current_step = this.json['10']; // Set to initial question
  50.  
  51.     EventBus.$on('advanceStepper', function(val) {
  52.       // double check that the value isn't empty
  53.       if(val['selected_val'] != '') {
  54.         // need to check that user data doesn't already exist, and overwrite if it does
  55.         let overwrite = false;
  56.         for( var i = 0, len = this.user_answers.length; i < len; i++ ) {
  57.           if( this.user_answers[i]['question_id'] === this.current_step.id ) {
  58.             // data already exists for this question, need to overwrite
  59.             overwrite = true;
  60.             this.user_answers[i] = val;
  61.             break;
  62.           }
  63.         }
  64.         // no overwrite value present, record initial user data
  65.         if(!overwrite) {
  66.           this.user_answers.push(val);
  67.         }
  68.  
  69.         // time to go to the next slide
  70.         // check for route before scoping into answer routes
  71.         if(this.current_step.route != undefined) {
  72.           // check for conditional routing within route
  73.           if(this.current_step.route.type === 'conditional') {
  74.             if(this.current_step.route.format === 'number') {
  75.               if(val['selected_val'] >= this.current_step.route.value) {
  76.                 // selected value is greater than threshold for default route
  77.                 this.current_step = this.json[this.current_step.route.conditional];
  78.               } else {
  79.                 // selected value is within the default scope
  80.                 this.current_step = this.json[this.current_step.route.default];
  81.               }
  82.             } else if(this.current_step.route.format === 'string') {
  83.               // Checking object for value
  84.               if(Object.values(val['selected_val']).indexOf(this.current_step.route.value) > -1 || Object.values(val['selected_val']).indexOf('Unsure') > -1) {
  85.                 // selected value triggers conditional
  86.                 this.current_step = this.json[this.current_step.route.conditional];
  87.               } else {
  88.                 // selected value is ok
  89.                 this.current_step = this.json[this.current_step.route.default]
  90.               }
  91.             } else if(this.current_step.route.format === 'checkbox') {
  92.               // Checking object for value using Array.some
  93.               let route_value = this.current_step.route.value;
  94.               if(val['selected_val'][route_value] === true) {
  95.                 // selected value is both present & set to true
  96.                 this.current_step = this.json[this.current_step.route.conditional];
  97.               } else {
  98.                 // selected value is ok
  99.                 this.current_step = this.json[this.current_step.route.default]
  100.               }
  101.             }
  102.           } else if(this.current_step.id === '80-B-2' && val['selected_val'][0] === '3 Phase') {
  103.             // special conditional logic for question 80-B-2, need to check question 30-B-2
  104.             if(this.user_answers[2]['selected_val'] >= 3 && this.user_answers[2]['selected_val'] <= 7) {
  105.               // break to special contact page
  106.               this.current_step = this.json['80-B-3'];
  107.             } else {
  108.               // all good
  109.               // advance to next slide using the route defined by the current slide
  110.               this.current_step = this.json[this.current_step.route];
  111.             }
  112.           } else {
  113.             // advance to next slide using the route defined by the current slide
  114.             this.current_step = this.json[this.current_step.route];
  115.           }
  116.         } else {
  117.           let property = val['selected_val'];
  118.           // advance to next slide using the route defined by answer selection
  119.           this.current_step = this.json[this.current_step.answers[property].route];
  120.         }
  121.       }
  122.     }.bind(this));
  123.  
  124.     EventBus.$on('slideChange', function(slide) {
  125.       let selected;
  126.       this.current_step = this.json[slide];
  127.       // loop through answers, fetch previous data and set!
  128.       for( var i = 0, len = this.user_answers.length; i < len; i++ ) {
  129.         if( this.user_answers[i]['question_id'] === slide ) {
  130.           selected = this.user_answers[i]['selected_val'];
  131.         }
  132.       }
  133.       // simulate Promise here, don't let event fire before slideChange has been executed
  134.       setTimeout(() => {
  135.         EventBus.$emit('paginationSetSelected', selected);
  136.       }, 300);
  137.     }.bind(this));
  138.  
  139.     EventBus.$on('reset', function() {
  140.       this.current_step = this.json['10'];
  141.       this.user_answers = [];
  142.       EventBus.$emit('setUserRoute', null);
  143.     }.bind(this));
  144.  
  145.     EventBus.$on('setUserRoute', function(route_name) {
  146.       this.user_route = route_name;
  147.     }.bind(this));
  148.   },
  149.   methods: {
  150.     getImgUrl(image) {
  151.       return require('../assets/images/' + image);
  152.     }
  153.   }
  154. }
  155. </script>
  156.  
  157. <style scoped lang="scss">
  158.   @import '../assets/scss/_variables.scss';
  159.  
  160.   h1 {
  161.     margin-top: 0;
  162.     margin-bottom: 20px;
  163.  
  164.   }
  165.  
  166.   .container {
  167.     max-width: 1200px;
  168.     padding: 0 10px;
  169.     margin: 0 auto;
  170.   }
  171.  
  172.   .builder {
  173.     background-color: $white;
  174.     border-radius: 8px;
  175.     display: flex;
  176.     flex-direction: column;
  177.     //position: relative;
  178.     @include shadow;
  179.  
  180.     @media screen and (min-width: $screen-md) {
  181.       height: 600px;
  182.       flex-direction: row;
  183.     }
  184.   }
  185.  
  186.   .image,
  187.   .content-outer {
  188.     width: 100%;
  189.     flex-grow: 0;
  190.     display: flex;
  191.     flex-direction: column;
  192.  
  193.     @media screen and (min-width: $screen-md) {
  194.       width: 50%;
  195.     }
  196.   }
  197.  
  198.   .content-outer {
  199.     padding: 20px;
  200.     overflow: scroll;
  201.  
  202.     @media screen and (min-width: $screen-md) {
  203.       padding: 40px;
  204.     }
  205.   }
  206.  
  207.   .image {
  208.     background-color: $purple-light-4;
  209.     border-radius: 8px 8px 0 0;
  210.     overflow: hidden;
  211.     display: flex;
  212.     justify-content: flex-end;
  213.     height: 300px;
  214.  
  215.     @media screen and (min-width: 370px) {
  216.       height: 320px;
  217.     }
  218.  
  219.     @media screen and (min-width: 400px) {
  220.       height: 340px;
  221.     }
  222.  
  223.     @media screen and (min-width: 460px) {
  224.       height: 400px;
  225.     }
  226.  
  227.     @media screen and (min-width: 500px) {
  228.       height: 450px;
  229.     }
  230.  
  231.     @media screen and (min-width: 600px) {
  232.       height: 500px;
  233.     }
  234.  
  235.     @media screen and (min-width: 650px) {
  236.       height: 550px;
  237.     }
  238.  
  239.     @media screen and (min-width: 700px) {
  240.       height: 625px;
  241.     }
  242.  
  243.     @media screen and (min-width: $screen-md) {
  244.       border-radius: 8px 0 0 8px;
  245.       height: auto;
  246.     }
  247.  
  248.     img {
  249.       height: auto;
  250.       width: 100%;
  251.  
  252.       @media screen and (min-width: $screen-md) {
  253.         margin-bottom: 0;
  254.       }
  255.  
  256.       @media screen and (min-width: $screen-lg) {
  257.         position: relative;
  258.         top: 75px;
  259.       }
  260.     }
  261.   }
  262. </style>
RAW Paste Data
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
 
Top