Add transaction page transitioning

app/Http/Controllers/TransactionController.php

@@ -12,13 +12,22 @@ class TransactionController extends Controller
 {
 	//THis should also reduce user's available credits
 	public function newOrder(Request $request) {
+		$user = Auth::user();
 		$order = new Order;
+
 		$order->service_id = $request->service;
 		$order->user_id = Auth::user()->id;
 		$order->quantity = $request->quantity;
 		$order->url = $request->url;
 		$order->note = $request->note ?: '';
 		$order->status = 'processing';
+
+		$cost = ceil($order->quantity*$order->service->price/1000);
+		$user->credits = $user->credits - $cost;
+		if ($cost > $user->credits) {
+			abort(520, 'Insufficient Credits');
+		}
+		$user->save();
 		$order->save();
 	}
 }

database/migrations/2014_10_12_000000_create_users_table.php

@@ -21,7 +21,7 @@ class CreateUsersTable extends Migration
             $table->string('password');
             $table->string('role');
             $table->boolean('active')->default(true);
-            $table->bigInteger('credits')->default(0);
+            $table->unsignedBigInteger('credits')->default(0);
             $table->rememberToken();
             $table->timestamps();
         });

resources/js/panel/credits.vue

@@ -0,0 +1,3 @@
+<template>
+hello
+</template>

resources/js/panel/orders.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<section class="pending-pane">
-	<div class="actions"><a class="new-order" href="#orders/new-order">New</a><a class="new-order" href="#orders/new">Add credits</a></div>
+	<div class="actions"><a class="new-order" href="#new-order">New</a><a class="new-order" href="#credits">Add credits</a></div>
 	<h4>Pending Orders</h4>
 	<ul>
 		<template v-bind:key='order.id' v-for="order in orders">

resources/js/panel/panel.vue

@@ -28,8 +28,8 @@
 </div>
 <PastOrders :orders="orders" v-else-if="active === '#orders'" id="main">
 </PastOrders>
-<NewOrder :token="token" :credits="user.credits" v-else-if="active ===
-'#new-order'" id="main" @updateUser='getUser'>
+<NewOrder :token="token" :active="active" :credits="user.credits" v-else-if="active ===
+'#new-order' || active === '#credits'" id="main" @update-user='getUser' @update-orders='getOrders'>
 </NewOrder>
 <div id="main" v-else-if="active === '#exit'">
 	<section class="logout-pane">
@@ -48,9 +48,6 @@ import Settings from './settings.vue'
 import PastOrders from './orders.vue'
 import NewOrder from './services.vue'
 
