From a6740b608a0fb3859cb13623a28f6946a85a1e26 Mon Sep 17 00:00:00 2001
From: Diatrex <diahshalabi@hotmail.com>
Date: Mon, 6 Apr 2020 11:52:38 +0300
Subject: [PATCH] Make openclassify compatible with VueJS

---
 .../resources/views/ad-detail/partials/map.twig        |  3 ++-
 .../base-theme/resources/views/partials/assets.twig    |  3 +++
 .../base-theme/resources/views/partials/metadata.twig  |  3 +++
 package.json                                           |  5 +++--
 resources/assets/js/app.js                             | 10 ++++++----
 resources/assets/sass/variables.scss                   |  2 +-
 webpack.mix.js                                         |  6 ++++--
 7 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/addons/default/visiosoft/advs-module/resources/views/ad-detail/partials/map.twig b/addons/default/visiosoft/advs-module/resources/views/ad-detail/partials/map.twig
index a0a21f18b..b36a93e25 100644
--- a/addons/default/visiosoft/advs-module/resources/views/ad-detail/partials/map.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/ad-detail/partials/map.twig
@@ -8,7 +8,7 @@
     $(document).ready(function () {
         var no_image_text = "{{ trans('visiosoft.module.streetview::field.no_location') }}";
 
-
+        if (typeof coord !== 'undefined') {
             var ifAnyImg = "https://maps.googleapis.com/maps/api/streetview/metadata?size=600x300&location=" + coord[0] + "," + coord[1] +
                 "&fov=90&heading=235&pitch=10&key=" + google_map_key;
             $.getJSON(ifAnyImg, function (data) {
@@ -22,6 +22,7 @@
                     }
                 }
             )
+        }
     });
 </script>
 <script>
diff --git a/addons/default/visiosoft/base-theme/resources/views/partials/assets.twig b/addons/default/visiosoft/base-theme/resources/views/partials/assets.twig
index 2da614b33..ee463306d 100644
--- a/addons/default/visiosoft/base-theme/resources/views/partials/assets.twig
+++ b/addons/default/visiosoft/base-theme/resources/views/partials/assets.twig
@@ -2,6 +2,9 @@
     Main CSS can be found in metadata.twig
 #}
 
+<!-- VueJS Requirements -->
+<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
+
 {# Core Theme Components #}
 {{ asset_add("theme.js", "visiosoft.theme.base::js/popper.min.js") }}
 {{ asset_add("theme.js", "visiosoft.theme.base::js/bootstrap.min.js") }}
diff --git a/addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig b/addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig
index b6d03062f..ab18b79dd 100644
--- a/addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig
+++ b/addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig
@@ -1,6 +1,9 @@
 <!-- Locale -->
 <meta http-equiv="Content-Language" content="{{ config('app.locale') }}">
 
+<!-- VueJS Requirements -->
+<meta name="csrf-token" content="{{ csrf_token() }}" />
+
 <!-- To the Future! -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
diff --git a/package.json b/package.json
index 8c4fedd4f..a5d22e8d9 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.15.2",
         "sass-loader": "^7.1.0",
-        "vue": "^2.5.17"
+        "vue": "^2.5.17",
+        "vue-template-compiler": "^2.6.11"
     }
-}
\ No newline at end of file
+}
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index c63b3c334..c2490c0a7 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -13,8 +13,10 @@ require('./bootstrap');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-Vue.component('example', require('./components/Example.vue'));
+window.Vue = require('vue');
 
-const app = new Vue({
-    el: '#app'
-});
+// Vue.component('example', require('./components/Example.vue').default);
+//
+// const app = new Vue({
+//     el: '#app'
+// });
diff --git a/resources/assets/sass/variables.scss b/resources/assets/sass/variables.scss
index cce45585b..4969cd5e3 100644
--- a/resources/assets/sass/variables.scss
+++ b/resources/assets/sass/variables.scss
@@ -18,7 +18,7 @@ $brand-danger:  #bf5329;
 
 // Typography
 $font-family-sans-serif: "Raleway", sans-serif;
-$font-size-base: 14px;
+$font-size-base: 0.875rem;
 $line-height-base: 1.6;
 $text-color: #636b6f;
 
diff --git a/webpack.mix.js b/webpack.mix.js
index 72fdbb16d..e409afcf7 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -11,5 +11,7 @@ let mix = require('laravel-mix');
  |
  */
 
-mix.js('resources/assets/js/app.js', 'public/js')
-   .sass('resources/assets/sass/app.scss', 'public/css');
+mix
+    .js('resources/assets/js/app.js', 'public/js')
+    .js('addons/default/visiosoft/*/resources/js/vue/app.js', 'public/js')
+    .sass('resources/assets/sass/app.scss', 'public/css');