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