spy30/resources/assets/js/components/Scorecard.vue

<template>
  <div class="panel panel-default scorecard" v-if="show">
    <div class="panel-heading">
      <div class="team">
          <span class="team-icon" :style="'background-color: #'+tweet.team_color"></span> 
          <span class="team-name">{{ tweet.team_name }}</span>
      </div>
      <h2>{{ tweet.mission }}</h2>
      <button type="button" class="close" v-on:click="dismiss"><span>&times;</span></button>      
    </div>

    <div class="panel-body">

      <div class="row">
        <div class="col-md-8">

          <div class="profile">
              <img :src="tweet.player_photo" :style="'border-color: #'+tweet.team_color"> 
              <span><a :href="'https://twitter.com/'+tweet.player_username">@{{ tweet.player_username }}</a></span>
          </div>

          <div class="tweet">
            <div class="text">{{ tweet.text }}</div>
            <div v-if="tweet.photos">
              <div :class="'multi-photo photos-'+tweet.photos.length" v-if="tweet.photos">
                <div v-for="img in tweet.photos" class="photo" :style="'background-image:url('+img+')'" :data-featherlight="img">
                  <img :src="img">
                </div>
              </div>
              <div class="multi-photo-clear"></div>
            </div>
          </div>

          <div class="tweet-reply">
            <textarea class="form-control" rows="2" v-model="replyText" style="margin-bottom: 4px;"></textarea>
            <button type="submit" class="btn btn-primary" :disabled="isTweetReplyDisabled">Reply</button>
            <div class="clear"></div>
          </div>

          <div class="tweet-actions">
            <button type="button" class="btn btn-success" :disabled="isAcceptDisabled">Accept</button>
            <button type="button" class="btn btn-danger">Reject</button>
          </div>

        </div>
        <div class="col-md-4">

          <!-- MISSION 1 -->
          <template v-if="tweet.mission_id == 1">
            <p class="instructions">
              The photo must show the sign with the transit line
            </p>

            <div class="form-group">
              <select class="form-control" v-model="selectedTransitLine">
                <option value=""></option>
                <option v-for="line in lines" :value="line.id">{{ line.name }}</option>
              </select>
            </div>

            <div class="form-group">
              <input type="text" v-model="selectedNonTrimetLine" placeholder="Non-Trimet Line" class="form-control">
            </div>
          </template>

          <!-- MISSION 2 -->
          <template v-if="tweet.mission_id == 2">
            <p class="instructions">
              <ul>
                <li>Photo must show the sign with the transit center</li>
                <li>Bonus points if another team and their pennant are visible!</li>
              </ul>
            </p>

            <div class="form-group">
              <select class="form-control" v-model="selectedTransitCenter">
                <option value=""></option>
                <option v-for="stop in centers" :value="stop.id">{{ stop.name }}</option>
              </select>
            </div>

            <div class="form-group">
              <div class="checkbox">
                <label>
                  <input type="checkbox" v-model="selectedPhotoHasAnotherTeam">
                  Another team is in the photo
                </label>
              </div>
            </div>
          </template>

          <!-- MISSION 3 -->
          <template v-if="tweet.mission_id == 3">
            <p class="instructions">
              <ul>
                <li>Make sure this photo is on the tram or at the top tram station</li>
                <li>Reject if it shows the rooftop with the code!</li>
              </ul>
            </p>
          </template>

          <!-- MISSION 4 -->
          <template v-if="tweet.mission_id == 4">
            <p class="instructions">
              <ul>
                <li>The photo must include the radio</li>
                <li>Reject if it shows the decoded message</li>
              </ul>
            </p>
           </template>

          <!-- MISSION 5 -->
          <template v-if="tweet.mission_id == 5">
            <p class="instructions">
              Accept a photo of either a team member singing, or a photo of tipping the bus driver
            </p>

            <div class="form-group">
              <label>
                <input type="checkbox" v-model="selectedM5Singing">
                Singing
              </label>
              <label>
                <input type="checkbox" v-model="selectedM5Tipping">
                Tipping the driver
              </label>
            </div>
           </template>

          <!-- MISSION 6 -->
          <template v-if="tweet.mission_id == 6">
            <p class="instructions">
              The photo must show all team members with their completed visas
            </p>
          </template>

          <!-- MISSION 7 -->
          <template v-if="tweet.mission_id == 7">
            <p class="instructions">
              Accept a photo that completes one of the below documents:
            </p>

            <div class="form-group">
              <div v-for="doc in documents" class="radio">
                <label>
                  <input type="radio" name="selectedDocument" v-model="selectedDocument" :value="doc.id">
                  {{ doc.description }}
                </label>
              </div>
            </div>
          </template>




        </div>
      </div>

    </div>
  </div>
</template>
<script>
module.exports = {
  props: ['show', 'tweet'],
  data () {
    return {
      documents: [],
      centers: [],
      lines: [],
      replyText: '',
      selectedDocument: false,
      selectedTransitCenter: false,
      selectedTransitLine: false,
      selectedNonTrimetLine: '',
      selectedPhotoHasAnotherTeam: false,
      selectedM5Singing: false,
      selectedM5Tipping: false
    }
  },
  computed: {
    isAcceptDisabled() {
      if(this.show) {
        switch(this.tweet.mission_id) {
          case 1:
            return this.selectedTransitLine == false && this.selectedNonTrimetLine == '';
          case 2:
            return this.selectedTransitCenter == false;
          case 3:
          case 4:
          case 6:
            // Nothing to check
            return false;
          case 5:
            return this.selectedM5Singing == false && this.selectedM5Tipping == false;
          case 7:
            return this.selectedDocument == false;
          default:
            return true;
        }
      } else {
        return true;
      }
    },
    isTweetReplyDisabled() {
      return this.replyText == '';
    }
  },
  methods: {
    dismiss() {
      this.$emit('dismiss');
      this.selectedDocument = false;
      this.selectedTransitCenter = false;
      this.selectedTransitLine = false;
      this.selectedNonTrimetLine = '';
      this.selectedPhotoHasAnotherTeam = false;
      this.replyText = '';
    }
  },
  watch: {
    // https://vuejs.org/v2/guide/computed.html#Watchers
    show: function(val) {
      if(val) {
        // https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue
        Vue.nextTick(function() {
          $(".multi-photo .photo").featherlight();
        }.bind(this));
      }
    }
  },
  created() {
    $.get("/dashboard/dropdowns", function(response){
      this.centers = response.transit_centers;
      this.lines = response.transit_lines;
      this.documents = response.documents;
    }.bind(this));
  }
}
</script>