style, readme edited

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
 

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

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

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,6 +51,7 @@ function Movies(props: MoviesProps){
             }}
             hasMore={MoviesStore.hasMore}
             useWindow={true}
+
             loader={ 
                 <div key="loading" className="loader">
                     Loading ...

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>

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 = '';