From b24b3b74d49bdc19e45f21a4e3e4b56b4180feab Mon Sep 17 00:00:00 2001
From: Immanuel Onyeka <immanuel@onyeka.ca>
Date: Wed, 26 May 2021 19:04:02 -0400
Subject: [PATCH] Render services in their components
---
app/Http/Controllers/ServiceController.php | 14 ++++++++
app/Http/Controllers/Transaction.php | 10 ++++++
resources/js/panel/panel.vue | 29 +++++++++++++++--
resources/js/panel/service-pane.vue | 27 ++++++++++++++++
resources/js/panel/services.vue | 37 +++++++++++-----------
resources/scss/main.scss | 3 +-
routes/web.php | 4 +++
7 files changed, 103 insertions(+), 21 deletions(-)
create mode 100644 app/Http/Controllers/ServiceController.php
create mode 100644 app/Http/Controllers/Transaction.php
create mode 100644 resources/js/panel/service-pane.vue
diff --git a/app/Http/Controllers/ServiceController.php b/app/Http/Controllers/ServiceController.php
new file mode 100644
index 0000000..d1ee7b2
--- /dev/null
+++ b/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();
+ }
+}
diff --git a/app/Http/Controllers/Transaction.php b/app/Http/Controllers/Transaction.php
new file mode 100644
index 0000000..a408a23
--- /dev/null
+++ b/app/Http/Controllers/Transaction.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class Transaction extends Controller
+{
+ //
+}
diff --git a/resources/js/panel/panel.vue b/resources/js/panel/panel.vue
index bda3e2b..828c034 100644
--- a/resources/js/panel/panel.vue
+++ b/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>
diff --git a/resources/js/panel/service-pane.vue b/resources/js/panel/service-pane.vue
new file mode 100644
index 0000000..784306a
--- /dev/null
+++ b/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>
diff --git a/resources/js/panel/services.vue b/resources/js/panel/services.vue
index b5a9a72..49ce360 100644
--- a/resources/js/panel/services.vue
+++ b/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>
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index 189ea08..1e9b1a8 100644
--- a/resources/scss/main.scss
+++ b/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 {
diff --git a/routes/web.php b/routes/web.php
index ac1c6f1..b3495f9 100644
--- a/routes/web.php
+++ b/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');