Skip to content
Snippets Groups Projects
Commit 36b7e85c authored by Ian Galpin's avatar Ian Galpin
Browse files

Merge branch 'feature/COMP-90_skeleton_layout_of_final_page_design' into 'develop' 

Feature/comp 90 skeleton layout of final page design

See merge request live-projects/compendium-v2!14
parents 0e9f7ee8 9b3b1eff
Branches
Tags
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 200 additions and 140 deletions
Changelog.md
+ 8
− 0
View file @ 36b7e85c
# Changelog
All notable changes to this project will be documented in this file.
## [0.5] - 2022-12-21
- Final layout (WIP)
## [0.4] - 2022-12-06
## [0.3] - 2022-12-06
## [0.2] - 2022-11-22
- COMP-48: Added SQLAlchemy link to the survey database, including instructions to create the database locally
......
compendium_v2/static/bundle.js
+ 1
− 1
View file @ 36b7e85c
This diff is collapsed.
compendium_v2/static/bundle.js.LICENSE.txt
+ 0
− 23
View file @ 36b7e85c
......@@ -4,20 +4,6 @@
http://jedwatson.github.io/classnames
*/
/*!
* @kurkle/color v0.2.1
* https://github.com/kurkle/color#readme
* (c) 2022 Jukka Kurkela
* Released under the MIT License
*/
/*!
* Chart.js v4.0.1
* https://www.chartjs.org
* (c) 2022 Chart.js Contributors
* Released under the MIT License
*/
/**
* @license React
* react-dom.production.min.js
......@@ -57,12 +43,3 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** @license React v16.13.1
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
compendium_v2/static/images/section_data_large.png 0 → 100644
+ 0
− 0
View file @ 36b7e85c
compendium_v2/static/images/section_data_large.png

3 KiB

compendium_v2/static/images/section_reports_large.png 0 → 100644
+ 0
− 0
View file @ 36b7e85c
compendium_v2/static/images/section_reports_large.png

2.13 KiB

compendium_v2/static/index.html
+ 1
− 0
View file @ 36b7e85c
......@@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" id="herald-fonts-css" href="https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C600&amp;subset=latin%2Clatin-ext&amp;ver=2.5" type="text/css" media="all">
</head>
<body>
<div id="root"></div>
......
webapp/src/App.tsx
+ 22
− 23
View file @ 36b7e85c
import React, {ReactElement} from 'react';
import AnnualReport from './pages/AnnualReport';
import DataAnalysis from './pages/DataAnalysis';
import Navigation from './Navigation';
import About from './pages/About';
import {BrowserRouter as Router,Switch, Route} from 'react-router-dom'
import Landing from "./pages/Landing";
import ExternalPageNavBar
from "./components/global/ExternalPageNavBar";
// const api_url = window.location.origin+'/';
// console.log(api_url)
function App(): ReactElement {
return (
<Router>
<Navigation/>
<Switch>
<Route exact path="/about" component={About} />
<Route exact path='/analysis' component={DataAnalysis} />
<Route exact path="/report" component={AnnualReport} />
<Route path="*" component={About} />
</Switch>
<div>
<ExternalPageNavBar/>
<Landing/>
</Router>
);
}
</div>
// <Router>
// <Navigation/>
// <Switch>
// <Route exact path="/about" component={About} />
// <Route exact path='/analysis' component={DataAnalysis} />
// <Route exact path="/report" component={AnnualReport} />
// <Route path="*" component={Landing} />
// </Switch>
//
// </Router>
//
);
}
export default App;
export default App;
\ No newline at end of file
webapp/src/components/global/ExternalPageFooter.tsx 0 → 100644
+ 9
− 0
View file @ 36b7e85c
import React, {ReactElement} from "react";
function ExternalPageFooter(): ReactElement {
return (<div>
</div>);
}
export default ExternalPageFooter
\ No newline at end of file
webapp/src/components/global/ExternalPageNavBar.tsx 0 → 100644
+ 39
− 0
View file @ 36b7e85c
import React, {ReactElement} from "react";
import {Container, Row, Col} from "react-bootstrap";
import GeantLogo from "../../images/geant_logo_f2020_new.svg";
/**
* NavBar
*
* This NavBar is only to be used when doing development, as the main site will run inside an iframe with
* the correct menu around it
*/
function ExternalPageNavBar(): ReactElement {
return (
<div className={'external-page-nav-bar'}>
<Container>
<Row>
<Col>
<img src={GeantLogo}/>
<ul>
<li><a>NETWORK</a></li>
<li><a>SERVICES</a></li>
<li><a>COMMUNITY</a></li>
<li><a>TNC</a></li>
<li><a>PROJECTS</a></li>
<li><a>CONNECT</a></li>
<li><a>IMPACT</a></li>
<li><a>CAREERS</a></li>
<li><a>ABOUT</a></li>
<li><a>NEWS</a></li>
<li><a>RESOURCES</a></li>
</ul>
</Col>
</Row>
</Container>
</div>
);
}
export default ExternalPageNavBar;
\ No newline at end of file
webapp/src/components/graphing/BarGraph.tsx
+ 1
− 1
View file @ 36b7e85c
import React, {ReactElement, useEffect, useState} from 'react';
import React, {ReactElement} from 'react';
import {Bar} from 'react-chartjs-2';
import {DataSetProps} from './types';
......
webapp/src/components/graphing/LineGraph.tsx
+ 1
− 1
View file @ 36b7e85c
import React, {ReactElement, useEffect, useState} from 'react';
import React, {ReactElement} from 'react';
import {Line} from 'react-chartjs-2';
import {DataSetProps} from './types';
......
webapp/src/images/geant_logo_f2020_new.svg 0 → 100644
+ 16
− 0
View file @ 36b7e85c
<svg width="79" height="35" viewBox="0 0 79 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_101_15)">
<path d="M15.9 17.8C16.5 17.3 17 17.1 17.4 17.1C18.4 17.1 18.7 17.8 18.7 18.2C18.5 18.3 14.2 19.7 14 19.8C13.9 19.7 13.9 19.6 13.8 19.6C14 19.4 15.9 17.8 15.9 17.8Z" fill="white" fill-opacity="0.85"/>
<path d="M0 27C0 31.8 2.1 34.3 6.3 34.3C9.1 34.3 10.8 33.1 10.8 33L10.9 32.9V26.2H5.2V28.1C5.2 28.1 8.1 28.1 8.6 28.1C8.6 28.6 8.6 31.6 8.6 31.9C8.3 32.1 7.4 32.4 6.2 32.4C3.7 32.4 2.5 30.6 2.5 27C2.5 24.9 3.1 22.4 5.9 22.4C7.8 22.4 8.5 23.5 8.5 24.5V24.8H11.1V24.5C11.1 22.1 9 20.5 5.9 20.5C2.2 20.5 0 22.9 0 27Z" fill="white" fill-opacity="0.85"/>
<path d="M20.2 20.7H12.6V34.1H20.7V32.2C20.7 32.2 15.5 32.2 14.9 32.2C14.9 31.7 14.9 28.5 14.9 28C15.5 28 20.2 28 20.2 28V26.1C20.2 26.1 15.5 26.1 14.9 26.1C14.9 25.6 14.9 23 14.9 22.5C15.5 22.5 20.5 22.5 20.5 22.5V20.6H20.2V20.7Z" fill="white" fill-opacity="0.85"/>
<path d="M54.5 20.7H42.9C42.9 20.7 42.9 28.7 42.9 30.6C42 29 37.2 20.7 37.2 20.7H34.5V34.1H36.8C36.8 34.1 36.8 26.1 36.8 24.2C37.7 25.8 42.5 34.1 42.5 34.1H45.2C45.2 34.1 45.2 23.2 45.2 22.6C45.7 22.6 48.4 22.6 48.9 22.6C48.9 23.2 48.9 34.1 48.9 34.1H51.3C51.3 34.1 51.3 23.2 51.3 22.6C51.8 22.6 54.9 22.6 54.9 22.6V20.7H54.5V20.7Z" fill="white" fill-opacity="0.85"/>
<path d="M28.9 20.7H28.7H26.4L21.4 34.1H23.8C23.8 34.1 25.1 30.6 25.3 30.2C25.7 30.2 29.8 30.2 30.2 30.2C30.3 30.6 31.7 34.1 31.7 34.1H34L28.9 20.7ZM25.9 28.3C26.1 27.6 27.3 24.4 27.7 23.3C28.1 24.4 29.2 27.6 29.5 28.3C28.7 28.3 26.6 28.3 25.9 28.3Z" fill="white" fill-opacity="0.85"/>
<path d="M77 8C68.2 -2.9 32.6 12.5 23 16.5C22.3 16.8 21.4 16.7 20.9 15.7C21.3 16.7 22.1 17.1 23.1 16.7C35.8 11.6 66.5 0.600002 74.2 10.7C77.7 15.3 76.7 20.9 72.9 28.8C72.7 29.1 72.6 29.4 72.6 29.4C72.6 29.4 72.6 29.4 72.6 29.5C72.6 29.5 72.6 29.5 72.6 29.6C72.3 30.1 71.9 30.3 71.6 30.4C72 30.4 72.5 30.2 72.9 29.6C73 29.5 73.1 29.3 73.3 29C78.7 19.5 80.7 12.5 77 8Z" fill="white" fill-opacity="0.85"/>
<path d="M70.3 29.9C70.2 29.8 68.6 28.4 67 26.9C58.7 19 33.4 -5.3 22.4 1.1C19.3 2.9 18.8 8.2 20.7 15.2C20.7 15.3 20.8 15.4 20.8 15.5C21 16.2 21.5 16.7 22.2 16.7C21.7 16.6 21.3 16.2 21.1 15.7C21.1 15.6 21 15.5 21 15.5C21 15.4 20.9 15.3 20.9 15.1C20.9 15 20.9 14.9 20.8 14.9C19.8 9 21 5.1 23.4 3.5C32.3 -2.5 53.5 15.8 64.2 25C66.6 27.1 69.4 29.5 70.2 30.1C71.4 31 72.4 30 72.7 29.5C72.3 30.1 71.3 30.7 70.3 29.9Z" fill="white" fill-opacity="0.85"/>
</g>
<defs>
<clipPath id="clip0_101_15">
<rect width="78.9" height="34.3" fill="white"/>
</clipPath>
</defs>
</svg>
webapp/src/images/section_data_large.png 0 → 100644
+ 0
− 0
View file @ 36b7e85c
webapp/src/images/section_data_large.png

