Commit 69dffb7c authored by Duvara Nishaharan's avatar Duvara Nishaharan
Browse files

Merge branch 'master' of...

Merge branch 'master' of https://gitlab.stud.idi.ntnu.no/it2810-h21/team-28/project-3 into 8-lag-sokebar-med-filtrerings-og-sorteringsfunksjoner
parents 805f5040 0d3c92a2
node_modules
package-lock.json
\ No newline at end of file
......@@ -6,6 +6,7 @@
"flags": [],
"linkedModules": [],
"topLevelPatterns": [
"@types/axios@^0.14.0",
"bootstrap@5.1.1",
"react-bootstrap@^2.0.0-rc.0"
],
......@@ -22,6 +23,7 @@
"@restart/hooks@^0.3.26": "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.27.tgz#91f356d66d4699a8cd8b3d008402708b6a9dc505",
"@restart/hooks@^0.4.0": "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.1.tgz#716b1fd7a67650a6d4ed441b5d704b4f73ca2612",
"@restart/ui@^0.2.3": "https://registry.yarnpkg.com/@restart/ui/-/ui-0.2.3.tgz#8b68aa2ca07af799a65b288cc3c6039915c46a4c",
"@types/axios@^0.14.0": "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46",
"@types/invariant@^2.2.33": "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be",
"@types/prop-types@*": "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11",
"@types/prop-types@^15.7.3": "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11",
......@@ -31,6 +33,7 @@
"@types/react@>=16.9.11": "https://registry.yarnpkg.com/@types/react/-/react-17.0.30.tgz#2f8e6f5ab6415c091cc5e571942ee9064b17609e",
"@types/scheduler@*": "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39",
"@types/warning@^3.0.0": "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52",
"axios@*": "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6",
"bootstrap@5.1.1": "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.1.tgz#9d6eed81e08feaccedf3adaca51fe4b73a2871df",
"classnames@^2.3.1": "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e",
"csstype@^3.0.2": "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b",
......@@ -38,6 +41,7 @@
"dom-helpers@^5.0.1": "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902",
"dom-helpers@^5.2.0": "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902",
"dom-helpers@^5.2.1": "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902",
"follow-redirects@^1.14.4": "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379",
"invariant@^2.2.4": "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6",
"js-tokens@^3.0.0 || ^4.0.0": "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499",
"loose-envify@^1.0.0": "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf",
......
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "nodemon ./src/app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"express-graphql": "^0.12.0",
"graphql": "^15.7.0",
"mongoose": "^6.0.12",
"nodemon": "^2.0.14"
}
}
const express = require('express');
const mongoose = require('mongoose');
const graphqlResolver = require('./resolver.js');
const graphqlSchema = require('./schema');
const graphqlHTTP = require('express-graphql').graphqlHTTP;
const app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use(
'/graphql',
graphqlHTTP({
schema: graphqlSchema,
rootValue: graphqlResolver,
graphiql: true,
})
);
const uri = 'mongodb://bruker1:gruppe28@it2810-28.idi.ntnu.no:27017/it2810?authSource=it2810';
const options = { useNewUrlParser: true, useUnifiedTopology: true };
mongoose.connect(uri, options)
.then(() => app.listen(3001, console.log("Server is active")))
.catch((error) => {
throw error
});
//Code fetched from https://www.youtube.com/watch?v=9OPP_1eAENg&list=PL4cUxeGkcC9jpvoYriLI0bY8DOgWZfi6u&index=1
import mongoose from 'mongoose';
//mongoose.Promise = global.Promise;
function connectDB(done:Function){
// Connect to MongoDB
mongoose.connect('mongodb://bruker1:gruppe28@it2810-28.idi.ntnu.no:27017/it2810?authSource=it2810');
mongoose.connection.once('open', function() {
console.log('Connection has been made')
done();
}).on('error', function(error) {
console.log('Connection error:', error);
});
};
export default connectDB;
/*beforeEach(function(done){
mongoose.connection.collections.countries.drop(function(){
done();
});
})*/
\ No newline at end of file
//import mongoose from 'mongoose';
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
// Create Schema and Model
const CountrySchema = new Schema({
name: String,
native: String,
continent: String,
capital: String,
currency: String,
languages: Array
});
const Country = mongoose.model('country', CountrySchema);
module.exports = Country;
\ No newline at end of file
//import Country from './country';
const Country = require('./country');
module.exports = {
country: async () => {
try {
const countryFetched = await Country.find();
return countryFetched.map((country) => {
return {
...country._doc,
_id: country._id,
};
});
} catch (error) {
throw error;
}
}
}
//import { buildSchema } from 'graphql';
const { buildSchema } = require('graphql');
module.exports = buildSchema(`
type Country {
_id: ID!
name: String!
native: String
continent: String!
capital: String!
currency: String
languages: [String]
}
input CountryInput {
navn: String!
capital: String!
}
type Query {
country:[Country!]
}
type Mutation {
createCountry(country:CountryInput): Country
}
schema {
query: Query
mutation: Mutation
}
`);
\ No newline at end of file
This diff is collapsed.
......@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@navikt/ds-icons": "^0.5.8",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
......
......@@ -6,4 +6,7 @@
align-items: left;
font-size: calc(10px + 2vmin);
color: white;
}
.Layout__Content{
margin-top: 1rem;
}
\ No newline at end of file
......@@ -2,6 +2,8 @@ import React from 'react';
import { Header } from './header/Header';
import "./Layout.css"
import { Searchbar } from './searchbar/searchbar';
import { Filter } from './searchbar/Filter';
import { getData } from '../utils/APIUtil';
interface IProps {
title: string
......@@ -10,12 +12,13 @@ const Layout: React.FC<IProps> = ({
title,
children
}) => {
getData()
return (
<div className="Layout">
<React.Fragment >
<Header>
<Searchbar/>
<Filter/>
</Header>
<div className="Layout__Content">
<main>{children}</main>
......
@media only screen and (max-width: 600px) {
.Header__Logo {
display: none;
}
}
\ No newline at end of file
......@@ -16,7 +16,7 @@ export const CardContainer: FunctionComponent<IProps> = () => {
return (
<Container>
<Row xs={1} md={2} className="justify-content-md-center">
<Row xs={2} md={4} className="justify-content-md-center">
<Provider store={store}>
{cardData.map((country_data, index) =>
<Col md="auto" key={index}>
......
......@@ -7,4 +7,21 @@
width: 37.5rem;
height: 20rem;
transition: all .2s ease-in-out;
}
\ No newline at end of file
}
@media only screen and (max-width: 1000px) {
.CountryCard__card__false{
width: 14rem;
height: 8rem;
transition: all .2s ease-in-out;
}
.CountryCard__card__true{
width: 29.5rem;
transition: all .2s ease-in-out;
}
}
@media only screen and (max-width: 800px) {
.CountryCard__card__true{
width: 14rem;
transition: all .2s ease-in-out;
}
}
\ No newline at end of file
......@@ -24,11 +24,15 @@ export const CountryCard: FunctionComponent<IProps> = ({
<Card.Body>
<Card.Title>{"ddd"+ country.name}</Card.Title>
<Card.Text>
{"ppl: " + country.native}
{country.continent}
</Card.Text>
{active && <>
<Card.Text>Area: {country.continent}</Card.Text>
<Card.Text>Name: {country.name}</Card.Text>
<Card.Text>Capital: {country.capital}</Card.Text>
<Card.Text>Currecy: {country.currency}</Card.Text>
<Card.Text>Languages:
{country.languages.map((language => " " + language))}
</Card.Text>
</>
}
......
.Header__Logo {
height: 20vmin;
pointer-events: none;
margin: 15px;
}
header{
display: flex;
flex-direction: left;
align-content: center;
content: initial;
background-color: rgb( 28, 40, 51 )
}
.Header__Content{
display: flex;
justify-content: center;
align-items: center;
border: 3px solid green;
width: calc(60vw);
margin-top: 15px;
width: 100%;
height: 20vmin;
}
@media only screen and (max-width: 500px) {
.Header__Logo {
display: none;
}
.Header__Content{
height: 8rem;
}
.Header__Content{
margin-left: 1.5rem;
}
}
\ No newline at end of file
import React from 'react';
import logo from '../../logo.svg';
import globe from '../../res/globe2.png';
import "./Header.css"
export const Header: React.FC = ({
......@@ -7,7 +7,7 @@ export const Header: React.FC = ({
}) => {
return (
<header>
<img src={logo} alt="Logo" className="Header__Logo"/>
<img src={globe} alt="Logo" className="Header__Logo"/>
<div className="Header__Content">{children}</div>
</header>
);
......
.Filter__Title, .Filter__Container__closed{
display: flex;
width: 20rem;
margin-left: 2vw;
margin-top: 6px;
align-items: center;
z-index: 20;
}
.Filter__Big_Container{
display: inline-block;
position: absolute;
left: 40rem;
top: 2rem;
z-index: 20;
}
.Filter__Title, .Filter__Container__closed:hover {
cursor: pointer;
}
.Filter__Options{
margin-left: 2vw;
display: grid;
width: 15rem;
height: 9rem;
z-index: 20;
}
.Filter__Big_Buttons{
display: flex;
flex-flow: row;
height: 10vmin;
width: 50vmin;
justify-Content: space-around;
align-Items: center;
}
Button{
margin: 5px;
z-index: 20;
}
@media only screen and (max-width: 1000px) {
.Filter__Big_Container{
display: none;
}
}
@media only screen and (min-width: 1000px) {
.Filter__Container, .Filter__Container__closed{
display: none;
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment