diff --git a/get_online_session_communities.php b/get_online_session_communities.php index 4136b71..cf004a1 100644 --- a/get_online_session_communities.php +++ b/get_online_session_communities.php @@ -77,9 +77,11 @@ $info_arrays = generate_info_arrays($room_assignments); // $final_join_links = generate_join_links($room_assignments); - $table_html = get_table_html($info_arrays); - $title = "Self-updating list of active Session Communities"; - $final_html = create_html_page_from_html_data($table_html, $title, $timestamp); +// $modal_html = create_qr_code_modals_html($info_arrays); +// $table_html = get_table_html($info_arrays); +// $title = "Self-updating list of active Session Communities"; +// $final_html = create_html_page_from_html_data($table_html, $title, $timestamp); + $final_html = generateHTML($timestamp, $info_arrays); // print_r($wild_join_links); // print_r($servers); diff --git a/html_generator.php b/html_generator.php index a52c228..4796f2e 100644 --- a/html_generator.php +++ b/html_generator.php @@ -7,6 +7,7 @@ "" . PHP_EOL . "" . PHP_EOL . " " . PHP_EOL . + " " . PHP_EOL . " " . PHP_EOL . " " . PHP_EOL . " " . PHP_EOL . @@ -28,9 +29,6 @@ * Token + shortened pubkey | Name | Description | Users | View Links(?) | Join URL */ function get_table_html($info_arrays) { -// $jl = "http://116.203.217.101/feels?public_key=2054fa3271f27ec9e55492c85d022f9582cb4aa2f457e4b885147fb913b9c131"; -// $img_tag = get_qr_img_tag_from_join_url($jl); - $table_lines = array(); foreach($info_arrays as $id => $content) { /* @@ -57,7 +55,7 @@ " " . $content["description"] . "" . PHP_EOL . " " . $content["active_users"] . "" . PHP_EOL . " " . $content["preview_link"] . "" . PHP_EOL . -// " " . PHP_EOL; + " \"Pictogram" . PHP_EOL . " " . $content["join_link"] . "" . PHP_EOL . " " . PHP_EOL; $table_lines[] = $line; @@ -74,8 +72,8 @@ " Description" . PHP_EOL . " Users" . PHP_EOL . " Preview" . PHP_EOL . -// " QR" . PHP_EOL . - " Join URL" . PHP_EOL . + " QR" . PHP_EOL . + " Join URL" . PHP_EOL . " " . PHP_EOL; // suffix @@ -100,16 +98,25 @@ return $html; } - function get_qr_img_tag_from_join_url($join_url) { + /* + * Needed until all Community servers reliably generate QR codes again + */ + function get_qr_img_element_from_join_url($join_url) { $data = get_base64_qr_code_from_join_url($join_url); $mime = "image/png"; - $src = "data: " . $mime . ";base64," . $data; + $src = "data:" . $mime . ";base64," . $data; - $result = ""; + $result = + ""; // echo($result . PHP_EOL); + return $result; } + /* + * Use Google API to generate QR codes and encode them as base64 + */ function get_base64_qr_code_from_join_url($join_url) { // https://developers.google.com/chart/infographics/docs/qr_codes $data = urlencode($join_url); @@ -124,4 +131,56 @@ return $img_base64; } + + /* + * TODO: Description + */ + function create_qr_code_modals_html($info_arrays) { + $html = ""; + foreach($info_arrays as $id => $content) { + /* + * $id is "room token+shortened_pubkey", e.g. "example+09af" + * Each $content looks like this: + * $info_array = array( + * "name" => "Name of the room", + * "language" => "🇩🇪", + * "description" => "Some text that describes the community", + * "active_users" => 1234, + * "preview_link" => "https://example.com/r/example", + * "join_link" => "https://example.com/example?public_key=[64_hex_chars]" + * ); + */ + $img_elem = get_qr_img_element_from_join_url($content["join_link"]); // TODO: incorporate ID to use in js function + $modal_html = + "
" . PHP_EOL . + "
" . PHP_EOL . + " ×" . PHP_EOL . + " " . $img_elem . PHP_EOL . + "
" . PHP_EOL . + "
" . PHP_EOL; + + $html = $html . $modal_html; + } + + return $html; + } + + /* + * TODO: Description + */ + function generateHTML($timestamp, $info_arrays) { + $title = "Self-updating list of active Session Communities"; + + $modal_html = create_qr_code_modals_html($info_arrays); + $table_html = get_table_html($info_arrays); + + $html = + $modal_html . PHP_EOL . + $table_html . PHP_EOL; + + $final_html = create_html_page_from_html_data($html, $title, $timestamp); + + return $final_html; + } + ?> diff --git a/output/qrcode-solid.svg b/output/qrcode-solid.svg new file mode 100644 index 0000000..556a04c --- /dev/null +++ b/output/qrcode-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/output/script.js b/output/script.js index a52d0fd..1b446ab 100644 --- a/output/script.js +++ b/output/script.js @@ -5,6 +5,12 @@ function onLoad(timestamp) { createJoinLinkButtons(); } +function displayQRModal(communityID) { + var modalID = "modal_" + communityID; + modal = document.getElementById(modalID); + modal.style.display = "block"; +} + function createJoinLinkButtons() { elements = document.getElementsByClassName("td_join_url"); Array.from(elements).forEach((td_element) => { diff --git a/output/styles.css b/output/styles.css index 28f41e3..30d4bc9 100644 --- a/output/styles.css +++ b/output/styles.css @@ -5,11 +5,12 @@ #th_identifier { width:9%; } .td_identifier { font-family: monospace; } #th_name { width:13%; } -#th_language { width:16px } +#th_language { width:0% } #th_description { } -#th_users { } +#th_users { width:0% } .td_users { text-align: right; } #th_preview { width:19%; } +#th_qr { width:0%; } #th_join_url { width:15%; } .td_join_url { font-family: monospace; @@ -39,3 +40,22 @@ body { background-color: var(--session-classic-da #tbl_communities tr:nth-child(odd) { background-color: var(--session-classic-dark-gray-two); } #tbl_communities tr:nth-child(even) { background-color: var(--session-classic-dark-gray-three); } */ + + +/* */ +.qr-code-modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ +} +.qr-code-modal-content { +} +.qr-code-modal-close { + float: right; + font-size: 28px; + font-weight: bold; +} +.qr-code-modal-close:hover, +.qr-code-modal-close:focus { + cursor: pointer; +}