Commit 1b1cbd4b authored by Joel Collins's avatar Joel Collins
Browse files

Started templating gallery

parent 7083c90c

src/components/paneDisplayComponents/galleryComponents/captureCard.vue

0 → 100644
+44 −0
Original line number Diff line number Diff line 
<template>

	<div class="captureCard uk-card uk-card-default uk-padding-small uk-width-medium uk-margin-right">



    <div class="uk-card-header uk-padding-small">

  		<h3>Capture</h3>

    </div>



    <div class="uk-card-body uk-padding-small">

      {{ metadata.id }}

    </div>



    <div class="uk-card-footer uk-padding-small">

      <span class="uk-label uk-margin-small-right">Tag1</span>

      <span class="uk-label uk-margin-small-right">Tag2</span>

    </div>



	</div>

</template>



<script>



// Export main app

export default {

  name: 'captureCard',



  props: {

    temporary: {

      type: Boolean,

      required: true

    },

    metadata: {

      type: Object,

      required: true

    }

  },



  computed: {

    ThumbURL: function () {

      return this.$store.getters.uri + "/camera/capture/" + this.metadata.id + "/download?thumbnail=true"

    }

  }



}

</script>
 
 No newline at end of file

src/components/paneDisplayComponents/galleryDisplay.vue

0 → 100644
+62 −0
Original line number Diff line number Diff line 
<template>

	<div class="galleryDisplay uk-padding">

    

    <div class="uk-grid-medium uk-padding" uk-grid>

        

      <captureCard 

        v-for="capture in captureList" 

        :key="capture.metadata.id"

        :metadata="capture.metadata"

        :temporary="capture.temporary"

      />



    </div>



	</div>

</template>



<script>

import axios from 'axios'

import captureCard from './galleryComponents/captureCard.vue'



// Export main app

export default {

  name: 'galleryDisplay',



  components: {

    captureCard

  },



  data: function () {

    return {

      captureList: []

    }  

  },



  methods: {

    updateCaptureList: function() {

      // Send move request

      axios.get(this.captureApiUri)

      .then(response => { 

        this.$store.dispatch('updateState');  // Update store state for good measure

        console.log(response.data)

        this.captureList = response.data;  // Update boxes from response

      })

      .catch(error => {

        this.$store.dispatch('handleHTTPError', error);  // Let store handle error

      })

    }

  },



  created: function () {

    this.updateCaptureList()

  },



  computed: {

    captureApiUri: function () {

      return this.$store.getters.uri + "/camera/capture"

    }

  }



}

</script>
 
 No newline at end of file

src/components/paneDisplayComponents/streamDisplay.vue

+1 −1
Original line number Diff line number Diff line 
<template>

	<div class="streamDisplay scrollTarget">



		<img v-on:dblclick="clickmonitor" v-if="$store.getters.ready" v-bind:src="streamImgUri" alt="Stream">

		<img class="uk-align-center" v-on:dblclick="clickmonitor" v-if="$store.getters.ready" v-bind:src="streamImgUri" alt="Stream">



		<div v-else-if="$store.state.waiting" class="uk-position-center">

			<div uk-spinner="ratio: 4.5" ></div>

src/components/panelDisplay.vue

+4 −1
Original line number Diff line number Diff line
@@ -6,6 +6,7 @@ 
    </ul>

    <ul class="uk-switcher uk-flex uk-flex-1">

      <li class="uk-height-1-1 uk-width-1-1 "><streamDisplay/></li>

      <li v-if="$store.getters.ready" class="uk-height-1-1 uk-width-1-1 "><galleryDisplay/></li>

    </ul>

  </div>

</template>
@@ -13,13 +14,15 @@ 
<script>

// Import components

import streamDisplay from './paneDisplayComponents/streamDisplay.vue'

import galleryDisplay from './paneDisplayComponents/galleryDisplay.vue'



// Export main app

export default {

  name: 'panelDisplay',



  components: {

    streamDisplay

    streamDisplay,

    galleryDisplay

  },



  computed: {