Skip to content

Commit

Permalink
Load sessions schedule from streameth API (#30)
Browse files Browse the repository at this point in the history 
* Load sessions schedule from streameth API

* Show rooms in different tabs, make fonts bigger for talk names and time, add links to program and streameth
  • Loading branch information
@hugo-dc
hugo-dc authored Nov 9, 2023
1 parent 1aed935 commit f099027
Show file tree
Hide file tree
Showing 7 changed files with 653 additions and 295 deletions.
242 changes: 242 additions & 0 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2219,6 +2219,248 @@ input, select, textarea {

}

/* Sessions */

.sessions {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-radius: 0.25em;
border: solid 1px rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
margin: 0 0 2em 0;
}

.sessions section {
padding: 3.5em 3em 1em 7em ;
width: 100%;
border-top: solid 1px rgba(255, 255, 255, 0.15);
position: relative;
}

.sessions section:nth-child(2n) {
border-left: solid 1px rgba(255, 255, 255, 0.15);
}

.sessions section .icon {
-moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease;
-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
-ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease;
-moz-transition-delay: 1s;
-webkit-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
position: absolute;
left: 3em;
top: 3em;
opacity: 1;
}

.sessions section:nth-child(1) .icon {
-moz-transition-delay: 0.15s;
-webkit-transition-delay: 0.15s;
-ms-transition-delay: 0.15s;
transition-delay: 0.15s;
}

.sessions section:nth-child(2) .icon {
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}

.sessions section:nth-child(3) .icon {
-moz-transition-delay: 0.45s;
-webkit-transition-delay: 0.45s;
-ms-transition-delay: 0.45s;
transition-delay: 0.45s;
}

.sessions section:nth-child(4) .icon {
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-ms-transition-delay: 0.6s;
transition-delay: 0.6s;
}

.sessions section:nth-child(5) .icon {
-moz-transition-delay: 0.75s;
-webkit-transition-delay: 0.75s;
-ms-transition-delay: 0.75s;
transition-delay: 0.75s;
}

.sessions section:nth-child(6) .icon {
-moz-transition-delay: 0.9s;
-webkit-transition-delay: 0.9s;
-ms-transition-delay: 0.9s;
transition-delay: 0.9s;
}

.sessions section:nth-child(7) .icon {
-moz-transition-delay: 1.05s;
-webkit-transition-delay: 1.05s;
-ms-transition-delay: 1.05s;
transition-delay: 1.05s;
}

.sessions section:nth-child(8) .icon {
-moz-transition-delay: 1.2s;
-webkit-transition-delay: 1.2s;
-ms-transition-delay: 1.2s;
transition-delay: 1.2s;
}

.sessions section:nth-child(9) .icon {
-moz-transition-delay: 1.35s;
-webkit-transition-delay: 1.35s;
-ms-transition-delay: 1.35s;
transition-delay: 1.35s;
}

.sessions section:nth-child(10) .icon {
-moz-transition-delay: 1.5s;
-webkit-transition-delay: 1.5s;
-ms-transition-delay: 1.5s;
transition-delay: 1.5s;
}

.sessions section:nth-child(11) .icon {
-moz-transition-delay: 1.65s;
-webkit-transition-delay: 1.65s;
-ms-transition-delay: 1.65s;
transition-delay: 1.65s;
}

.sessions section:nth-child(12) .icon {
-moz-transition-delay: 1.8s;
-webkit-transition-delay: 1.8s;
-ms-transition-delay: 1.8s;
transition-delay: 1.8s;
}

.sessions section:nth-child(13) .icon {
-moz-transition-delay: 1.95s;
-webkit-transition-delay: 1.95s;
-ms-transition-delay: 1.95s;
transition-delay: 1.95s;
}

.sessions section:nth-child(14) .icon {
-moz-transition-delay: 2.1s;
-webkit-transition-delay: 2.1s;
-ms-transition-delay: 2.1s;
transition-delay: 2.1s;
}

.sessions section:nth-child(15) .icon {
-moz-transition-delay: 2.25s;
-webkit-transition-delay: 2.25s;
-ms-transition-delay: 2.25s;
transition-delay: 2.25s;
}

.sessions section:nth-child(16) .icon {
-moz-transition-delay: 2.4s;
-webkit-transition-delay: 2.4s;
-ms-transition-delay: 2.4s;
transition-delay: 2.4s;
}

.sessions section:nth-child(17) .icon {
-moz-transition-delay: 2.55s;
-webkit-transition-delay: 2.55s;
-ms-transition-delay: 2.55s;
transition-delay: 2.55s;
}

.sessions section:nth-child(18) .icon {
-moz-transition-delay: 2.7s;
-webkit-transition-delay: 2.7s;
-ms-transition-delay: 2.7s;
transition-delay: 2.7s;
}

.sessions section:nth-child(19) .icon {
-moz-transition-delay: 2.85s;
-webkit-transition-delay: 2.85s;
-ms-transition-delay: 2.85s;
transition-delay: 2.85s;
}

.sessions section:nth-child(20) .icon {
-moz-transition-delay: 3s;
-webkit-transition-delay: 3s;
-ms-transition-delay: 3s;
transition-delay: 3s;
}

.sessions.inactive section .icon {
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}

@media screen and (max-width: 980px) {

.sessions {
display: block;
}

.sessions section {
border-top-width: 1px !important;
border-left-width: 0 !important;
width: 100%;
}

.sessions section:first-child {
border-top-width: 0 !important;
}

}

@media screen and (max-width: 736px) {

.sessions section {
padding: 2.5em 1.5em 0.1em 5.5em ;
}

.sessions section .icon {
left: 1.5em;
top: 2em;
}

}

@media screen and (max-width: 480px) {

.sessions section {
padding: 2em 1.5em 0.1em 1.5em ;
}

.sessions section .icon {
left: 0;
position: relative;
top: 0;
}

}



/* Form */

form {
Expand Down
110 changes: 110 additions & 0 deletions assets/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,116 @@

})(jQuery);

