Make order information viewable

resources/js/icons/eye-fill.vue

@@ -0,0 +1,8 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
+  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
+  <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0
+  1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
+</svg>
+</template>

resources/js/panel/order-item.vue

@@ -0,0 +1,55 @@
+<template>
+<div id="overlay" v-if="selected">
+
+	<img @click="$emit('close')" class="cancel icon"
+	src="../../images/cancel-icon2.svg" alt=""/>
+	<div class="overlay-item">
+		<img v-if="selected.service.site == 'youtube'" class="icon"
+		src="../../images/youtube-icon.svg" alt=""/>
+		<img v-if="selected.service.site == 'instagram'" class="icon"
+		src="../../images/instagram-icon.svg" alt=""/>
+		<img v-if="selected.service.site == 'twitter'" class="icon"
+		src="../../images/twitter.svg" alt=""/>
+		<img v-if="selected.service.site == 'tiktok'" class="icon"
+		src="../../images/tik-tok.svg" alt=""/>
+		<h3>{{selected.service.name}}</h3>
+
+	<div class="details">
+		<ul>
+			<li><b>Status:</b> <span>{{selected.status}}</span></li>
+			<li><b>Quantity:</b> <span>{{selected.quantity}}</span></li>
+			<li><b>Remaining:</b> <span>{{selected.remaining}}</span></li>
+			<li><b>URL:</b> <span>{{selected.url}}</span></li>
+		</ul>
+	</div>
+
+	<div v-if="selected.status == 'processing' || selected.status ==
+	'error'" class="change-url">
+		<h4>URL</h4>
+		<div><input :value="selected.url" type="url" id="url"></div> 
+		<button @click="saveUrl" :disabled="loading">Save
+		<loading-icon v-if="loading"></loading-icon></button>
+		<p id="overlay-error">{{errorMessage}}</p>
+	</div>
+
+	</div>
+
+	</div>
+</template>
+
+<script>
+import LoadingIcon from '../icons/loading.vue'
+
+function saveURL() {
+
+}
+
+export default {
+	data() {
+		return {loading: false, errorMessage: ''}
+	},
+	components: {LoadingIcon},
+	methods: {saveURL},
+	props: ['selected', 'token'],
+}
+</script>

resources/js/panel/orders.vue

@@ -31,12 +31,12 @@
 		orders.slice(historyPage*10-10, historyPage*10)'>
 		<td>{{order.updated_at}}</td>
 		<td>{{order.id}}</td>
-		<td>{{order.service.name.length > 20 ? order.service.name.substring(0,
-		19) + '...' : order.service.name}}</td>
+		<td>{{order.service.name}}</td>
 		<td :class="order.status"
 		class="status"><span>{{order.status.charAt(0).toUpperCase() +
 		order.status.slice(1)}}</span></td>
 		<td>{{order.quantity}}</td>
+		<td> <eye @click="select(order)"></eye> </td>
 		</tr>
 		</tbody>
 	</table>
@@ -46,10 +46,16 @@
 	<img @click="moveHistory(true)" class="nav-btn right"
 	src="../../images/arrow-right-circle-fill.svg" alt=""/>
 	</section>
+
+	<order-item @close="close" :selected="selected" :token="token"></order-item>
+
 </div>
 </template>
 
 <script>
+import Eye from '../icons/eye-fill.vue'
+import OrderItem from './order-item.vue'
+
 function togglePending(event) {
 	event.target.parentNode.parentNode.classList.toggle('selected')
 }
@@ -69,11 +75,20 @@ function moveHistory(forward) {
 	}
 }
 
+function close() {
+	this.selected = null
+}
+
+function select(order) {
+	this.selected = order
+}
+
 export default {
-	data() {return {historyPage: 1}},
+	components: {Eye, OrderItem},
+	data() {return {historyPage: 1, selected: null}},
 	methods: {
-	togglePending, moveHistory
+	togglePending, moveHistory, close, select
 	},
-	props: ['orders']
+	props: ['orders', 'token'],
 }
 </script>

resources/js/panel/panel.vue

@@ -4,7 +4,9 @@
 <transition name="fade" mode="out-in">
 <div v-if="active === ''" id="main">
 	<section class="welcome-pane"><h3>Welcome, {{user.name}}!</h3></section>
