sync for mobile work

3 years ago · 3db1a8adb5
parent 4c2a9edb2c
commit 3db1a8adb5
6 changed files with 234 additions and 62 deletions
--- a/src/.env
+++ b/src/.env
@ -0,0 +1 @@
+API_ENDPOINT = localhost:4220/moviereq
--- a/src/App.vue
+++ b/src/App.vue
@ -1,15 +1,14 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <MovieSearch></MovieSearch>
 </template>

 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import MovieSearch from './components/MovieSearch.vue';

 export default {
  name: 'App',
  components: {
-    HelloWorld
+    MovieSearch,
  }
 }
 </script>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
--- a/src/components/MovieResult.vue
+++ b/src/components/MovieResult.vue
@ -0,0 +1,113 @@
+<template>
+    <div class="movie-result">
+      <div class="movie-info">
+        <h2 class="movie-title">{{ movie.title }}</h2>
+        <p class="movie-description">{{ movie.description }}</p>
+        <button class="movie-button" @click="requestMovie">Request</button>
+      </div>
+      <div class="movie-image-container">
+        <img class="movie-image" :src="movie.image" alt="No Poster Available">
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      movie: {
+        type: Object,
+        required: true
+      }
+    },
+    methods: {
+      async requestMovie() {
+        const { title, description } = this.movie;
+        const apiUrl = "localhost:4220/moviereq";
+        console.log(apiUrl);
+        try {
+          const response = await fetch(apiUrl, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ title, description })
+          });
+
+          if (!response.ok) {
+            throw new Error('HTTP error ' + response.status);
+          }
+
+          console.log('Movie requested successfully');
+        } catch (error) {
+          console.error('Error requesting movie:', error);
+        }
+      }
+    }
+  }
+  </script>
+  
+  <style scoped>
+
+
+  .movie-result {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    padding: 16px;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+  }
+  
+  .movie-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .movie-title {
+    font-size: 24px;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+  
+  .movie-description {
+    font-size: 16px;
+    font-weight: 400;
+    margin-bottom: 8px;
+  }
+  
+  .movie-button {
+    font-size: 14px;
+    font-weight: 500;
+    text-transform: uppercase;
+    background-color: #f44336;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 8px 16px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+  
+  .movie-button:hover {
+    background-color: #d32f2f;
+  }
+  
+  .movie-image-container {
+    width: 150px;
+    height: 225px;
+    margin-left: 16px;
+    overflow: clip;
+  }
+  
+  .movie-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-position: center;
+  }
+  </style>
+  
--- a/src/components/MovieSearch.vue
+++ b/src/components/MovieSearch.vue
@ -0,0 +1,110 @@
+<template>
+  <div class="movie-search">
+    <h1 class="movie-search-header">Movie Search</h1>
+    <form class="movie-search-form" @submit.prevent="handleSubmit">
+      <input class="movie-search-input" type="text" v-model="query" placeholder="Enter a movie title...">
+      <button class="movie-search-button" type="submit">Search</button>
+    </form>
+    <div v-if="searchResults.length > 0">
+      <h2 class="movie-search-results-header">Search Results:</h2>
+      <div class="movie-search-results">
+        <movie-result v-for="result in searchResults" :key="result.id" :movie="result" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MovieResult from './MovieResult.vue';
+
+export default {
+  components: {
+    MovieResult
+  },
+  data() {
+    return {
+      query: '',
+      searchResults: []
+    }
+  },
+  methods: {
+    async handleSubmit() {
+      try {
+	//FIXME: USE APIKEY
+        const response = await fetch(`https://imdb-api.com/api/SearchMovie/APIKEY/${this.query}`);
+        const data = await response.json();
+        this.searchResults = data.results;
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.movie-search {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  background-color: #f5f5f5;
+}
+
+.movie-search-header {
+  font-size: 32px;
+  font-weight: 500;
+  margin-bottom: 32px;
+}
+
+.movie-search-form {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 32px;
+}
+
+.movie-search-input {
+  flex: 1;
+  font-size: 16px;
+  font-weight: 400;
+  padding: 8px;
+  border: none;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-right: 16px;
+}
+
+.movie-search-button {
+  font-size: 16px;
+  font-weight: 500;
+  text-transform: uppercase;
+  background-color: #f44336;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.movie-search-button:hover {
+  background-color: #d32f2f;
+}
+
+.movie-search-results-header {
+  font-size: 24px;
+  font-weight: 500;
+  margin-bottom: 16px;
+}
+
+.movie-search-results {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
+  grid-template-rows: auto;
+  grid-gap: 20px;
+  padding: 20px;
+}
+</style>
--- a/src/config.js
+++ b/src/config.js
@ -0,0 +1,7 @@
+const config = {
+    production: {
+      apiUrl: 'https://movie-api.glott.me'
+    }
+  }
+  
+  export default config;