-/* function getServices() { */
-	
-/* } */
 function getServices() {
 	return fetch("/panel/services", {
 		method: 'GET',

resources/js/panel/services.vue

@@ -1,28 +1,44 @@
 <template>
 <div>
 	<div class="services-menu">
-	<button class="selected">Services</button>
-	<button>Credits</button>
-	<div class="menu-slider"><div></div></div>
+	<a href="#new-order" :class="{selected: page == 'new-order'}">Services</a>
+	<a href="#credits" :class="{selected: page == 'credits'}">Credits</a>
+	<div :class="page" class="menu-slider"><div></div></div>
 	</div>
-	<h4 class="credits-display">Credits: {{credits}}</h4>
-	<div class="services-legend"><h5>Name</h5>
-<h5>Credits per 1000</h5><h5>Min Qt.</h5><h5>Max Qt.</h5></div>
-<ServicePane :site="'youtube'" :services="services" @select="select"></ServicePane>
-<ServicePane :site="'instagram'" :services="services" @select="select"></ServicePane>
-<ServicePane :site="'twitter'" :services="services" @select="select"></ServicePane>
-<ServicePane :site="'tiktok'" :services="services" @select="select"></ServicePane>
-<div id="overlay" v-if="selected">
+	<h4 class="credits-display">Credits: {{credits.toLocaleString('en')}}</h4>
+
+	<template v-if="page == 'new-order'">
+
+	<div class="services-legend">
+	<h5>Name</h5><h5>Credits per 1000</h5><h5>Min Qt.</h5><h5>Max Qt.</h5>
+	</div>
+
+	<ServicePane :site="'youtube'" :services="services"
+	@select="select"></ServicePane> <ServicePane :site="'instagram'"
+	:services="services" @select="select"></ServicePane> <ServicePane
+	:site="'twitter'" :services="services" @select="select"></ServicePane>
+	<ServicePane :site="'tiktok'" :services="services"
+	@select="select"></ServicePane>
+
+	<div id="overlay" v-if="selected">
+
 	<div v-if="!completed" class="overlay-item">
-	<img @click="completed = false; selected = null" class="cancel icon" src="../../images/cancel-icon2.svg" alt=""/>
-		<img v-if="selected.site == 'youtube'" class="icon" src="../../images/youtube-icon.svg" alt="">
-		<img v-if="selected.site == 'instagram'" class="icon" src="../../images/instagram-icon.svg" alt="">
-		<img v-if="selected.site == 'twitter'" class="icon" src="../../images/twitter.svg" alt="">
-		<img v-if="selected.site == 'tiktok'" class="icon" src="../../images/tik-tok.svg" alt="">
+	<img @click="completed = false; selected = null" class="cancel icon"
+	src="../../images/cancel-icon2.svg" alt=""/>
+		<img v-if="selected.site == 'youtube'" class="icon"
+		src="../../images/youtube-icon.svg" alt=""/>
+		<img v-if="selected.site == 'instagram'" class="icon"
+		src="../../images/instagram-icon.svg" alt=""/>
+		<img v-if="selected.site == 'twitter'" class="icon"
+		src="../../images/twitter.svg" alt=""/>
+		<img v-if="selected.site == 'tiktok'" class="icon"
+		src="../../images/tik-tok.svg" alt=""/>
 		<h3>{{selected.name}}</h3>
 		<h4>Cost: {{cost.toLocaleString('en')}}</h4>
 		<h4>Quantity</h4>
-		<div><input required :min="selected.minimum" :max="selected.maximum" type="number" v-model="amount" id="selQty"><span> / {{selected.maximum.toLocaleString('en')}}</span></div> 
+		<div><input required :min="selected.minimum" :max="selected.maximum"
+		type="number" v-model="amount" id="selQty"><span> /
+		{{selected.maximum.toLocaleString('en')}}</span></div> 
 		<template v-if="selected.modifier == 'location'">
 		<h4>Location</h4>
 		<div><select required id="country" name="">
@@ -31,24 +47,36 @@
 		<option value="uk">United Kingdom</option>
 		<option value="germany">Germany</option>
 		<option value="france">France</option>
-		</select></div> 
+		</select>
+		</div> 
 		</template>
 		<h4>URL</h4>
 		<div><input required type="url" id="url" v-model="url"></div> 
-		<button @click="buyService" :disabled="paying">Submit<loading v-if="paying"></loading></button>
+		<button @click="buyService" :disabled="paying">Submit<loading
+		v-if="paying"></loading></button>
 		<p id="overlay-error"></p>
+
 	</div>
+
 	<div class="overlay-item" v-else-if="completed">
-	<img @click="completed = false; selected = null" class="cancel icon" src="../../images/cancel-icon2.svg" alt=""/>
-	<img class="icon" src="../../images/checked2.svg" alt="">
+	<img @click="completed = false; selected = null" class="cancel icon"
+	src="../../images/cancel-icon2.svg" alt=""/>
+	<img class="icon" src="../../images/checked2.svg" alt=""/>
 	<h3>Success!</h3>
 	</div>
-</div>
+
+	</div>
+
+	</template>
+
+	<credits v-if="page == 'credits'"></credits>
+
 </div>
 </template>
 
 <script>
 import ServicePane from './service-pane.vue'
+import Credits from './credits.vue'
 import Loading from '../icons/loading.vue'
 
 function select(service) {
@@ -64,7 +92,12 @@ function buyService() {
 	if (!this.url) {
 		document.getElementById('overlay-error').textContent = "You must provide a URL."	
 		return
+	} else if (Math.ceil(this.cost > this.credits)) {
+		document.getElementById('overlay-error').textContent =
+		'Insuficient Credits'
+		return
 	}
+
 	this.paying = true
 	let note = ''
 	let country = document.getElementById('country')
@@ -85,23 +118,38 @@ function buyService() {
 					document.getElementById('overlay-error').textContent = `Success!`
 					this.completed = true
 					this.$emit('updateUser')
+					this.$emit('updateOrders')
+				} else if (response.status == 520) {
+					document.getElementById('overlay-error').textContent =
+					'Insuficient Credits'
 				} else {
 					document.getElementById('overlay-error').textContent = `Error
 					${response.status}: ${response.statusText}`
 				}
+
 				this.paying = false
 			}
 		)
 
 }
 
+function page() {
+	switch (this.active) {
+		case '#new-order':
+			return 'new-order'
+		case '#credits':
+			return 'credits'
+	}
+	console.log(this.active)
+}
+
 export default {
 	data() {
 		return {servicePane: true, services: null, selected: null, amount: 0,
 		paying: false, url: '', completed: false}
 	},
-	components: {ServicePane, Loading},
-	props: ['token', 'credits'],
+	components: {ServicePane, Loading, Credits},
+	props: ['token', 'credits', 'active'],
 	created() {
 		fetch("/panel/services", {
 			method: 'GET',
@@ -113,7 +161,7 @@ export default {
 		})
 	},
 	methods: {select, buyService},
-	computed: {cost},
-	emits: ['updateUser']
+	computed: {cost, page},
+	emits: ['updateUser', 'updateOrders']
 }
 </script>

resources/js/panel/sidebar.vue

@@ -8,7 +8,7 @@
 <a :class="{selected: active == '#orders'}" href="/panel#orders">
 <svg fill="currentColor" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m16.12 1.929-10.891 5.576-4.329-2.13 10.699-5.283c.24-.122.528-.122.78 0z"/><path d="m23.088 5.375-11.082 5.49-4.15-2.045-.6-.305 10.903-5.575.6.304z"/><path d="m11.118 12.447-.012 11.553-10.614-5.539c-.3-.158-.492-.475-.492-.816v-10.688l4.498 2.216v3.896c0 .499.408.913.9.913s.9-.414.9-.913v-2.995l.6.292z"/><path d="m23.988 6.969-11.07 5.466-.012 11.553 11.094-5.793z"/></svg>
 </a>
-<a :class="{selected: active == '#new-order'}" href="/panel#new-order">
+<a :class="{selected: active == '#new-order' || active == '#credits'}" href="/panel#new-order">
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10c5.514,0,10-4.486,10-10S17.514,2,12,2z M17,13h-4v4h-2v-4H7v-2h4V7h2v4h4V13z"></path></svg>
 </a>
 <a :class="{selected: active == '#settings'}" href="/panel#settings">

resources/scss/main.scss

@@ -1003,12 +1003,13 @@ main.panel {
 	margin-top: 1em;
 	flex-flow: wrap;
 	gap: 10px;
-	button {
+	a {
 		width: 25%;
 		font-size: 1.1rem;
 		background: none;
 		border: none;
 		color: grey;
+		text-align: center;
 	}
 	.selected {
 		color: black;
@@ -1018,12 +1019,18 @@ main.panel {
 .menu-slider {
 	width: 55%;
 	div {
-		// margin-left: auto;
+		transition: all 0.2s;
 		width: 50%;
 		border-bottom: 2px solid black;
+		flex: 2;
 	}
 }
 
+.menu-slider.credits div {
+	// margin-left: auto;
+	transform: translateX(100%);
+}
+
 .services-pane {
 	li {
 		display: flex;