From 01f6f75c1544de73f1c08477f083c9472586d0e2 Mon Sep 17 00:00:00 2001
From: Dado555 <dmalic555@gmail.com>
Date: Mon, 15 Aug 2022 15:14:56 +0200
Subject: [PATCH] front for get movie by title

---
 .../src/components/items/MovieItem.vue        |   4 +-
 .../src/components/items/MovieItemOmdb.vue    |  38 +++++
 .../movies/createMovie/NewMovieInputInfo.vue  | 132 +++++++++++++++
 .../movies/createMovie/NewMovieInputTitle.vue | 130 +++++++++++++++
 .../movies/createMovie/NewMoviePage.vue       | 151 ++++++------------
 scrape-movie-service/models/movie.go          |   1 +
 .../service/getMovieByTitle.go                |   2 +
 7 files changed, 353 insertions(+), 105 deletions(-)
 create mode 100644 gleficu-frontend/src/components/items/MovieItemOmdb.vue
 create mode 100644 gleficu-frontend/src/components/movies/createMovie/NewMovieInputInfo.vue
 create mode 100644 gleficu-frontend/src/components/movies/createMovie/NewMovieInputTitle.vue

diff --git a/gleficu-frontend/src/components/items/MovieItem.vue b/gleficu-frontend/src/components/items/MovieItem.vue
index 3d13fb5..d0090cc 100644
--- a/gleficu-frontend/src/components/items/MovieItem.vue
+++ b/gleficu-frontend/src/components/items/MovieItem.vue
@@ -50,8 +50,8 @@ export default {
   methods: {
     genreTypeName(genraId, index) {
       for (const item of this.genres) {
-        if (item.id == genraId) {
-          if (this.movie.genre_ids.length - 1 == index) {
+        if (item.id === genraId) {
+          if (this.movie.genre_ids.length - 1 === index) {
             return item.name;
           } else {
             return item.name + ",";
diff --git a/gleficu-frontend/src/components/items/MovieItemOmdb.vue b/gleficu-frontend/src/components/items/MovieItemOmdb.vue
new file mode 100644
index 0000000..5e0481a
--- /dev/null
+++ b/gleficu-frontend/src/components/items/MovieItemOmdb.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <img :src="movie.Poster" class="hover:opacity-75 tansition easy-in-out duration-150"/>
+
+    <h3>{{ movie.Title }}</h3>
+
+    <div class="flex">
+      <svg class="fill-current text-yellow-500 w-4 h-4 mt-1" viewBox="0 0 24 24">
+        <g data-name="Layer 2">
+          <path
+              d="M17.56 21a1 1 0 01-.46-.11L12 18.22l-5.1 2.67a1 1 0 01-1.45-1.06l1-5.63-4.12-4a1 1 0 01-.25-1 1 1 0 01.81-.68l5.7-.83 2.51-5.13a1 1 0 011.8 0l2.54 5.12 5.7.83a1 1 0 01.81.68 1 1 0 01-.25 1l-4.12 4 1 5.63a1 1 0 01-.4 1 1 1 0 01-.62.18z"
+              data-name="star"
+          />
+        </g>
+      </svg>
+      <span class="ml-2">{{ movie.ImdbRating * 10 }}% | {{ movie.Released }} </span>
+      <br />
+    </div>
+    <span class="text-sm text-gray-500">
+      {{ movie.Genre }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MovieItemOmdb",
+  props: {
+    movie: {
+      required: true,
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/gleficu-frontend/src/components/movies/createMovie/NewMovieInputInfo.vue b/gleficu-frontend/src/components/movies/createMovie/NewMovieInputInfo.vue
new file mode 100644
index 0000000..5b0afc2
--- /dev/null
+++ b/gleficu-frontend/src/components/movies/createMovie/NewMovieInputInfo.vue
@@ -0,0 +1,132 @@
+<template>
+  <div id="newMovie" class="container mx-auto">
+    <!--    <pre v-html="prettyJSON"></pre>-->
+    <form-wizard @on-complete="onComplete"
+                 validate-on-back
+                 ref="wizard"
+                 :start-index.sync="activeTabIndex"
+                 shape="circle" color="rgba(245, 158, 11)" error-color="#ff4949">
+      <h1 style="font-size: x-large; color: whitesmoke" slot="title">Add New Movie</h1>
+      <h2 style="font-size: large;" slot="title">Define needed informations to add new movie</h2>
+
+      <tab-content title="Movie and title links" icon="ti-video-clapper"
+                   :before-change="() => validate('firstStep')">
+        <first-step ref="firstStep" @on-validate="onStepValidate"></first-step>
+        <!--        <el-button @click="forceClearError" style="background-color: rgb(32, 160, 255);border-color: rgb(32, 160, 255);color: white;">Try to clear the error</el-button>-->
+      </tab-content>
+      <tab-content title="Movie sites (IMDb or Rotten Tomatoes)" icon="ti-world"
+                   :before-change="() => validate('secondStep')">
+        <second-step ref="secondStep" @on-validate="onStepValidate"></second-step>
+      </tab-content>
+      <tab-content title="Last step" icon="ti-check">
+        Your data
+        <pre v-html="prettyJSON"></pre>
+      </tab-content>
+
+    </form-wizard>
+  </div>
+</template>
+
+<script>
+import FirstStep from "@/components/movies/createMovie/FirstStep";
+import SecondStep from "@/components/movies/createMovie/SecondStep";
+import prettyJSON from "@/components/movies/createMovie/prettyJson";
+
+export default {
+  name: "NewMovieInputInfo",
+  components: {
+    FirstStep,
+    SecondStep,
+  },
+  data() {
+    return {
+      activeTabIndex: 0,
+    }
+  },
+  methods: {
+    onComplete() {
+      alert("Yay. Done!");
+    },
+    forceClearError() {
+      this.$refs.wizard.tabs[this.activeTabIndex].validationError = null;
+    },
+    validate(ref) {
+      return this.$refs[ref].validate();
+    },
+    onStepValidate(validated, model) {
+      if (validated) {
+        this.finalModel = { ...this.finalModel, ...model };
+      }
+    }
+  },
+  computed: {
+    prettyJSON() {
+      return prettyJSON(this.finalModel);
+    }
+  }
+}
+</script>
+
+<style scoped>
+#newMovie {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  /*color: #2c3e50;*/
+  color: whitesmoke;
+  margin-top: 60px;
+}
+
+body {
+  font-family: Menlo, Monaco, "Courier New", monospace;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 16px;
+  margin: 0;
+}
+
+pre {
+  overflow: auto;
+}
+pre .string {
+  color: #885800;
+}
+pre .number {
+  color: blue;
+}
+pre .boolean {
+  color: magenta;
+}
+pre .null {
+  color: red;
+}
+pre .key {
+  color: green;
+}
+
+.panel {
+  margin-bottom: 20px;
+  background-color: #fff;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  border-color: #ddd;
+}
+
+.panel-heading {
+  color: #333;
+  background-color: #f5f5f5;
+  border-color: #ddd;
+
+  padding: 10px 15px;
+  border-bottom: 1px solid transparent;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.panel-body {
+  padding: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/gleficu-frontend/src/components/movies/createMovie/NewMovieInputTitle.vue b/gleficu-frontend/src/components/movies/createMovie/NewMovieInputTitle.vue
new file mode 100644
index 0000000..35cf5ed
--- /dev/null
+++ b/gleficu-frontend/src/components/movies/createMovie/NewMovieInputTitle.vue
@@ -0,0 +1,130 @@
+<template>
+  <div id="newMovie" class="container mx-auto">
+    <h1 style="font-size: x-large; color: whitesmoke" slot="title">Add New Movie</h1>
+    <h2 style="font-size: large;" slot="title">Define title and year when it's released</h2>
+
+    <el-form :model="model" :rules="rules" ref="form">
+      <el-form-item label="Title of your movie: " prop="title">
+        <el-input v-model="model.title" placeholder="goodfellas"></el-input>
+      </el-form-item>
+      <el-form-item label="Year released: " prop="year">
+        <el-input v-model="model.year" placeholder="1990"></el-input>
+      </el-form-item>
+    </el-form>
+
+    <el-button @click="submit()" style="background-color: rgba(245, 158, 11);border-color: rgba(245, 158, 11);color: white;">Submit</el-button>
+
+    <div class="container mx-auto">
+      <h2 class="uppercase mt-5 text-yellow-500 text-lg font-semibold">
+        Result movie
+      </h2>
+
+      <movie-item-omdb movie=""/>
+    </div>
+  </div>
+</template>
+
+<script>
+import MovieItemOmdb from "@/components/items/MovieItemOmdb";
+export default {
+  name: "NewMovieInputTitle",
+  components: {MovieItemOmdb},
+  data() {
+    return {
+      model: {
+        title: '',
+        year: '',
+      },
+      rules: {
+        title: [{
+          required: true,
+          message: 'Title is required',
+          trigger: 'blur'
+        }],
+        titleLink: [{
+          required: true,
+          message: 'Year is required',
+          trigger: 'blur'
+        }],
+      }
+    }
+  },
+  methods: {
+    validate() {
+      return new Promise((resolve, ) => { // reject
+        this.$refs.form.validate((valid) => {
+          this.$emit('on-validate', valid, this.model)
+          resolve(valid);
+        });
+      })
+    },
+    submit() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+#newMovie {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  /*color: #2c3e50;*/
+  color: whitesmoke;
+  margin-top: 60px;
+}
+
+body {
+  font-family: Menlo, Monaco, "Courier New", monospace;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 16px;
+  margin: 0;
+}
+
+pre {
+  overflow: auto;
+}
+pre .string {
+  color: #885800;
+}
+pre .number {
+  color: blue;
+}
+pre .boolean {
+  color: magenta;
+}
+pre .null {
+  color: red;
+}
+pre .key {
+  color: green;
+}
+
+.panel {
+  margin-bottom: 20px;
+  background-color: #fff;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  border-color: #ddd;
+}
+
+.panel-heading {
+  color: #333;
+  background-color: #f5f5f5;
+  border-color: #ddd;
+
+  padding: 10px 15px;
+  border-bottom: 1px solid transparent;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.panel-body {
+  padding: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/gleficu-frontend/src/components/movies/createMovie/NewMoviePage.vue b/gleficu-frontend/src/components/movies/createMovie/NewMoviePage.vue
index ef18a97..858f0c0 100644
--- a/gleficu-frontend/src/components/movies/createMovie/NewMoviePage.vue
+++ b/gleficu-frontend/src/components/movies/createMovie/NewMoviePage.vue
@@ -1,61 +1,66 @@
 <template>
-  <div id="newMovie" class="container mx-auto">
-<!--    <pre v-html="prettyJSON"></pre>-->
-    <form-wizard @on-complete="onComplete"
-                 validate-on-back
-                 ref="wizard"
-                 :start-index.sync="activeTabIndex"
-                 shape="circle" color="rgba(245, 158, 11)" error-color="#ff4949">
-      <h1 style="font-size: x-large; color: whitesmoke" slot="title">Add New Movie</h1>
-      <h2 style="font-size: large;" slot="title">Define needed informations to add new movie</h2>
-
-      <tab-content title="Movie and title links" icon="ti-video-clapper"
-                   :before-change="() => validate('firstStep')" style="color: white">
-        <first-step ref="firstStep" @on-validate="onStepValidate"></first-step>
-<!--        <el-button @click="forceClearError" style="background-color: rgb(32, 160, 255);border-color: rgb(32, 160, 255);color: white;">Try to clear the error</el-button>-->
-      </tab-content>
-      <tab-content title="Movie sites (IMDb or Rotten Tomatoes)" icon="ti-world"
-                   :before-change="() => validate('secondStep')">
-        <second-step ref="secondStep" @on-validate="onStepValidate"></second-step>
-      </tab-content>
-      <tab-content title="Last step" icon="ti-check">
-        Your data
-        <pre v-html="prettyJSON"></pre>
-      </tab-content>
-
-    </form-wizard>
+  <div :class="{'flex space-x-4': variant === 'horizontal',}">
+    <ul
+        class="list-none p-1.5 rounded-lg text-center overflow-auto whitespace-nowrap"
+        :class="{'flex items-center mb-6': variant === 'vertical',}">
+      <li
+          v-for="(tab, index) in tabList"
+          :key="index"
+          style="color: whitesmoke;"
+          class="w-full px-4 py-1.5 rounded-lg"
+          :class="{
+          'bg-yellow-500 shadow-xl': index + 1 === activeTab,
+          'text-white': index + 1 !== activeTab,
+        }"
+      >
+        <label
+            :for="`${_uid}${index}`"
+            v-text="tab"
+            class="cursor-pointer block"
+        />
+        <input
+            :id="`${_uid}${index}`"
+            type="radio"
+            :name="`${_uid}-tab`"
+            :value="index + 1"
+            v-model="activeTab"
+            class="hidden"
+        />
+      </li>
+    </ul>
+    <template>
+      <new-movie-input-info :key="1" v-if="activeTab === 1"/>
+      <new-movie-input-title :key="2" v-if="activeTab === 2" ref="byTitle" @on-validate="onStepValidate"/>
+    </template>
   </div>
 </template>
 
 <script>
-import FirstStep from "@/components/movies/createMovie/FirstStep";
-import SecondStep from "@/components/movies/createMovie/SecondStep";
-import prettyJSON from "@/components/movies/createMovie/prettyJson";
+import NewMovieInputInfo from "@/components/movies/createMovie/NewMovieInputInfo";
+import NewMovieInputTitle from "@/components/movies/createMovie/NewMovieInputTitle";
 
 export default {
   name: "NewMoviePage",
-  components: {
-    FirstStep,
-    SecondStep,
-  },
   data() {
     return {
       finalModel: {},
-      activeTabIndex: 0
+      activeTab: 1,
+      tabList: ["Insert links", "Find by title"],
     };
   },
-  computed: {
-    prettyJSON() {
-      return prettyJSON(this.finalModel);
-    }
+  components: {
+    NewMovieInputTitle,
+    NewMovieInputInfo
   },
-  methods: {
-    onComplete() {
-      alert("Yay. Done!");
-    },
-    forceClearError() {
-      this.$refs.wizard.tabs[this.activeTabIndex].validationError = null;
+  props: {
+    variant: {
+      type: String,
+      required: false,
+      default: () => "vertical",
+      validator: (value) => ["horizontal", "vertical"].includes(value),
     },
+  },
+  methods: {
     validate(ref) {
       return this.$refs[ref].validate();
     },
@@ -69,65 +74,5 @@ export default {
 </script>
 
 <style>
-#newMovie {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  /*color: #2c3e50;*/
-  color: whitesmoke;
-  margin-top: 60px;
-}
-
-body {
-  font-family: Menlo, Monaco, "Courier New", monospace;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 16px;
-  margin: 0;
-}
-
-pre {
-  overflow: auto;
-}
-pre .string {
-  color: #885800;
-}
-pre .number {
-  color: blue;
-}
-pre .boolean {
-  color: magenta;
-}
-pre .null {
-  color: red;
-}
-pre .key {
-  color: green;
-}
-
-.panel {
-  margin-bottom: 20px;
-  background-color: #fff;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-  border-color: #ddd;
-}
-
-.panel-heading {
-  color: #333;
-  background-color: #f5f5f5;
-  border-color: #ddd;
-
-  padding: 10px 15px;
-  border-bottom: 1px solid transparent;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-}
 
-.panel-body {
-  padding: 15px;
-}
 </style>
\ No newline at end of file
diff --git a/scrape-movie-service/models/movie.go b/scrape-movie-service/models/movie.go
index 2d8e280..9f3bbce 100644
--- a/scrape-movie-service/models/movie.go
+++ b/scrape-movie-service/models/movie.go
@@ -15,6 +15,7 @@ type Movie struct {
 	Plot       string
 	Language   string
 	Country    string
+	Poster     string
 	ImdbRating string
 	Metascore  string
 	ImdbVotes  string
diff --git a/scrape-movie-service/service/getMovieByTitle.go b/scrape-movie-service/service/getMovieByTitle.go
index 4e9ab64..8a02c4d 100644
--- a/scrape-movie-service/service/getMovieByTitle.go
+++ b/scrape-movie-service/service/getMovieByTitle.go
@@ -24,6 +24,7 @@ var MovieVar = models.Movie{
 	Plot:       "",
 	Language:   "",
 	Country:    "",
+	Poster:     "",
 	ImdbRating: "",
 	Metascore:  "",
 	ImdbVotes:  "",
@@ -78,6 +79,7 @@ func FindByTitle(movieName string, movieYear string) models.Movie {
 		fmt.Printf("\nDirector: %s\n", MovieVar.Director)
 		fmt.Printf("Writer: %s\n", MovieVar.Writer)
 		fmt.Printf("Stars: %s\n", MovieVar.Actors)
+		fmt.Printf("\nPoster: %s\n", MovieVar.Poster)
 		fmt.Printf("\nImdb Page: http://www.imdb.com/title/%s\n", MovieVar.ImdbID)
 	} else {
 		fmt.Printf("%s\n", MovieVar.Error)