From 6dd2f5efe21fc2e7b7d4fcb70b8b88640e08afeb Mon Sep 17 00:00:00 2001
From: aradjafari <arad.jafari@gmail.com>
Date: Fri, 29 Oct 2021 21:52:17 +0200
Subject: [PATCH] style, readme edited

---
 README.md                            |  1 +
 client/src/App.css                   | 10 +++++++---
 client/src/components/Header.tsx     |  2 +-
 client/src/components/Movies.tsx     | 14 +++-----------
 client/src/components/PrintTable.tsx |  6 ++++++
 client/src/components/services.ts    | 11 +++++++++++
 6 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 34482b0..d54f25b 100644
--- a/README.md
+++ b/README.md
@@ -37,6 +37,7 @@ We tried to design it as simple and intuitively as possible so that any user wil
 
 ## Deployment
 We deployed the client APP into NTNUs users server by createing an Apache server and pushed the build folder directly to /tmp folder (Using SSH) and then copied to /var/www/html/ folder. For the server, we have used "forever" for running the server. We manualy uploaded server files to ntnuhome folder and then by "tsc src/server.ts" tried to build/convert the .ts files to .js files. Finally "forever start src/server.js" has started the server.
+*OBS: On remote server, for starting the server change ("start": "nodemon src/server_local.ts --exec ts-node") with ("start": "forever start src/server.ts") in package.json
 
 ## Available Scripts
 
diff --git a/client/src/App.css b/client/src/App.css
index d256666..fdc1d5d 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -62,15 +62,15 @@ table {
 
 th {
   color: white;
-  background-color: green;
+  background-color: rgb(20, 16, 63);
 }
 
 tr:nth-child(even) {
-  background-color: #Cdeadd;
+  background-color: #cdd1ea;
 }
 
 table, th, td {
-  border: 1px solid #Cdeadd;
+  border: 1px solid #cdd6ea;
   padding: 1em;
   overflow: visible;
   word-wrap: break-word;
@@ -86,3 +86,7 @@ table th:second-child{
   width: 60%;
 }
 
+.thumbnails{
+  width: 5vw;
+  height: auto;
+}
\ No newline at end of file
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 018fea9..6ceb45c 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -57,7 +57,7 @@ class Header extends React.Component<MoviesProps, MyState> {
     }
 
     search = () => {
-        this.getMoviesBySearch('title genre year', this.state.inputTitle, this.state.inputGenre, this.state.checkbox1_checked);
+        this.getMoviesBySearch('title genre year director_first_name director_last_name description cover_image', this.state.inputTitle, this.state.inputGenre, this.state.checkbox1_checked);
     }
 
     // returns movies by given field
diff --git a/client/src/components/Movies.tsx b/client/src/components/Movies.tsx
index 31db912..2591a68 100644
--- a/client/src/components/Movies.tsx
+++ b/client/src/components/Movies.tsx
@@ -19,19 +19,10 @@ function Movies(props: MoviesProps){
         }
     }, []);
 
-    // generates GraphQL query for getting all movies
-    function generateAllMoviesQuery(lim: number){
-        return `
-            query {
-                getAllMovies(lim: ${lim}) {
-                    title,genre,year
-                }
-            }`
-    }
 
     // returns all movies from backend
     function getAllMovies(params: any) {
-        services.queryFetch(generateAllMoviesQuery(params.lim))
+        services.queryFetch(services.generateAllMoviesQuery(params.lim))
         .then(res => res.json())
         // .then(res => setMovies(res.data.getAllMovies))
         .then(res => {
@@ -60,7 +51,8 @@ function Movies(props: MoviesProps){
             }}
             hasMore={MoviesStore.hasMore}
             useWindow={true}
-            loader={
+
+            loader={ 
                 <div key="loading" className="loader">
                     Loading ...
                 </div>
diff --git a/client/src/components/PrintTable.tsx b/client/src/components/PrintTable.tsx
index cb02e1f..fc2ecb6 100644
--- a/client/src/components/PrintTable.tsx
+++ b/client/src/components/PrintTable.tsx
@@ -7,6 +7,9 @@ function PrintTable(props: any) {
                 <th>Title</th>
                 <th>Genre</th>
                 <th>Year released</th>
+                <th>Director</th>
+                <th>Description</th>
+                <th>Thumbnail</th>
             </tr>
             </thead>
             <tbody>{
@@ -15,6 +18,9 @@ function PrintTable(props: any) {
                         <td>{row.title}</td>
                         <td>{row.genre}</td>
                         <td>{row.year}</td>
+                        <td>{row.director_first_name + ' ' + row.director_last_name}</td>
+                        <td>{row.description}</td>
+                        <td><img className="thumbnails" src = {row.cover_image} alt={row.title}></img></td>
                     </tr>;  
                 })
             }</tbody></table>
diff --git a/client/src/components/services.ts b/client/src/components/services.ts
index 5c2a692..64f3d5c 100644
--- a/client/src/components/services.ts
+++ b/client/src/components/services.ts
@@ -20,6 +20,17 @@ export enum ColumnType{
     Description
 }
 
+// generates GraphQL query for getting all movies
+export function generateAllMoviesQuery(lim: number){
+        return `
+            query {
+                getAllMovies(lim: ${lim}) {
+                    title,genre,year,director_first_name,director_last_name,description,cover_image
+                }
+            }`
+    }
+
+
 // generates custom GraphQL query based on field, value of given field, and what data is needed
 export function generateQuery(columnType: ColumnType, value: string, neededData: string){
     let column = '';
-- 
GitLab