front for get movie by title

Dado555 · Aug 15, 2022 · 01f6f75 · 01f6f75
1 parent 781273d
commit 01f6f75
Show file tree

Hide file tree

Showing 7 changed files with 353 additions and 105 deletions.
diff --git 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
@@ -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>
diff --git a/gleficu-frontend/src/components/movies/createMovie/NewMovieInputInfo.vue 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>
diff --git a/gleficu-frontend/src/components/movies/createMovie/NewMovieInputTitle.vue 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>