Commit 0f55b797 authored by Benzakein Jeremy's avatar Benzakein Jeremy

project finished TODO: le rapport

parent 540df80c
......@@ -5,18 +5,18 @@
<head>
<meta charset="utf-8" />
<title>Star Peolpe</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="#" aria-disabled="true">Star Peolpe</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02"
aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02"
aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample02">
......@@ -25,10 +25,13 @@
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="test.html">Test Image API</a>
<a class="nav-link" href="people.html">Les Personnages</a>
</li>
<li>
<a class="nav-link" href="rapport.html">Le Rapport</a>
</li>
<li class="nav-item">
<a class="nav-link" href="people.html">People</a>
<a class="nav-link" href="test.html">Test Bing Image API</a>
</li>
</ul>
</div>
......@@ -39,9 +42,10 @@
<div class="row">
<div class="col-6">
<h1 class="display-3">Star Peolpe</h1>
<p class="lead">Select a theme and vote for your favorite picture</p>
<p class="lead">Un Trombinoscop des personnages de Star Wars</p>
<hr class="my-4">
<p>If you want to have fun while discovering amazing pictures, you have come to the right place !</p>
<p>StarPeople est une plateforme pour chercher des information sur tous les personnages principaux comme
secondaires de Star Wars</p>
<a name="" id="" class="btn btn-dark btn-lg" href="play.html" role="button">Let's Play</a>
</div>
<div class="col-6">
......@@ -50,15 +54,18 @@
</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<p class="footer">&#169; Copyrights 2019, StarPeople, Jeremy Benzakein & Raphaël Kern, CentraleSupelec, Gif-sur-Yvette
</p>
<!--Loading scripts after the DOM for so that the page loads faster in browser-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</body>
......
......@@ -4,20 +4,20 @@
<head>
<meta charset="utf-8" />
<title>Test Person</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<title>Personnages</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">StarPeople</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02"
aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02"
aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample02">
......@@ -25,47 +25,48 @@
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="test.html">Test Image API</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="people.html">People</a>
<a class="nav-link" href="#">Les Personnages</a>
</li>
<li>
<a class="nav-link" href="rapport.html">Le Rapport</a>
</li>
<li class="nav-item">
<a class="nav-link" href="rapport.html">Rapport</a>
<a class="nav-link" href="test.html">Test Bing Image API</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid bg-warning custom-jumbo", id="addRow">
<h1 class="display-3">One random person from Star Wars</h1>
<hr class="my-2">
<div class="jumbotron jumbotron-fluid bg-warning custom-jumbo">
<table class="table" id="peopleTable">
<thead>
<tr>
<th></th>
<th>Nom</th>
<th>Année de Naissance</th>
<th>Origine</th>
<th>Taille</th>
<th>Poids</th>
</tr>
</thead>
<tbody id="peopleTableBody">
</tbody>
</table>
<thead>
<tr>
<th></th>
<th>Nom</th>
<th>Année de Naissance</th>
<th>Origine</th>
<th>Taille</th>
<th>Poids</th>
</tr>
</thead>
<tbody id="peopleTableBody">
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<p class="foot">&#169; Copyrights 2019, StarPeople, Jeremy Benzakein & Raphaël Kern, CentraleSupelec, Gif-sur-Yvette</p>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="test.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js">
</script>
<script src="people.js"></script>
</body>
</html>
\ No newline at end of file
/* jshint esversion: 8 */
const getPeopleCount = async (index) => {
let count = 0;
await $.ajax('/getPeopleCount')
.done(function (data) {
count = parseInt(data);
})
.fail(function (e) {
console.log(e);
});
return count;
};
const getPerson = async (index) => {
let person = null;
await $.ajax('/getPerson/' + index)
.done(function (data) {
person = JSON.parse(data);
})
.fail(function (e) {
console.log(e);
});
return person;
};
const getAllPeople = async () => {
var t_start = performance.now();
let count = await getPeopleCount();
let allPeople = [];
let i = 1;
while (allPeople.length < count) {
let pers = await getPerson(i);
if (pers != null) {
allPeople.push(pers);
datatable.row.add([
pers.img,
pers.name,
pers.birthYear,
pers.origin,
pers.height,
pers.mass
]).draw(true);
}
i++;
}
console.log('getAllPeople took' + (performance.now() - t_start) / 1000 + " seconds");
return allPeople;
};
let datatable;
$(() => {
//initialise paging, sorting, and searching in datatable
datatable = $('#peopleTable').DataTable({
"lengthMenu": [[5, 10, 25, -1], [5, 10, 25, "Tous"]],
//sorting by names in alphabetic order by default
order: [[ 1, "asc" ]],
columnDefs: [
//tell dataTable to render first column as HTML to show the image from the url
//disable sorting and searching of images
{
targets: 0,
render: function (url) {
return '<img src="' + url + '" class="personImg">';
},
orderable: false,
searching: false,
width: "150px"
},
{
targets:[4,5],
orderDataType: "custom-str"
}
]
});
//calling helper function that manages the API calls
getAllPeople().then(people => {console.log('all people are loaded !');})
.catch(err => {console.log(err);});
});
//definition of a custom sorting method for datatable so that it sorts masses and heights correctly
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"custom-str-pre": function ( a ) {
var x = String(a).replace("kg", "").replace("m","").replace(",","");
return parseFloat( x );
},
"custom-str-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"custom-str-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
\ No newline at end of file
......@@ -11,44 +11,58 @@ body{
color:#ffc107 !important;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
.foot {
width: 100%;
background-color: #ffc107;
color: #343a40;
color: #ffc107;
text-align: center;
vertical-align: middle;
padding-bottom: 10px;
}
#imgContainer{
max-width: 20%;
height: 200px;
max-height : 200px;
max-width: 200px;
}
.personImg{
max-height: 100px;
max-width: 150px;
border-radius: 5px;
margin : 5px;
}
.custom-jumbo{
padding-left: 20px;
padding-right: 20px;
}
/*Styling for the datatable*/
#peopleTable thead{
background: #343a40;
color: #ffdd00;
}
/*
customise sorting arrows in datatable
replace source image by custom images
*/
#peopleTable thead .sorting_asc {
/*customise sorting arrows in datatable
replace source image by custom images*/
#peopleTable>thead .sorting_asc {
background-image: url('/StarPeople/sort_asc.png');
}
#peopleTable thead .sorting_desc {
#peopleTable>thead .sorting_desc {
background-image: url('/StarPeople/sort_desc.png');
border:solid 3px #343a40;
}
#peopleTable th {
border:solid 3px #343a40;
}
#peopleTable >tbody>tr>td {
border:solid 3px #343a40;
height : 80px;
background: #ffdd00;
vertical-align: 50%;
text-align: center;
}
#peopleTable>tbody>tr {
height: 110px;
vertical-align: middle;
size: 4em;
}
#peopleTable>tbody>tr img.personImg{
max-height: 100%;
max-width: 100%;
}
\ No newline at end of file
/* jshint esversion: 8 */
const getPeopleCount = async (index) => {
let count = 0;
await $.ajax('/getPeopleCount')
.done(function(data){
count = data;
})
.fail(function(e){
console.log(e);
});
return count;
};
const getPerson = async (index) => {
let person = null;
//I am limited to 3 API call per second by the bing image search API
//HotFix: setTimeout .34 second
//await setTimeout(()=>{},400);
await $.ajax('/getPerson/'+index)
.done(function(data){
person =JSON.parse(data);
})
.fail(function(e){
console.log(e);
});
return person;
};
let datatable;
$(() => {
//initialise sorting, and searching in datatable
datatable = $('#peopleTable').DataTable({
columnDefs: [
//tell dataTable to render first column as HTML to show the image from the urldisable
{ targets: 0,
render: function(url) {
return '<img src="' + url + '" class="personImg">';
},
orderable: false
}
]
});
for (let index = 1; index < 80; index++) {
getPerson(index).then(person=>{
console.log(person);
var t = $('#peopleTable').DataTable();
t.row.add([
person.img,
person.name,
person.birthYear,
person.origin,
person.height,
person.mass
]).draw(true);
//$tbody = $('#peopleTableBody');
//$tbody.append("<tr id='person" + index + "'><td></td><td>" + person.name + "</td><td>" + person.birthYear + "</td></tr>");
}).catch(err => {
console.error(err);
});
}
});
// $(document).ready(function() {
// var t = $('#peopleTable').DataTable();
// var counter = 1;
// $('#addRow').on( 'click', function () {
// t.row.add( [
// counter +'.1',
// counter +'.2',
// counter +'.3',
// counter +'.4',
// counter +'.5'
// ] ).draw( false );
// counter++;
// } );
// // Automatically add a first row of data
// $('#addRow').click();
// } );
......@@ -5,18 +5,18 @@
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">StarPeople</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02"
aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02"
aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample02">
......@@ -33,23 +33,24 @@
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid bg-warning">
<h1 class="display-3">People from Star Wars</h1>
<hr class="my-2">
<p>More info</p>
<div class="jumbotron jumbotron-fluid bg-warning custom-jumbo">
<h1 class="display-3">Page pour tester l'API Bing Image Search</h1>
<p class="lead">
<input type="text" id="searchQuery"></input>
<a class="btn btn-primary btn-lg" href="#" role="button" id="getImage">Go</a>
</p>
<div id="imgContainer"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<p class="foot">&#169; Copyrights 2019, StarPeople, Jeremy Benzakein & Raphaël Kern, CentraleSupelec, Gif-sur-Yvette
</p>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="test.js"></script>
</body>
......
/*jshint esversion: 8, node: true */
'use strict'
'use strict';
const express = require('express-alias'); //import de la bibliothèque Express avec une extention
const app = express(); //instanciation d'une application Express
const swapi = require('swapi-node');
......@@ -39,7 +39,7 @@ app.get('/getPortrait/*', (req, res) => {
};
sendQuery()
.then(imageResults => {
console.debug(imageResults)
console.debug(imageResults);
if (imageResults == null || imageResults.value.length == 0) {
console.error("No image results were found.");
res.send(result);
......
Markdown is supported
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