Display correct service information in overlay

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,

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>

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>

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>

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;
+}