Add CollectionComponent.vue

resources/assets/js/components/CollectionComponent.vue

@@ -0,0 +1,69 @@
+<template>
+<div>
+	<div class="row">
+		<div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(s, index) in posts">
+			<a class="card info-overlay card-md-border-0" :href="s.url">
+				<div class="square">
+					<span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
+					<span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
+					<span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
+					<div class="square-content" v-bind:style="previewBackground(s)">
+					</div>
+					<div class="info-overlay-text">
+						<h5 class="text-white m-auto font-weight-bold">
+							<span>
+								<span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
+								<span class="d-flex-inline">{{s.favourites_count}}</span>
+							</span>
+							<span>
+								<span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
+								<span class="d-flex-inline">{{s.reblogs_count}}</span>
+							</span>
+						</h5>
+					</div>
+				</div>
+			</a>
+		</div>
+	</div>
+</div>
+</template>
+
+<style type="text/css" scoped></style>
+
+<script type="text/javascript">
+export default {
+	props: ['collection-id'],
+
+	data() {
+		return {
+			loaded: false,
+			posts: [],
+		}
+	},
+
+	beforeMount() {
+		this.fetchItems();
+	},
+
+	mounted() {
+	},
+
+	methods: {
+		fetchItems() {
+			axios.get('/api/local/collection/items/' + this.collectionId)
+			.then(res => {
+				this.posts = res.data;
+			});
+		},
+		
+		previewUrl(status) {
+			return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
+		},
+
+		previewBackground(status) {
+			let preview = this.previewUrl(status);
+			return 'background-image: url(' + preview + ');';
+		},
+	}
+}
+</script>