function getIstanbulTime(input_date) {
var local_time = input_date.toLocaleString('en-US', { timeZone: 'Europe/Istanbul' }).split(" ");
var am_pm = local_time[2];
var result = local_time[1].split(":");
result.pop();
return result.join(":") + " " + am_pm;
}

function getNameIds() {
var name_ids = {};
$.ajax({
'async': false,
'global': false,
'url': "/assets/speakers.json",
'dataType': "json",
'success': function (data) {
name_ids = data;
}
});
return name_ids;
}

function getSessionHtml(session, name_ids) {
var session_name = session.name;
var session_description = session.description;
var session_start_time = session.start;
var session_end_time = session.end;
var session_speakers = session.speakers;
var session_speaker_names = [];
var session_start = new Date(session_start_time);
var session_end = new Date(session_end_time);
for (var j = 0; j < session_speakers.length; j++) {
var session_speaker = session_speakers[j];
var session_speaker_name = session_speaker.name;
session_speaker_names.push(session_speaker_name);
}
var session_speaker_names_string = session_speaker_names.join(", ");
var session_start_time = getIstanbulTime(session_start);
var session_end_time = getIstanbulTime(session_end);
var times = session_start_time + " - " + session_end_time;
var session_html = "<section><h2>" + session_name + "</h2><h3>" + times + "</h3>"

for (var j = 0; j < session_speakers.length; j++) {
var session_speaker = session_speakers[j];
var session_speaker_id = session_speaker.id;
var session_speaker_name = session_speaker.name;

// TODO: Remove this when API returns the correct name
if (session_speaker_name == "Simi Vera") {
session_speaker_name = "Smriti Verma";
session_speaker_id = "smriti_verma";
session_speaker_names_string = session_speaker_names_string.replace("Simi Vera", "Smriti Verma");
}

if (session_speaker_name in name_ids) {
session_speaker_id = name_ids[session_speaker_name].picture;
}
session_html += "<img class=\"circular-square\" src=\"images/speakers/"+ session_speaker_id +".jpg\" alt=\"" + session_speaker_name + "\" />";
}

session_html +="<h4>" + session_speaker_names_string + "</h4><p>" + session_description + "</p></section>";
return session_html;
}

function loadSessions() {
var name_ids = getNameIds();

$.ajax({
url: "https://app.streameth.org/api/organizations/devconnect/events/evm_summit/sessions?stage=emirgan_1"
}).then(function(sessions) { // Main Stage
$("#sessions-main").append("<h2>Emirgan 1</h2>");
for (var i = 0; i < sessions.length; i++) {
var session = sessions[i];
session_html = getSessionHtml(session, name_ids);
$("#sessions-main").append(session_html);
}
});

$.ajax({
url: "https://app.streameth.org/api/organizations/devconnect/events/evm_summit/sessions?stage=emirgan_2"
}).then(function(sessions) { // Breakout Stage
$("#sessions-breakout").append("<h2>Emirgan 2</h2>");
for (var i = 0; i < sessions.length; i++) {
var session = sessions[i];
session_html = getSessionHtml(session, name_ids);
$("#sessions-breakout").append(session_html);
}
});
}

function showSessions(room) {
var main_stage = document.getElementById("sessions-main");
var breakout_stage = document.getElementById("sessions-breakout");
var main_room_button = document.getElementById("emirgan1-button");
var breakout_room_button = document.getElementById("emirgan2-button");

if (room == "emirgan1") {
main_stage.style.display = "block";
breakout_stage.style.display = "none";
breakout_room_button.classList.remove("disabled");
main_room_button.classList.add("disabled");
} else {
main_stage.style.display = "none";
breakout_stage.style.display = "block";
breakout_room_button.classList.add("disabled");
main_room_button.classList.remove("disabled");
}
}


function showMenu() {
var x = document.getElementById("navLinks");
if (x.style.display === "block") {
Expand Down
Loading

0 comments on commit f099027

Please sign in to comment.