diff --git a/public/content/content.json b/public/content/content.json
index 7f8b260f831dd070e0bc6b12c43526a7c386bf8d..54ca419b1f6b5d2e11bf1df7a11c61de6f4025b7 100644
--- a/public/content/content.json
+++ b/public/content/content.json
@@ -25,7 +25,7 @@
{
"item": {
"title": "3D E-bike",
- "project": "ICity Project",
+ "project": "iCity Project",
"author": {
"firstName": "Joe",
"lastName": "T. Santhanavanich",
diff --git a/public/content/team.json b/public/content/team.json
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f07089b22ae9a11f7d71b1ed941e2d0a68083607 100644
--- a/public/content/team.json
+++ b/public/content/team.json
@@ -0,0 +1,26 @@
+[
+ {
+ "firstName": "Joe T.",
+ "lastName": "Santhanavanich",
+ "jobTitle_en": "Researcher",
+ "imgUrl": "/imgs/avatar/JoeSquare.jpg",
+ "profile_link": "https://www.hft-stuttgart.de/p/thunyathep-santhanavanich",
+ "researchTopics": "Smart Cities | OGC Standards | Sensors & IoT | 3D City Models | 3D Web Visualization | 3D Simulation | Big Data"
+ },
+ {
+ "firstName": "Patrick",
+ "lastName": "Würstle",
+ "jobTitle_en": "Researcher",
+ "imgUrl": "/imgs/avatar/PatrickSquare.jpg",
+ "profile_link": "https://www.hft-stuttgart.de/p/patrick-wuerstle",
+ "researchTopics": "Smart Cities | OGC Standards | Participation Platform | 3D City Models | 3D Web Visualization | 3D Simulation | Big Data"
+ },
+ {
+ "firstName": "Patrick",
+ "lastName": "Würstle",
+ "jobTitle_en": "Researcher",
+ "imgUrl": "/imgs/avatar/PatrickSquare.jpg",
+ "profile_link": "https://www.hft-stuttgart.de/p/patrick-wuerstle",
+ "researchTopics": "Smart Cities | OGC Standards | Participation Platform | 3D City Models | 3D Web Visualization | 3D Simulation | Big Data"
+ }
+]
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 4c1cd694bda020d04645d62b0bcf8dc7d18a91c9..4112125bb09a3301afba617ea11697e99249c41b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -46,7 +46,7 @@
</div>
</div>
</div>
- <div class="navbar navbar-light shadow-sm" style="background-color: #cc3125;">
+ <div class="navbar navbar-light shadow-sm" style="background-color: #ffffff;">
<div class="container d-flex justify-content-between">
<img src="imgs/hft.jpg" class="hftlogo" width="100px" >
<!-- <a href="https://www.hft-stuttgart.de" width="100px">
@@ -65,7 +65,7 @@
</div> -->
<select id="selectpicker1" class="selectpicker" data-img-src="imgs/flags/226-united-states.png"
- style="background-color: #cc3125; width: 10em; border-color:#cc3125;" data-width="fit">
+ style="background-color: #ffffff; width: 10em; border-color:#cc3125;" data-width="fit">
<option value='1' class="selectlang" data-img-src="imgs/flags/226-united-states.png"
style="background-color: white;">English</option>
<option value='2' class="selectlang" data-img-src="imgs/flags/226-united-states.png"
@@ -92,6 +92,22 @@
<p id="rgc_introduction2">The research projects at HFT Stuttgart (University of Applied Sciences Stuttgart).</p>
</div>
</section>
+
+ <!-- <div class="container col-xxl-8 px-4 py-5">
+ <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
+ <div class="col-10 col-sm-8 col-lg-6">
+ <img src="img/Mutani_2018_10.JPG" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
+ </div>
+ <div class="col-lg-6">
+ <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
+ <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+ <div class="d-grid gap-2 d-md-flex justify-content-md-start">
+ <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
+ <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
+ </div>
+ </div>
+ </div>
+ </div> -->
<div id="cont_proto" class="cont_proto">
<div id="album_one" class="album py-5 bg-light topDownPadding">
@@ -287,7 +303,7 @@
<section class="team-section text-center my-5">
<!-- Grid row -->
- <div class="row">
+ <div class="row" id="team-section">
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-lg-0 mb-5">
@@ -409,7 +425,7 @@
<p class="float-right">
<a id="rgc_backtotop" href="#">Back to top</a>
</p>
- <p>© HFT Stuttgart, 2020.</p>
+ <p>© HFT Stuttgart, 2020-2021.</p>
<a href="https://www.hft-stuttgart.de/impressum" target="_blank">Impressum</a>
<a href="https://www.hft-stuttgart.de/datenschutz" target="_blank">Datenschutz</a>
</div>
diff --git a/public/js/add_content.js b/public/js/add_content.js
index 651d0d22e4fdb0cc067a2faa50fbe06baf09e2d3..6f869d16189b3e3212368d6aca03c9ec2dd5eaab 100644
--- a/public/js/add_content.js
+++ b/public/js/add_content.js
@@ -1,63 +1,102 @@
-function addcontent(item){
- var lang_cont_person = ""
- var lang_keywords = ""
- var new_row = document.getElementById("row_main")
- if(item === undefined) {
-
- }else{
-
-
+function addcontent(item) {
+ var lang_cont_person = ""
+ var lang_keywords = ""
+ var new_row = document.getElementById("row_main")
+ if (item === undefined) {
+
+ } else {
+
+
// Prepare YouTube Link
// var array_contains_youtube = true
var YouTubeHTML = ''
if ('youtube' in item.links) { // to be replaced by if (item.YouTubelink) or so...
var YouTubelink = item.links.youtube // to be replaced by item.YouTubelink or so...
- YouTubeHTML = `<a class="btn btn-sm btn-outline-danger" href="${YouTubelink}" target="_blank">YouTube</a>`
+ YouTubeHTML = `<a class="btn btn-sm btn-outline-danger" href="${YouTubelink}" target="_blank">YouTube</a>`
}
var description = ""
- if (lang_setting == "1"){
- description = item.item.description_en
- lang_cont_person = " Contact Person"
- lang_keywords = " Keywords"
- } else if (lang_setting == "2"){
- description = item.item.description_de
- lang_cont_person = " Kontaktperson"
- lang_keywords = " Stichworte"
+ if (lang_setting == "1") {
+ description = item.item.description_en
+ lang_cont_person = " Contact Person"
+ lang_keywords = " Keywords"
+ } else if (lang_setting == "2") {
+ description = item.item.description_de
+ lang_cont_person = " Kontaktperson"
+ lang_keywords = " Stichworte"
}
// Prepare Explore Link
// var array_contains_explore_link = true
var ExploreHTML = ''
if ('demo' in item.links) { // to be replaced by if (item.YouTubelink) or so...
var ExploreLink = item.links.demo // to be replaced by item.ExploreLink or so...
- ExploreHTML = `<a class="btn btn-sm btn-outline-secondary" href="${ExploreLink}" target="_blank">Explore</a>`
+ ExploreHTML = `<a class="btn btn-sm btn-outline-secondary" href="${ExploreLink}" target="_blank">Explore</a>`
}
new_row.innerHTML = new_row.innerHTML + '<div class="col-lg-4">' +
- '<div class="card mb-4 shadow-sm extension">' +
- '<h5>'+ item.item.title +' <span class="lead text-muted"> ' + item.item.project + '</span></h5>' +
+ '<div class="card mb-4 shadow-sm extension">' +
+ '<h5>' + item.item.title + ' <span class="lead text-muted"> ' + item.item.project + '</span></h5>' +
'<img class="thumbimg" src="' + item.item.imageLink + '" alt="">' +
'<div class="card-body">' +
- '<p class="card-text-lg small">' +
- description +
- '<br>' +
- '<b><i class="fas fa-user"></i>' + lang_cont_person + '</b>: <a ' +
- ' href="'+ item.item.author.hftURL +'" target ="_blank"> ' + item.item.author.firstName +
- ' ' + item.item.author.lastName + '</a> <br>' +
- '<b><i class="fas fa-star"></i>' + lang_keywords + '</b>: ' + item.item.keywords.join(', ') + '</br>' +
- ExploreHTML + ' ' +
- YouTubeHTML +
- '</p>' +
+ '<p class="card-text-lg small">' +
+ description +
+ '<br>' +
+ '<b><i class="fas fa-user"></i>' + lang_cont_person + '</b>: <a ' +
+ ' href="' + item.item.author.hftURL + '" target ="_blank"> ' + item.item.author.firstName +
+ ' ' + item.item.author.lastName + '</a> <br>' +
+ '<b><i class="fas fa-star"></i>' + lang_keywords + '</b>: ' + item.item.keywords.join(', ') + '</br>' +
+ ExploreHTML + ' ' +
+ YouTubeHTML +
+ '</p>' +
'</div>' +
- '</div>' +
- '</div>'
+ '</div>' +
+ '</div>'
+ }
}
+
+function replaceUmlauts(value) {
+
+ value = value.replace('ä', 'ae');
+ value = value.replace('ö', 'oe');
+ value = value.replace('ü', 'ue');
+ return value;
}
-function replaceUmlauts(value)
-{
- value = value.replace('ä', 'ae');
- value = value.replace('ö', 'oe');
- value = value.replace('ü', 'ue');
- return value;
+function addTeam(item) {
+ var new_row = document.getElementById("team-section")
+ if (item === undefined) {
+
+ } else {
+
+ var html_team = ``
+ var html_team = `
+ <div class="col-lg-3 col-md-6 mb-lg-0 mb-5">
+ <div class="avatar mx-auto">
+ <img src="${item.imgUrl}" class="rounded-circle z-depth-1" width="150px">
+ </div>
+ <h5 class="font-weight-bold mt-4 mb-3">${item.firstName} ${item.lastName}</h5>
+ <p class="text-uppercase blue-text"><strong>Researcher</strong></p>
+ <a href=${item.profile_link} target="_blank">
+ <button class="btn btn-primary btn-sm profile">See full profile</button>
+ </a>
+ <p class="grey-text">Research topic: ${item.researchTopics}</p>
+ <!--
+
+ <ul class="list-unstyled mb-0">
+ <a class="p-2 fa-lg" href="https://www.researchgate.net/profile/Thunyathep-Santhanavanich" target="_blank">
+ <i class="fab fa-researchgate"></i>
+ </a>
+ <a class="p-2 fa-lg" href="https://scholar.google.com/citations?user=RKNY04EAAAAJ&hl=en" target="_blank">
+ <i class="fab fa-google"></i>
+ </a>
+ <a class="p-2 fa-lg" href="https://www.linkedin.com/in/thunyatheps/" target="_blank">
+ <i class="fab fa-linkedin"></i>
+ </a>
+ </ul>
+
+ -->
+ </div>
+ `
+ new_row.innerHTML = new_row.innerHTML + html_team
+ }
}
\ No newline at end of file
diff --git a/public/js/language.js b/public/js/language.js
index 97d9675a2f5bc1b28ecb9c8379ad98ee5f5f6c68..f79f4b3318852715280a17325718a4c2b52951ff 100644
--- a/public/js/language.js
+++ b/public/js/language.js
@@ -7,11 +7,24 @@ $('.selectpicker').change(function(){
var new_row = document.getElementById("row_main")
new_row.innerHTML = "";
var arrayLength = stuff.length;
+ console.log("translating content")
for (var i = 0; i < arrayLength; i++) {
addcontent(stuff[i]);
//Do something
}
+
+ $.getJSON("./content/team.json", function(result){
+ console.log("translating team")
+ team = result;
+ var new_row = document.getElementById("team-section")
+ new_row.innerHTML = "";
+ var arrayLength = team.length;
+ for (var i = 0; i < arrayLength; i++) {
+ addTeam(team[i]);
+ //Do something
+ }
});
+ });
// alert($(this).val());
})
diff --git a/public/js/search.js b/public/js/search.js
index 5ec623b3246a2ee4f820a1f11a0c758d6624a91b..8a663999c0439df6a3a4b59bc35deae5c51feab3 100644
--- a/public/js/search.js
+++ b/public/js/search.js
@@ -68,6 +68,7 @@ var stuff_paper = []
$(document).ready(function () {
$.getJSON("./content/content.json", function (result) {
+ console.log("content.json ==> HTML")
stuff = result;
var new_row = document.getElementById("row_main")
new_row.innerHTML = "";
@@ -77,9 +78,21 @@ $(document).ready(function () {
//Do something
}
+ $.getJSON("./content/team.json", function(result){
+ console.log("team.json ==> HTML")
+ team = result;
+ var new_row = document.getElementById("team-section")
+ new_row.innerHTML = "";
+ var arrayLength = team.length;
+ for (var i = 0; i < arrayLength; i++) {
+ addTeam(team[i]);
+ //Do something
+ }
+ });
changeLang();
});
+
// get paper content is commented out for back up
// $.getJSON("./content/paper2.json", function (result) {
// stuff_paper = result;