A vue component for showing a forge site

forge-site.vue

<template>
  <v-card class="card">
    <div class="imageWrapper" 
    @mouseover="hover = true"
    @mouseleave="hover = false">
    <v-img height="250"
      :src="imageSrc">
    </v-img>
    <v-btn v-if="hover" class="imageButton" @click="updateImageWasPressed"><v-icon>mdi-camera-enhance</v-icon></v-btn>
    </div>
    
    <v-card-title>{{siteInfo.domain}}</v-card-title>
    <v-divider></v-divider>
    <v-card-text>
        <div class="overline mt-4">Deployment Settings</div>
        <v-container>
            <div class="d-flex flex-row">
                <div>
                  Deployment Method
                 </div>
                 <v-spacer></v-spacer>
                 <div>{{siteInfo.deployment_method}}</div>
            </div>
            <div v-if="siteInfo.deployment_method == 'GitHub'">
            <div class="d-flex flex-row">
                <div>
                  Deployment Path
                 </div>
                 <v-spacer></v-spacer>
                 <div>{{siteInfo.github_path}}</div>
            </div>
            <div class="d-flex flex-row">
                <div>
                  Github Branch
                </div>
                <v-spacer></v-spacer>
                <div>{{siteInfo.github_branch}}</div>
            </div>
            </div>
        </v-container>
        <v-divider></v-divider>
        <div class="overline mt-4">Build Settings</div>
        <v-container>
            <div class="d-flex flex-row">
                <div>
                  Build Engine
                 </div>
                 <v-spacer></v-spacer>
                 <div>{{siteInfo.compiler}}</div>
            </div>
        </v-container>
        <v-divider></v-divider>
        <div class="overline mt-4">Options</div>
        <v-container>
            <div class="d-flex flex-row">
                <div>
                  TurboJS Enabled
                 </div>
                 <v-spacer></v-spacer>
                 <v-switch disabled v-model="turbojsenabled"></v-switch>
            </div>
            <div class="d-flex flex-row">
                <div>
                  SSL Enabled
                 </div>
                 <v-spacer></v-spacer>
                 <v-switch disabled v-model="sslenabled"></v-switch>
            </div>
            <div class="d-flex flex-row">
                <div>
                  Forms Enabled
                 </div>
                 <v-spacer></v-spacer>
                 <v-switch disabled v-model="formsenabled"></v-switch>
            </div>
            <div v-if="formsenabled" class="d-flex flex-row">
                <div>
                  Forms Count
                 </div>
                 <v-spacer></v-spacer>
                 <v-chip><v-icon></v-icon>{{siteInfo.forms_count}}</v-chip>
            </div>
        </v-container>
        <v-divider></v-divider>
        <div class="overline mt-4">Usage</div>
        <v-container>
            <div class="d-flex flex-row">
                <div>
                  Daily Bandwidth Usage
                 </div>
                 <v-spacer></v-spacer>
                 <div>{{siteInfo.bandwidth_usage_day}}</div>
            </div>
            <div class="d-flex flex-row">
                <div>
                  Week Bandwidth Usage
                 </div>
                 <v-spacer></v-spacer>
                 <div>{{siteInfo.bandwidth_usage_week}}</div>
            </div>
        </v-container>
        <v-divider></v-divider>
        <div class="overline mt-4">Actions</div>
        <v-container>
            <v-btn @click="deploySite">Deploy Site</v-btn>
        </v-container>
    </v-card-text>
  </v-card>
</template>

<script>
    module.exports = {
        name: 'ForgeSite',
        props: {
            ENV: {
                type: Object,
                hidden: true
            },
            site: {
                type: String,
                default: "app.vulcanapp.com"
            },
            baseObject: {
                type: Object,
                hidden: true
            }
            
        },
        data: function () {
          return {
              siteInfo: {},
              sslenabled: false,
              turbojsenabled: false,
              formsenabled: false,
              hover: false
          }
        },
        methods: {
            getForgeSiteInfo() {
                
                let baseUrl = "https://getforge.com/api/v2/";
                let infoEndpoint = "settings/site_info"
                let token = this.ENV[`FORGE_${this.site}`];
                this.$http.get(baseUrl + infoEndpoint + `?site_token=${token}`)
                .then(function(result){
                    // console.log(result.body.message);
                    this.siteInfo = result.body.message;
                    this.sslenabled  = this.siteInfo.ssl_enabled;
                    this.turbojsenabled = this.siteInfo.turbojs_enabled;
                    this.formsenabled = this.siteInfo.forms_enabled;
                }, function(error){
                    console.log(error.description);
                });
            },
            deploySite() {
              let baseUrl = "https://getforge.com/";
              let deployEndpoint = "webhook"
              let token = this.ENV['FORGE_ACCOUNT_KEY'];
              let requestUrl = baseUrl + deployEndpoint + `?type=redeploy&url=${this.site}&token=${token}`;
              console.log(requestUrl);
              this.$http.post(requestUrl)
              .then(function(result){
                  console.log(result.body);
              }, function(error){
                  console.log(error.description);
              })
            },
            updateImageWasPressed() {
              let image = this.imageSrc;
              let object = this.baseObject;
              this.updateObjectImage(object, image, image);
            },
            updateObjectImage(object, url, thumb_url) {
              console.log("updating image");
              console.log(object);
            object.info.image = {
              body: {
               url,
               thumb: {
                 url: url
               }
              }
            }
            object.info.settings.image = {
              body: {
               url,
               thumb: {
               url: url
             }
            }
          }
        },
        

        },
        mounted: function() {
          this.getForgeSiteInfo();  
        },
        computed: {
            imageSrc() {
                return `https://api.urlbox.io/v1/${this.ENV["URLBOX_APIKEY"]}/png?thumb_width=600&ttl=86400&url=` + encodeURIComponent(this.site);
            }
        }
    }
</script>

<style scoped>
    /* styles here */
    .card {
        max-width: 100%;
    }
    
    .imageWrapper {
        position: relative;
    }
    
    .imageButton {
        position: absolute;
        bottom: 10px;
        left: 10px;
    }
</style>