Ce serveur Gitlab sera éteint le 30 juin 2020, pensez à migrer vos projets vers les serveurs gitlab-research.centralesupelec.fr et gitlab-student.centralesupelec.fr !

Commit 540df80c authored by Benzakein Jeremy's avatar Benzakein Jeremy

picture in datatable

parent d16dff83
......@@ -46,6 +46,9 @@
<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">
......
......@@ -3,12 +3,12 @@ body{
}
#banner{
background-color: #ffdd00;
background-color: #ffc107;
color: #343a40;
}
.navbar-dark .navbar-brand{
color:#ffdd00 !important;
color:#ffc107 !important;
}
.footer {
......@@ -16,7 +16,7 @@ body{
left: 0;
bottom: 0;
width: 100%;
background-color: #ffdd00;
background-color: #ffc107;
color: #343a40;
text-align: center;
vertical-align: middle;
......@@ -26,7 +26,29 @@ body{
max-width: 20%;
}
.personImg{
max-height: 100px;
max-width: 150px;
border-radius: 5px;
margin : 5px;
}
.custom-jumbo{
padding-left: 20px;
padding-right: 20px;
}
#peopleTable thead{
background: #343a40;
color: #ffdd00;
}
/*
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 {
background-image: url('/StarPeople/sort_desc.png');
}
\ No newline at end of file
......@@ -17,7 +17,7 @@ const getPerson = async (index) => {
//I am limited to 3 API call per second by the bing image search API
//HotFix: setTimeout .34 second
await setTimeout(()=>{},340);
//await setTimeout(()=>{},400);
await $.ajax('/getPerson/'+index)
.done(function(data){
......@@ -34,7 +34,15 @@ $(() => {
//initialise sorting, and searching in datatable
datatable = $('#peopleTable').DataTable({
scrollCollapse: true
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
}
]
});
......@@ -44,9 +52,12 @@ $(() => {
console.log(person);
var t = $('#peopleTable').DataTable();
t.row.add([
"null",
person.img,
person.name,
person.birthYear
person.birthYear,
person.origin,
person.height,
person.mass
]).draw(true);
//$tbody = $('#peopleTableBody');
......
......@@ -29,7 +29,7 @@ app.get('/getPeopleCount',(req, res)=>{
app.get('/getPortrait/*', (req, res) => {
const serviceKey = "e88b02b0a83143d294ac278ced6c1c13";
const defaultPic = "https://forums.roku.com/styles/canvas/theme/images/no_avatar.jpg";
let searchTerm = req.url.split('/').pop();
let searchTerm = removeAccents(req.url.split('/').pop());
let credentials = new CognitiveServicesCredentials(serviceKey);
let imageSearchClient = new Search.ImageSearchClient(credentials);
let result = defaultPic;
......
......@@ -10,7 +10,11 @@ exports.getPers = async (index) => {
let personObj;
await swapi.getPerson(index)
.then(pers=>{
personObj = new Person(pers.name, pers.birth_year, pers.height, pers.mass);
let n = pers.name;
let by= pers.birth_year;
let h =(pers.height != "unknown")? pers.height+"m":pers.height;
let m =(pers.mass != "unknown")? pers.mass+"kg":pers.mass;
personObj = new Person(n, by, h, m);
return pers.getHomeworld();
})
.then(hw=>{
......@@ -42,7 +46,15 @@ const getImageFromName = async (name)=>{
if (searchResult == null || searchResult.value.length == 0) {
console.error("No image results were found.");
} else {
result = searchResult.value[0].contentUrl;
const resultLength = searchResult.value.length;
/*
selcting a random picture from the search results
selecting the first element did not always give me a relevant picture
picking them at random, we found more relevant images
*/
let randomIndex = Math.floor(Math.random()*resultLength);
result = searchResult.value[randomIndex].contentUrl;
}
})
.catch(err =>{
......
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