-	<section class="credits-pane"><img src="../../images/coin-stack.svg" alt="wallet" class="icon"/><p>Credits: {{(user.credits/100).toLocaleString('en')}}</p></section>
+	<section class="credits-pane"><img src="../../images/coin-stack.svg"
+	alt="wallet" class="icon"/><p>Credits:
+	{{(user.credits/100).toLocaleString('en')}}</p></section>
 	<section class="alerts-pane"><h4>News and Announcements</h4>
 	<p>We've just launched. Thanks for joining us! Some features are still
 	being tested. If you experience a delay in credits being added to your
@@ -29,11 +31,14 @@
 	</section>
 </div>
 
-<past-orders :orders="orders" v-else-if="active === '#orders'" id="main">
+<past-orders :token="token" :orders="orders" v-else-if="active === '#orders'"
+id="main">
 </past-orders>
 
-<new-order :preferred="user.payment_method" :token="token" :active="active" :credits="user.credits" v-else-if="active ===
-'#new-order' || active === '#credits'" id="main" @update-user='getUser' @update-orders='getOrders'>
+<new-order :preferred="user.payment_method" :token="token" :active="active"
+:credits="user.credits" v-else-if="active ===
+'#new-order' || active === '#credits'" id="main" @update-user='getUser'
+@update-orders='getOrders'>
 </new-order>
 
 <div id="main" v-else-if="active === '#exit'">

resources/scss/main.scss

@@ -758,8 +758,7 @@ main.panel {
 	section {
 		padding: 5px;
 		border-radius: 4px;
-		min-height: 3em;
-		margin-bottom: 1em;
+		margin-bottom: 2em;
 	}
 
 	h4 {
@@ -789,13 +788,23 @@ main.panel {
 	opacity: 0;
 }
 
-.recent-pane, .history-pane{
-	min-width: 20em;
-	overflow: scroll;
+section.recent-pane, section.history-pane{
+	display: flex;
+	flex-flow: wrap;
+	justify-content: space-between;
+	width: 100%;
+	height: fit-content;
+	overflow-x: scroll;
+
+	h4 {
+		width: 100%;
+	}
+
 	table {
 		border-spacing: 4px;
 		margin: auto;
 		text-align: center;
+		min-width: 30em;
 		width: 100%;
 	}
 
@@ -829,6 +838,18 @@ main.panel {
 	td.canceled {
 		color: vars.getColor('red-alert');
 	}
+
+	.bi-eye-fill {
+		color: grey;
+	}
+
+	.nav-btn.right {
+		margin-right: 20px;
+	}
+
+	.nav-btn.left {
+		margin-left: 20px;
+	}
 }
 
 .pending-pane {
@@ -880,28 +901,14 @@ main.panel {
 	transition: all 0.2s;
 	.nav-btn {
 		width: 1.5em;
-		transform: translateY(1.5em);
+		// transform: translateY(1.5em);
 
 	}
-	.nav-btn.right {
-		bottom: 0px;
-		right: 1em;
-		position: absolute;
-		display: block;
-		margin-left: auto;
-	}
-	.nav-btn.left {
-		bottom: 0px;
-		left: 1em;
-		position: absolute;
-		display: block;
-		margin-right: auto;
-	}
 	.nav-legend {
 		color: grey;
-		transform: translateX(-1.5em);
+		// transform: translateX(-1.5em);
 		text-align: center;
-		position: absolute;
+		// position: absolute;
 		width: 3em;
 		left: 50%;
 	}
@@ -1157,6 +1164,10 @@ main.panel {
 		text-align: center;
 	}
 
+	li {
+		margin: 1em 0;
+	}
+
 }
 
 button .loading-icon {

routes/web.php

@@ -145,7 +145,7 @@ Route::post('/hooks/pm-transaction',
 
 //Payment attempt is over
 Route::get('/panel/clear-paying',
-	[UserController::class, 'clearPaying']);
+	[UserController::class, 'clearPaying'])->middleware(['auth', 'verified']);
 
 Route::post('/panel/support',
-	[Ticket::class, 'send']);
+	[Ticket::class, 'send'])->middleware(['auth', 'verified']);

trendplays@trendplays.com

@@ -1 +0,0 @@
-1431874711