From 4902d0d63e03836aa5f0534f90e3fa657ac1cb1f Mon Sep 17 00:00:00 2001
From: Immanuel Onyeka <immanuel@onyeka.ca>
Date: Mon, 31 May 2021 12:29:23 -0400
Subject: [PATCH] Display correct service information in overlay
---
database/seeders/DatabaseSeeder.php | 1 +
resources/images/tik-tok.svg | 1 +
resources/images/twitter.svg | 43 +++++++++++++++++++++++++++++
resources/js/panel/services.vue | 34 +++++++++++++++++------
resources/scss/main.scss | 15 ++++++++--
5 files changed, 83 insertions(+), 11 deletions(-)
create mode 100644 resources/images/tik-tok.svg
create mode 100644 resources/images/twitter.svg
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index e60d48f..fc6794f 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -39,6 +39,7 @@ class DatabaseSeeder extends Seeder
'name' => 'Location Targeted Views',
'type' => 'views',
'site' => 'youtube',
+ 'modifier' => 'location',
'minimum' => 1000,
'maximum' => 100000,
'price' => 25,
diff --git a/resources/images/tik-tok.svg b/resources/images/tik-tok.svg
new file mode 100644
index 0000000..3c91beb
--- /dev/null
+++ b/resources/images/tik-tok.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><g fill="#f00044"><path d="m182.1 265.4c-40.6 0-73.4 32.8-72.8 73 .4 25.8 14.6 48.2 35.5 60.7-7.1-10.9-11.3-23.8-11.5-37.7-.6-40.2 32.2-73 72.8-73 8 0 15.7 1.3 22.9 3.6v-80.5c-7.5-1.1-15.2-1.7-22.9-1.7-.4 0-.7 0-1.1 0v59.2c-7.2-2.3-14.9-3.6-22.9-3.6z"/><path d="m357.6 24h-.6-20.8c6 30.1 22.9 56.3 46.5 74.1-15.5-20.5-24.9-46.1-25.1-74.1z"/><path d="m480 146.5c-7.9 0-15.5-.8-23-2.2v57.7c-27.2 0-53.6-5.3-78.4-15.9-16-6.8-30.9-15.5-44.6-26l.4 177.9c-.2 40-16 77.5-44.6 105.8-23.3 23-52.8 37.7-84.8 42.4-7.5 1.1-15.2 1.7-22.9 1.7-34.2 0-66.8-11.1-93.3-31.6 3 3.6 6.2 7.1 9.7 10.5 28.8 28.4 67 44.1 107.7 44.1 7.7 0 15.4-.6 22.9-1.7 32-4.7 61.5-19.4 84.8-42.4 28.6-28.3 44.4-65.8 44.6-105.8l-1.5-177.9c13.6 10.5 28.5 19.3 44.6 26 24.9 10.5 51.3 15.9 78.4 15.9"/></g><path d="m98.2 254.1c28.5-28.3 66.4-44 106.8-44.3v-21.3c-7.5-1.1-15.2-1.7-22.9-1.7-40.8 0-79.1 15.7-107.9 44.3-28.3 28.1-44.5 66.5-44.4 106.4 0 40.2 15.9 77.9 44.6 106.4 4.6 4.5 9.3 8.7 14.3 12.5-22.6-26.9-34.9-60.5-35-95.9.1-39.9 16.2-78.3 44.5-106.4z" fill="#08fff9"/><path d="m457 144.3v-21.4h-.2c-27.8 0-53.4-9.2-74-24.8 17.9 23.6 44.1 40.4 74.2 46.2z" fill="#08fff9"/><path d="m202 432.2c9.5.5 18.6-.8 27-3.5 29-9.5 49.9-36.5 49.9-68.3l.1-119v-217.4h57.2c-1.5-7.5-2.3-15.1-2.4-23h-78.8v217.3l-.1 119c0 31.8-20.9 58.8-49.9 68.3-8.4 2.8-17.5 4.1-27 3.5-12.1-.7-23.4-4.3-33.2-10.1 12.3 19 33.3 31.9 57.2 33.2z" fill="#08fff9"/><path d="m205 486.2c32-4.7 61.5-19.4 84.8-42.4 28.6-28.3 44.4-65.8 44.6-105.8l-.4-177.9c13.6 10.5 28.5 19.3 44.6 26 24.9 10.5 51.3 15.9 78.4 15.9v-57.7c-30.1-5.8-56.3-22.6-74.2-46.2-23.6-17.8-40.6-44-46.5-74.1h-57.3v217.3l-.1 119c0 31.8-20.9 58.8-49.9 68.3-8.4 2.8-17.5 4.1-27 3.5-24-1.3-44.9-14.2-57.2-33.1-20.9-12.4-35.1-34.9-35.5-60.7-.6-40.2 32.2-73 72.8-73 8 0 15.7 1.3 22.9 3.6v-59.2c-40.4.3-78.3 16-106.8 44.3-28.3 28.1-44.5 66.5-44.4 106.3 0 35.4 12.3 69 35 95.9 26.6 20.5 59.1 31.6 93.3 31.6 7.7.1 15.4-.5 22.9-1.6z"/></g></svg>
\ No newline at end of file
diff --git a/resources/images/twitter.svg b/resources/images/twitter.svg
new file mode 100644
index 0000000..304965f
--- /dev/null
+++ b/resources/images/twitter.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#03A9F4;" d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016
+ c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992
+ c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056
+ c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152
+ c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792
+ c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44
+ C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568
+ C480.224,136.96,497.728,118.496,512,97.248z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/resources/js/panel/services.vue b/resources/js/panel/services.vue
index 643fd0f..eedd657 100644
--- a/resources/js/panel/services.vue
+++ b/resources/js/panel/services.vue
@@ -15,11 +15,15 @@
<div id="overlay" v-if="selected">
<div class="overlay-item">
<img @click="selected = null" class="cancel icon" src="../../images/cancel-icon2.svg" alt=""/>
- <img class="icon" src="../../images/youtube-icon.svg" alt="">
- <h3>Location Targeted Views</h3>
- <h4>Cost: 50</h4>
+ <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 type="number"><span> / 10000</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="">
<option value="usa">USA</option>
@@ -28,9 +32,11 @@
<option value="germany">Germany</option>
<option value="france">France</option>
</select></div>
+ </template>
<h4>URL</h4>
<div><input required type="url" id="url"></div>
- <button>Submit</button>
+ <button @click="buyService" :disabled="paying">Submit<loading v-if="paying"></loading></button>
+ <p></p>
</div>
</div>
</div>
@@ -38,16 +44,27 @@
<script>
import ServicePane from './service-pane.vue'
+import Loading from '../icons/loading.vue'
function select(service) {
this.selected = service
}
+function cost() {
+ return Math.ceil(this.selected.price * this.amount / 1000)
+}
+
+function buyService() {
+ this.paying = true
+ return
+}
+
export default {
data() {
- return {servicePane: true, services: null, selected: null }
+ return {servicePane: true, services: null, selected: null, amount: 0,
+ paying: false }
},
- components: {ServicePane},
+ components: {ServicePane, Loading},
props: ['token'],
created() {
fetch("/panel/services", {
@@ -59,6 +76,7 @@ export default {
response.json().then(data => {this.services = data})
})
},
- methods: {select}
+ methods: {select, buyService},
+ computed: {cost}
}
</script>
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index c8d0658..4f43d8e 100644
--- a/resources/scss/main.scss
+++ b/resources/scss/main.scss
@@ -1117,10 +1117,15 @@ main.panel {
}
button {
- display: block;
+ display: inline-block;
margin: auto;
- @include vars.brand-button('brand-orange');
- width: 7em;
+ display: flex;
+ align-items: center;
+ text-align: center;
+ justify-content: center;
+ @include vars.inverting-button(vars.getColor('brand-orange'), white);
+ font-size: 1.1rem;
+ min-width: 7em;
}
#url {
@@ -1129,3 +1134,7 @@ main.panel {
}
+button .loading-icon {
+ display: inline;
+ height: 1.5em;
+}