Render services in their components

app/Http/Controllers/ServiceController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
+use App\Models\Service;
+
+class ServiceController extends Controller
+{
+	public function getServices(Request $request) {
+		return Service::all();
+	}
+}

app/Http/Controllers/Transaction.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class Transaction extends Controller
+{
+    //
+}

resources/js/panel/panel.vue

@@ -1,4 +1,5 @@
 <template>
+<template v-if="!loading">
 <sidebar :active="active"></sidebar>
 <transition name="fade" mode="out-in">
 <div v-if="active === ''" id="main">
@@ -27,7 +28,7 @@
 </div>
 <PastOrders :orders="orders" v-else-if="active === '#orders'" id="main">
 </PastOrders>
-<NewOrder :orders="orders" v-else-if="active === '#new-order'" id="main">
+<NewOrder :token="token" v-else-if="active === '#new-order'" id="main">
 </NewOrder>
 <div id="main" v-else-if="active === '#exit'">
 	<section class="logout-pane">
@@ -38,6 +39,7 @@
 <settings :token="token" :user="user" class="settings-page" id="main" v-else-if="active === '#settings'"></settings>
 </transition>
 </template>
+</template>
 
 <script>
 import Sidebar from './sidebar.vue'
@@ -45,6 +47,19 @@ import Settings from './settings.vue'
 import PastOrders from './orders.vue'
 import NewOrder from './services.vue'
 
+/* function getServices() { */
+	
+/* } */
+/* function getServices() { */
+/* 	fetch("/panel/services", { */
+/* 		method: 'GET', */
+/* 		headers: {'Content-Type': 'application/json', */
+/* 			'Accept': 'application/json', */
+/* 			'X-XSRF-TOKEN': this.token} */
+/* 	}).then(response => { */
+/* 		response.json().then(data => {this.services = data}) */
+/* 	}) */
+/* } */
 
 export default {
 	components: {
@@ -52,8 +67,18 @@ export default {
 	},
 	data() {
 	return {active: window.location.hash, user: '',
-	token: '', orders: '',}
+	token: '', orders: '', loading: true}
 	},
 	methods: {},
+	beforeCreate() {
+		fetch("/panel/services", {
+			method: 'GET',
+			headers: {'Content-Type': 'application/json',
+				'Accept': 'application/json',
+				'X-XSRF-TOKEN': this.token}
+		}).then(response => {
+			response.json().then(data => {this.services = data; this.loading = false})
+		})
+	}
 }
 </script>

resources/js/panel/service-pane.vue

@@ -0,0 +1,27 @@
+<template>
+<section class="services-pane youtube" >
+	<h4>{{site.charAt(0).toUpperCase() + site.slice(1)}}</h4>
+	<ul :key="service.id" v-for="service in filter(site)">
+		<li><span>{{service.name}}</span><span>{{service.price}}</span><span>{{service.minimum}}</span><span>{{service.maximum}}</span>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
+  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
+</svg>
+		</li>
+	</ul>
+	</section>
+</template>
+
+<script>
+function filter(site) {
+	if (!this.services) {return}
+
+	return this.services.filter(function(s) {
+		return s.site == site
+	})
+}
+
+export default {
+	props: ['services', 'site'],
+	methods: {filter}
+}
+</script>

resources/js/panel/services.vue

@@ -8,31 +8,32 @@
 	</div>
 	<div class="services-legend"><h5>Name</h5>
 <h5>Credits per 1000</h5><h5>Min Qt.</h5><h5>Max Qt.</h5></div>
-	<section class="services-pane youtube">
-	<h4>Youtube</h4>
-	<ul>
-		<li><span>Unique Views and Engagements</span><span>11</span><span>1000</span><span>500,000</span>
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
-  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
-</svg>
-		</li>
-	</ul>
-	</section>
-	<section class="services-pane instagram">
-	<h4>Instagram</h4>
-	</section>
-	<section class="services-pane twitter">
-	<h4>Twitter</h4>
-	</section>
+<ServicePane :site="'youtube'" :services="services"></ServicePane>
+<ServicePane :site="'instagram'" :services="services"></ServicePane>
+<ServicePane :site="'twitter'" :services="services"></ServicePane>
+<ServicePane :site="'tiktok'" :services="services"></ServicePane>
 </div>
 </template>
 
 <script>
+import ServicePane from './service-pane.vue'
+
 
 export default {
 	data() {
-		return {servicePane: true}
+		return {servicePane: true, services: ''}
+	},
+	components: {ServicePane},
+	props: ['token'],
+	created() {
+		fetch("/panel/services", {
+			method: 'GET',
+			headers: {'Content-Type': 'application/json',
+				'Accept': 'application/json',
+				'X-XSRF-TOKEN': this.token}
+		}).then(response => {
+			response.json().then(data => {this.services = data})
+		})
 	},
-	props: ['orders']
 }
 </script>

resources/scss/main.scss

@@ -1031,7 +1031,7 @@ main.panel {
 		justify-content: space-between;
 		align-items: center;
 		border-top: 1px solid grey;
-		border-bottom: 1px solid grey;
+		// border-bottom: 1px solid grey;
 		padding: 6px 0;
 	}
 
@@ -1053,6 +1053,7 @@ main.panel {
 		width: 25px;
 		height: 25px;
 		color: vars.getColor('brand-orange');
+		right: 10px;
 	}
 
 	svg:hover {

routes/web.php

@@ -2,6 +2,7 @@
 
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\UserController;
+use App\Http\Controllers\ServiceController;
 use Illuminate\Foundation\Auth\EmailVerificationRequest;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
@@ -63,6 +64,9 @@ Route::get('/panel/user', function (Request $request) {
 Route::get('/panel/orders', [UserController::class,
 	'getOrders'])->middleware([ 'auth', 'verified' ]);
 
+Route::get('/panel/services', [ServiceController::class,
+	'getServices'])->middleware([ 'auth', 'verified' ]);
+
 Route::get('/logout', [UserController::class,
 	'logout'])->middleware('auth');