4.9 KiB

webapp/src/images/section_reports_large.png 0 → 100644
+ 0
− 0
View file @ 36b7e85c
webapp/src/images/section_reports_large.png

4.94 KiB

webapp/src/pages/AnnualReport.tsx
+ 1
− 50
View file @ 36b7e85c
import React, {useState, useEffect, ReactElement} from 'react';
import {Nren, Service, ServiceMatrix} from "../Schema";
// const api_url = window.location.origin;
// const api_url = "http://[::1]:33333";
const api_url = "https://test-compendium01.geant.org";
import React, {ReactElement} from 'react';
function AnnualReport(): ReactElement {
function api<T>(url: string, options: RequestInit): Promise<T> {
return fetch(url, options)
.then((response) => {
console.log(response)
if (!response.ok) {
return response.text().then((message) => {
console.error(`Failed to load datax: ${message}`, response.status);
throw new Error("The data could not be loaded, check the logs for details.");
});
}
return response.json() as Promise<T>;
})
}
const [nrens, setNrens] = useState<Nren[]>();
const [services, setServices] = useState<Service[][]>();
useEffect(() => {
// let timeoutRef = 0;
const loadData = () => {
api<ServiceMatrix>(api_url+'/service-matrix',{
referrerPolicy: "unsafe-url",
headers: {
"Access-Control-Allow-Origin": "*",
"Content-Type": "text/plain"
}
})
.then((serviceMatrix :ServiceMatrix)=>{
console.log('got response==>nrens');
console.log(serviceMatrix.nrens);
console.log('got response==>service');
console.log(serviceMatrix.services);
setNrens(serviceMatrix.nrens)
setServices(serviceMatrix.services)
})
}
loadData()
}, []);
return (
<div>
<h1>Annual Report</h1>
{/*{nrens?.map(nren=>(*/}
{/* <h4 key={nren.nren_id}>{nren.name}</h4>*/}
{/*))}*/}
</div>
);
}
......
webapp/src/pages/DataAnalysis.tsx
+ 2
− 28
View file @ 36b7e85c
import React, {ReactElement, useEffect, useState} from 'react';
import {Accordion, Col, Container, Form, ListGroup, Row} from "react-bootstrap";
import {Accordion, Col, Container, ListGroup, Row} from "react-bootstrap";
import BarGraph from "../components/graphing/BarGraph";
import LineGraph from "../components/graphing/LineGraph";
import {DataSetProps} from "../components/graphing/types";
import {BudgetMatrix, DataEntrySection} from "../Schema";
......@@ -82,13 +81,6 @@ function DataAnalysis(): ReactElement {
loadData()
}, [selectedDataEntry]);
const renderEntries = () => {
return (
<ul>
</ul>
);
};
const empty_bar_response = {
'data': {
'datasets': [
......@@ -106,25 +98,7 @@ function DataAnalysis(): ReactElement {
}
const barResponse: BudgetMatrix = budgetResponse !== undefined ? budgetResponse : empty_bar_response;
const data: DataSetProps = {
data: {
datasets: [
{
backgroundColor: '#114466',
borderColor: '#114466',
data: [10, 13, 18,21,16,12],
label: '2016'
},
{
backgroundColor: '#FF4466',
borderColor: '#FF4466',
data: [15, null, 13,11,11,44],
label: '2017'
},
],
labels: ['AB', 'BC', 'CD', 'DE', 'EF', 'FE']
}
}
return (
<div>
......
webapp/src/pages/Landing.tsx 0 → 100644
+ 57
− 0
View file @ 36b7e85c
import React, {ReactElement} from "react";
import {Card, Container, Row, Col} from "react-bootstrap";
import SectionDataLogo from "../images/section_data_large.png";
import SectionReportsLogo from "../images/section_reports_large.png";
function Landing(): ReactElement {
return (
<Container>
<Row className="justify-content-md-center">
<Col align={'center'}>
THE GÉANT COMPENDIUM OF NRENS
<br/>
<p>
What the Compendium is, the history of it, the aim, what you can nd in it etc etc etc etc
Lorem ipsum dolor sit amet, consec tetur adi piscing elit, sed do eiusmod tempor inc dolor sit
amet,
consec tetur adi piscing elit, sed do eiusmod tempor inc
</p>
</Col>
</Row>
<Row>
<Col>
<Container>
<Row className="justify-content-md-center">
<Col align={'center'}>
<Card style={{ width: '18rem' }}>
<Card.Img src={SectionDataLogo}></Card.Img>
<Card.Body>
<Card.Title>Compendium Data</Card.Title>
<Card.Text>The results of the Compendium Surveys
lled in annually by NRENs. Questions cover
many topics: Network, Connected Users,
Services, Standards & Policies</Card.Text>
</Card.Body>
</Card>
</Col>
<Col align={'center'}>
<Card style={{ width: '18rem' }}>
<Card.Img src={SectionReportsLogo}></Card.Img>
<Card.Body>
<Card.Title>Compendium Reports</Card.Title>
<Card.Text>A GÉANT Compendium Report is published
annually, drawing on data from the Compendium
Survey lled in by NRENs, complemented by
information from other surveys</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
</Col>
</Row>
</Container>
);
}
export default Landing;
\ No newline at end of file
webapp/src/styles.scss
+ 40
− 13
View file @ 36b7e85c
table {
min-width: 650px;
min-width: 650px;
}
thead {
background-color: lightgray;
background-color: lightgray;
}
.state_true {
background-color: lightgreen;
background-color: lightgreen;
}
.state_false {
background-color: red;
background-color: red;
}
$border-color: #064c6e !default;
......@@ -25,22 +25,23 @@ $queue_link_hover: #ffffff !default;
padding-bottom: 15px;
padding-bottom: 15px;
}
$footer-height: 75px !default;
.footer-img{
.footer-img {
width: 55px;
height:38px
height: 38px
}
.footer {
margin-top: 8px;
background-color: #064c6e;
font-size: 8px;
height:75px;
height: 75px;
color: black;
width:100%;
padding:15px;
clear:both;
width: 100%;
padding: 15px;
clear: both;
}
.footer-text {
......@@ -52,7 +53,7 @@ $footer-height: 75px !default;
padding-left: 55px;
}
.header-naviagtion{
.header-naviagtion {
display: flex;
justify-content: space-around;
align-items: center;
......@@ -61,10 +62,36 @@ $footer-height: 75px !default;
color: white
}
.nav-links{
.nav-links {
width: 50%;
display: flex;
justify-content: space-around;
justify-content: space-around;
align-items: center;
list-style: none;
}
.external-page-nav-bar {
background-color: #003753;
color: #b0cde1;
padding-top: 10px;
img {
float: left;
}
ul {
list-style: none;
float: left;
margin-bottom: 0;
li {
float: left;
padding: 10px;
a {
font-family: "Open Sans";
font-size: 14px;
font-weight: 400;
}
}
}
}
\ No newline at end of file
webapp/src/types/images.d.ts 0 → 100644
+ 2
− 0
View file @ 36b7e85c
declare module '*png';
declare module '*svg';
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment