+
+
diff --git a/src/components/Map.vue b/src/components/Map.vue
new file mode 100644
index 0000000..001bd1f
--- /dev/null
+++ b/src/components/Map.vue
@@ -0,0 +1,222 @@
+
+
+
+
+ Restaurants, Hotels & Attractions arround you
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![product image]()
+
+
+
+
+
+
+ + {{ place.name ? place.name : "No name" }} +
+ ++
+ Rating
+
+
+ {{ place.rating ? place.rating : "no rating" }} /
+ 5.0
+
+
+ Price
+
+
+ {{
+ place.price_level ? place.price_level : "no price"
+ }}
+
+
+ {{ place.ranking ? place.ranking : "no ranking" }}
+
+
+
+ + + {{ place.address ? place.address : "no location" }} + || {{ place.phone ? place.phone : "no contacts" }} +
+
+
+ Website
+
+
+ Trip Advisor
+
+
+
+
+
+
+
+
+ ![icon]()
+
+ {{ coordinate.name }}
+Place Details
+ diff --git a/src/components/WeatherFidget.vue b/src/components/WeatherFidget.vue new file mode 100644 index 0000000..ef61c36 --- /dev/null +++ b/src/components/WeatherFidget.vue @@ -0,0 +1,47 @@ + + + +
+
+
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..85dcca6
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,29 @@
+import { createApp, markRaw } from "vue";
+import { createPinia } from "pinia";
+import vue3GoogleLogin from "vue3-google-login";
+import piniaPluginPersistedState from "pinia-plugin-persistedstate"
+// import Vuetify from "vuetify";
+// import v3gmaps from "v3-gmaps";
+// import { vue3Debouonce } from "vue3-debounce";
+
+
+import App from "./App.vue";
+import router from "./router";
+
+import "v3-gmaps/dist/style.css";
+import "./assets/main.css";
+
+const app = createApp(App);
+const pinia = createPinia();
+
+pinia.use(({ store }) => {
+ store.router = markRaw(router);
+});
+pinia.use(piniaPluginPersistedState)
+app.use(vue3GoogleLogin, {
+ clientId: '1071224371703-8noc4baa30srkagnt6rrnphu6cpk7hse.apps.googleusercontent.com'
+})
+app.use(router);
+app.use(pinia);
+
+app.mount("#app");
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..3895754
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,57 @@
+import { createRouter, createWebHistory } from "vue-router";
+// import App from "../App.vue"
+import Home from '../views/Home.vue'
+import Login from '../views/Login.vue'
+import Register from '../views/Register.vue'
+import BookMark from '../views/Bookmark.vue'
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes: [
+ {
+ path: '/',
+ name: 'home',
+ component: Home
+ },
+ {
+ path: '/login',
+ name: 'login',
+ component: Login,
+ beforeEnter: (to, from, next) => {
+ if (localStorage.getItem("access_token")) {
+ Swal.fire({
+ icon: "error",
+ title: 'You already logged in',
+ });
+ next({ name: "home" })
+ } else {
+ next();
+ }
+ },
+ },
+ {
+ path: '/register',
+ name: 'register',
+ component: Register
+ },
+ {
+ path: '/bookmark',
+ name: 'bookmark',
+ component: BookMark,
+ beforeEnter: (to, from, next) => {
+ if (localStorage.getItem("access_token")) {
+ next();
+ }
+ else {
+ Swal.fire({
+ icon: "error",
+ title: 'You need to login first',
+ });
+ next({ name: "home" });
+ }
+ },
+ }
+ ],
+});
+
+export default router;
diff --git a/src/stores/counter.js b/src/stores/counter.js
new file mode 100644
index 0000000..374b4d0
--- /dev/null
+++ b/src/stores/counter.js
@@ -0,0 +1,12 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useCounterStore = defineStore("counter", () => {
+ const count = ref(0);
+ const doubleCount = computed(() => count.value * 2);
+ function increment() {
+ count.value++;
+ }
+
+ return { count, doubleCount, increment };
+});
diff --git a/src/stores/travelokal.js b/src/stores/travelokal.js
new file mode 100644
index 0000000..53e9121
--- /dev/null
+++ b/src/stores/travelokal.js
@@ -0,0 +1,256 @@
+import { defineStore } from "pinia";
+import axios from "axios";
+// import { nextTick } from "vue";
+// const server = "http://localhost:3000";
+const server = 'https://travelokal-server-production.up.railway.app'
+
+export const useTravelokalStore = defineStore("travelokal", {
+ state() {
+ return {
+ places: [],
+ type: "restaurants",
+ rating: 4.5,
+ boundaries: {
+ bl_latitude: +"11.847676",
+ tr_latitude: +"12.838442",
+ bl_longitude: +"109.095887",
+ tr_longitude: +"109.149359",
+ },
+ currentPosition: {
+ latCenter: 0,
+ lngCenter: 0,
+ },
+ maps: null,
+ weather: {},
+ place: {},
+ bookMarks: [],
+ isLogin: false,
+ };
+ },
+ persist: true,
+ actions: {
+ async getPlacesData() {
+ try {
+ const { data } = await axios({
+ method: "POST",
+ url: `${server}/places`,
+ data: {
+ type: this.type,
+ bl_latitude: this.boundaries.bl_latitude,
+ tr_latitude: this.boundaries.tr_latitude,
+ bl_longitude: this.boundaries.bl_longitude,
+ tr_longitude: this.boundaries.tr_longitude,
+ },
+ });
+ this.places = data;
+ // this.getWeatherData()
+ } catch (error) {
+ console.log(error);
+ }
+ },
+
+ // async filteredPlaces() {
+ // try{
+ // const filteredPlace = this.places.filter((place) => place.rating > this.rating);
+ // this.places = filteredPlace;
+ // } catch(error) {
+ // console.log(error);
+ // }
+ // }
+ async getWeatherData() {
+ try {
+ const { data } = await axios({
+ method: "POST",
+ url: `${server}/weather`,
+ data: {
+ lat: this.currentPosition.latCenter,
+ lng: this.currentPosition.lngCenter,
+ },
+ });
+ // console.log(data);
+ // console.log(data, 'weather di store');
+ this.weather = data;
+ } catch (error) {
+ console.log(error);
+ }
+ },
+
+ async register(registerForm) {
+ // console.log(registerForm);
+ try {
+ const { data } = await axios({
+ method: "POST",
+ url: `${server}/user/register`,
+ data: registerForm,
+ });
+ this.router.push("/login");
+ // console.log(data);
+ Swal.fire({
+ icon: "success",
+ title: "Register successful, plaese login",
+ });
+ } catch (error) {
+ Swal.fire({
+ icon: "error",
+ title: error.response.data.message,
+ });
+ }
+ },
+
+ async login(loginForm) {
+ try {
+ const { data } = await axios({
+ method: "POST",
+ url: `${server}/user/login`,
+ data: loginForm,
+ });
+ localStorage.setItem("access_token", data.access_token);
+ this.isLogin = true;
+ Swal.fire({
+ icon: "success",
+ title: "Welcome",
+ });
+ this.router.replace("/");
+ } catch (error) {
+ Swal.fire({
+ icon: "error",
+ title: error.response.data.message,
+ });
+ }
+ },
+
+ async addBookmark(locationId) {
+ try {
+ // console.log(locationId);
+ const place = this.places.filter((el) => {
+ if (el.location_id == locationId) {
+ // console.log(el);
+ return {
+ name: el.name,
+ type: el.ranking_category,
+ image_url: el.photo.images.medium.url,
+ website: el.website,
+ trip_advisor: el.web_url,
+ price: el.price_level,
+ ranking: el.ranking,
+ location_id: el.location_id,
+ };
+ }
+ });
+ this.place = place[0];
+
+ // console.log(place);
+ const { data } = await axios({
+ method: "POST",
+ url: `${server}/bookmark`,
+ data: {
+ name: this.place.name,
+ type: this.place.ranking_category,
+ image_url: this.place.photo.images.medium.url,
+ website: this.place.website,
+ trip_advisor: this.place.web_url,
+ price: this.place.price_level,
+ ranking: this.place.ranking,
+ location_id: this.place.location_id,
+ },
+ headers: {
+ access_token: localStorage.getItem("access_token"),
+ },
+ });
+
+ Swal.fire({
+ icon: "success",
+ title: "Bookmark added",
+ });
+ // console.log(data);
+ // console.log(location_id);
+ console.log("Berhasil menambahkan bookmark");
+ } catch (error) {
+ console.log(error);
+ Swal.fire({
+ icon: "error",
+ title: error.response.data.message,
+ });
+ }
+ },
+
+ async getBookmark() {
+ try {
+ const { data } = await axios({
+ method: "GET",
+ url: `${server}/bookmark`,
+ headers: {
+ access_token: localStorage.getItem("access_token"),
+ },
+ });
+ this.bookMarks = data;
+ } catch (error) {
+ console.log(error);
+ }
+ },
+
+ async deleteBookmark(bookmark_id) {
+ try {
+ const { data } = await axios({
+ method: "DELETE",
+ url: `${server}/bookmark/${bookmark_id}`,
+ headers: {
+ access_token: localStorage.getItem("access_token"),
+ },
+ });
+ this.getBookmark();
+ // console.log("berhasil delete");
+ Swal.fire({
+ icon: "success",
+ title: "Bookmark deleted",
+ });
+ } catch (error) {
+ Swal.fire({
+ icon: "error",
+ title: error.response.data.message,
+ });
+ }
+ },
+
+ async logout() {
+ try {
+ localStorage.clear();
+ Swal.fire({
+ icon: "success",
+ title: "See you later",
+ });
+ this.isLogin = false;
+ } catch (error) {
+ Swal.fire({
+ icon: "error",
+ title: error.response.data.message,
+ });
+ }
+ },
+
+ async handleGoogleLogin(googleCred) {
+ // console.log(googleCred);
+ try {
+ const { data } = await axios({
+ method: "post",
+ url: `${server}/user/googleLogin`,
+ headers: {
+ google_token: googleCred,
+ },
+ });
+ localStorage.setItem("access_token", data.access_token);
+ this.isLogin = true;
+ Swal.fire({
+ icon: "success",
+ title: "Welcome",
+ });
+ this.router.replace("/");
+ } catch (error) {
+ Swal.fire({
+ icon: "error",
+ title: error.response.data.message,
+ });
+ }
+ },
+ },
+});
diff --git a/src/views/Bookmark.vue b/src/views/Bookmark.vue
new file mode 100644
index 0000000..ab741d3
--- /dev/null
+++ b/src/views/Bookmark.vue
@@ -0,0 +1,88 @@
+
+
+
+
+ {{ weather.timezone }}
+
+
+ {{ Math.round(weather.currently?.humidity*100) }}%
+
+
+ {{ weather.currently?.summary }}
+ {{ weather.currently?.temperature }}°
+
+
+
+
+
+
+
+ ![blog]()
+
+
+
+ + {{ bookmark.type }} +
++ {{ bookmark.name }} +
++ {{ bookmark.price }} +
++ {{ bookmark.ranking }} +
+
+
+ Website
+
+
+ Trip Advisor
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sign in with
+
+
+
+ +
+
+
+ Or sign in with credentials
+
+
+
+
+
+
+
+
+
+
+
+
+