Update StoryCompose.vue

resources/assets/js/components/StoryCompose.vue

@@ -1,42 +1,268 @@
 <template>
-<div>
-	<div class="container">
-		<p class="display-4 text-center py-5">Share Your Story</p>
+<div class="container mt-2 mt-md-5">
+	<input type="file" id="pf-dz" name="media" class="w-100 h-100 d-none file-input" draggable="true" v-bind:accept="config.mimes">
+	<div class="row">
+		<div class="col-12 col-md-6 offset-md-3">
 
-		<div class="d-flex justify-content-center align-item-center">
-			<div class="bg-dark" style="width:400px;height:600px">
-				<p class="text-center text-light font-weight-bold">Add Photo</p>
+			<!-- LANDING -->
+			<div v-if="page == 'landing'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
+				<div class="text-center flex-fill mt-5 pt-5">
+					<img src="/img/pixelfed-icon-grey.svg" width="60px" height="60px">
+					<p class="font-weight-bold lead text-lighter mt-1">Stories</p>
+				</div>
+				<div class="flex-fill">
+					<div class="card w-100 shadow-none">
+						<div class="list-group">
+							<a class="list-group-item text-center lead text-decoration-none text-dark" href="#" @click.prevent="upload()">Add Photo</a>
+							<a v-if="stories.length" class="list-group-item text-center lead text-decoration-none text-dark" href="#" @click.prevent="edit()">Edit Story</a>
+						</div>
+					</div>
+				</div>
+				<div class="text-center flex-fill">
+					<p class="text-lighter small text-uppercase">
+						<a href="/" class="text-muted font-weight-bold">Home</a>
+						<span class="px-2 text-lighter">|</span>
+						<a href="/i/my/story" class="text-muted font-weight-bold">View My Story</a>
+						<span class="px-2 text-lighter">|</span>
+						<a href="/site/help" class="text-muted font-weight-bold">Help</a>
+					</p>
+				</div>
+			</div>
+
+			<!-- CROP -->
+			<div v-if="page == 'crop'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 95vh;">
+				<div class="text-center pt-5 mb-3 d-flex justify-content-between align-items-center">
+					<div>
+						<button class="btn btn-outline-lighter btn-sm py-0 px-md-3"><i class="pr-2 fas fa-chevron-left fa-sm"></i> Delete</button>
+					</div>
+					<div class="d-flex align-items-center">
+						<img class="d-inline-block mr-2" src="/img/pixelfed-icon-grey.svg" width="30px" height="30px">
+						<span class="font-weight-bold lead text-lighter">Stories</span>
+					</div>
+					<div>
+						<button class="btn btn-outline-success btn-sm py-0 px-md-3">Crop <i class="pl-2 fas fa-chevron-right fa-sm"></i></button>
+					</div>
+				</div>
+				<div class="flex-fill">
+					<div class="card w-100 mt-3">
+						<div class="card-body p-0">
+							<vue-cropper
+								ref="cropper"
+								:relativeZoom="cropper.zoom"
+								:aspectRatio="cropper.aspectRatio"
+								:viewMode="cropper.viewMode"
+								:zoomable="cropper.zoomable"
+								:rotatable="true"
+								:src="mediaUrl"
+							>
+							</vue-cropper>
+						</div>
+					</div>
+				</div>
+				<div class="text-center flex-fill">
+					<p class="text-lighter small text-uppercase pt-2">
+						<!-- <a href="#" class="text-muted font-weight-bold">Home</a>
+						<span class="px-2 text-lighter">|</span>
+						<a href="#" class="text-muted font-weight-bold">View My Story</a>
+						<span class="px-2 text-lighter">|</span> -->
+						<a href="/site/help" class="text-muted font-weight-bold mb-0">Help</a>
+					</p>
+				</div>
+			</div>
+
+			<!-- ERROR -->
+			<div v-if="page == 'error'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;">
+				<p class="h3 mb-0">Oops!</p>
+				<p class="text-muted lead">An error occurred, please try again later.</p>
+				<p class="text-muted mb-0">
+					<a class="btn btn-outline-secondary py-0 px-5 font-weight-bold" href="/">Go back</a>
+				</p>
+			</div>
+
+			<div v-if="page == 'edit'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
+				<div class="text-center flex-fill mt-5 pt-5">
+					<img src="/img/pixelfed-icon-grey.svg" width="60px" height="60px">
+					<p class="font-weight-bold lead text-lighter mt-1">Stories</p>
+				</div>
+				<div class="flex-fill py-5">
+					<div class="card w-100 shadow-none" style="max-height: 500px; overflow-y: auto">
+						<div class="list-group">
+							<div v-for="(story, index) in stories" class="list-group-item text-center text-dark" href="#">
+								<div class="media align-items-center">
+									<img :src="story.src" class="img-fluid mr-3 cursor-pointer" width="70px" height="70px" @click="showLightbox(story)">
+									<div class="media-body">
+										<p class="mb-0">Expires</p>
+										<p class="mb-0 text-muted small"><span>{{expiresTimestamp(story.expires_at)}}</span></p>
+									</div>
+									<div class="float-right">
+										<button @click="deleteStory(story, index)" class="btn btn-danger btn-sm font-weight-bold text-uppercase">Delete</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="flex-fill text-center">
+					<a class="btn btn-outline-secondary py-0 px-5 font-weight-bold" href="/i/stories/new">Go back</a>
+				</div>
 			</div>
 		</div>
 	</div>
+	<b-modal
+		id="lightbox"
+		ref="lightboxModal"
+		hide-header
+		hide-footer
+		centered
+		size="lg"
+		body-class="p-0"
+		>
+		<div v-if="lightboxMedia" class="w-100 h-100">
+			<img :src="lightboxMedia.url" style="max-height: 100%; max-width: 100%">
+		</div>
+	</b-modal>
 </div>
 </template>
 
 <style type="text/css" scoped>
-	.navtab .nav-link {
-		color: #657786;
-	}
 
-	.navtab .nav-link.active {
-		color: #08d;
-		border-bottom: 4px solid #08d;
-	}
 </style>
 
 <script type="text/javascript">
+	import VueTimeago from 'vue-timeago';
+	import VueCropper from 'vue-cropperjs';
+	import 'cropperjs/dist/cropper.css';
 	export default {
+		components: { 
+			VueCropper,
+			VueTimeago
+		},
+
+		props: ['profile-id'],
 		data() {
 			return {
-				currentTab: 'upload',
+				config: window.App.config,
+				mimes: [
+					'image/jpeg',
+					'image/png'
+				],
+				page: 'landing',
+				pages: [
+					'landing',
+					'crop',
+					'edit',
+					'confirm',
+					'error'
+				],
+				uploading: false,
+				uploadProgress: 100,
+				cropper: {
+					aspectRatio: 9/16,
+					viewMode: 1,
+					zoomable: true,
+					zoom: null
+				},
+				mediaUrl: null,
+				stories: [],
+				lightboxMedia: false,
 			};
 		},
 
 		mounted() {
-			this.welcomeMessage();
+			this.mediaWatcher();
+			axios.get('/api/stories/v1/fetch/' + this.profileId)
+			.then(res => this.stories = res.data);
 		},
 
 		methods: {
-			welcomeMessage() {
+
+			upload() {
+				let fi = $('.file-input[name="media"]');
+				fi.trigger('click');
+			},
+
+			mediaWatcher() {
+				let self = this;
+				$(document).on('change', '#pf-dz', function(e) {
+					self.triggerUpload();
+				});
+			},
+
+			triggerUpload() {
+				let self = this;
+				self.uploading = true;
+				let io = document.querySelector('#pf-dz');
+				Array.prototype.forEach.call(io.files, function(io, i) {
+					if(self.media && self.media.length + i >= self.config.uploader.album_limit) {
+						swal('Error', 'You can only upload ' + self.config.uploader.album_limit + ' photos per album', 'error');
+						self.uploading = false;
+						self.page = 2;
+						return;
+					}
+					let type = io.type;
+					let validated = $.inArray(type, self.mimes);
+					if(validated == -1) {
+						swal('Invalid File Type', 'The file you are trying to add is not a valid mime type. Please upload a '+self.mimes+' only.', 'error');
+						self.uploading = false;
+						self.page = 'error';
+						return;
+					}
+
+					let form = new FormData();
+					form.append('file', io);
+
+					let xhrConfig = {
+						onUploadProgress: function(e) {
+							let progress = Math.round( (e.loaded * 100) / e.total );
+							self.uploadProgress = progress;
+						}
+					};
+
+					axios.post('/api/stories/v1/add', form, xhrConfig)
+					.then(function(e) {
+						self.uploadProgress = 100;
+						self.uploading = false;
+						window.location.href = '/i/my/story';
+						self.mediaUrl = e.data.media_url;
+					}).catch(function(e) {
+						self.uploading = false;
+						io.value = null;
+						swal('Oops!', e.response.data.message, 'warning');
+					});
+					io.value = null;
+					self.uploadProgress = 0;
+				});
+			},
+
+			expiresTimestamp(ts) {
+				ts = new Date(ts * 1000);
+				return ts.toDateString() + ' ' + ts.toLocaleTimeString();
+			},
+
+			edit() {
+				this.page = 'edit';
+			},
+
+			showLightbox(story) {
+				this.lightboxMedia = {
+					url: story.src
+				}
+				this.$refs.lightboxModal.show();
+			},
+
+			deleteStory(story, index) {
+				if(window.confirm('Are you sure you want to delete this Story?') != true) {
+					return;
+				}
+
+				axios.delete('/api/stories/v1/delete/' + story.id)
+				.then(res => {
+					this.stories.splice(index, 1);
+					if(this.stories.length == 0) {
+						window.location.href = '/i/stories/new';
+					}
+				});
+
 			}
 		}
 	}