Created
March 1, 2024 15:05
-
-
Save parduz/b72fda8729f0a24c0b143b0680d6185d to your computer and use it in GitHub Desktop.
Una semplice pagina HTML che ottiene da EliteBGS gli assets della Flotta Stellare, e ne mostra la data dell'ultimo aggiornamento
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- SVG Symbols --> | |
| <svg style="display: none" version="2.0"> | |
| <defs> | |
| <symbol id="SurfacePort" viewbox="0 0 740 740"> | |
| <g id="gmain" stroke="black" stroke-width="60" fill="none" > | |
| <path d="M 0,710 H 740" id="floor" /> | |
| <path d="M 90,570 V 710 H 350 V 570 Z" id="small_left" /> | |
| <path d="m 350,450 v 260 h 300 V 450 Z" id="mid_right" /> | |
| <path d="M 210,570 V 160 h 210 v 290" id="big_center" /> | |
| <line x1="210" y1="370" x2="330" y2="370" id="window1" /> | |
| <line x1="210" y1="260" x2="330" y2="260" id="window2" /> | |
| <line x1="530" y1="570" x2="650" y2="570" id="window3" /> | |
| </g> | |
| </symbol> | |
| <symbol id="Settlement" viewbox="0 0 740 740"> | |
| <g id="gmain" stroke="black" stroke-width="60" fill="none" > | |
| <path d="M 0,710 H 740" id="floor" /> | |
| <path d="M 60,710 V 470 h 330 v 240" id="big_left" /> | |
| <path d="M 680,710 V 520 H 390" id="small_right" /> | |
| <line x1="630" y1="520" x2="630" y2="230" id="chimney_1" /> | |
| <line x1="480" y1="520" x2="480" y2="360" id="chimney_2" /> | |
| <path d="M 70,580 H 230" id="window" /> | |
| </g> | |
| </symbol> | |
| <symbol id="Coriolis" viewbox="0 0 740 740"> | |
| <g id="gmain" stroke="black" stroke-width="60" fill="none" > | |
| <path d="M 30,370 70,70 370,30 670,70 710,370 670,670 370,710 70,670 Z" id="outer" /> | |
| <path d="M 250,375 H 490" id="slot" /> | |
| <path d="M 30,370 370,30 710,370 370,710 Z" id="face" stroke-width="30" /> | |
| </g> | |
| </symbol> | |
| <symbol id="Ocellus" viewbox="0 0 740 740"> | |
| <g id="gmain" stroke="black" stroke-width="60" fill="none" > | |
| <circle cx="370" cy="370" r="340" id="outer" /> | |
| <circle cx="370" cy="370" r="180" id="face" stroke-width="30"/> | |
| <path d="M 250,370 H 490" id="slot" /> | |
| </g> | |
| </symbol> | |
| <symbol id="Orbis" viewbox="0 0 740 740"> | |
| <g id="gmain" stroke="black" stroke-width="60" fill="none" > | |
| <path d="M 250,370 H 490" id="slot" /> | |
| <circle cx="370" cy="370" r="340" id="outer" /> | |
| <path d="M 214.11543,460 75.551363,540" id="raggio3" /> | |
| <path d="m 525.88457,460 138.56407,80" id="raggio2" /> | |
| <path d="M 370,190 V 30" id="raggio1" /> | |
| <circle cx="370" cy="370" r="180" id="face" stroke-width="30"/> | |
| </g> | |
| </symbol> | |
| <symbol id="Outpost" viewbox="0 0 740 740"> | |
| <g id="gmain" stroke="black" stroke-width="60" fill="none" > | |
| <path d="M 710,730 710,270 H 510 v 200 l 140,150 h 60" id="body"/> | |
| <path d="m 30,420 v -140 h 20 v 140 z" id="panel1" /> | |
| <path d="m 150,420 v -140 h 20 v 140 z" id="panel2" /> | |
| <path d="m 270,420 v -140 h 20 v 140 z" id="panel3" /> | |
| <path d="m 390,420 v -140 h 20 v 140 z" id="panel4" /> | |
| <path d="M 50,350 H 510" id="arm" /> | |
| <path d="M 610,270 V 20" id="top" /> | |
| <path d="M 540,30 H 680" id="hat" /> | |
| <path d="m 640,150 h 60" id="bridge" /> | |
| <path d="M 700,90.000001 V 210" id="right" /> | |
| </g> | |
| </symbol> | |
| </defs> | |
| <!-- to make the circle-arrow-left.svg file also usable as image: --> | |
| <use href="#SurfacePort"/> | |
| <use href="#Settlement"/> | |
| <use href="#Coriolis"/> | |
| <use href="#Ocellus"/> | |
| <use href="#Orbis"/> | |
| </svg> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <style type="text/css"> | |
| * {margin: 0; padding: 0;} | |
| body {background: #111; color: #0AF; font-family: 'Eurostile Lt Std 2', 'Roboto Condensed', sans-serif;; margin: 10px;} | |
| table {border: solid 2px #06A; border-collapse: collapse; width: 100%} | |
| td, th {border: solid 1px #048; padding: 0.2em 0.4em;} | |
| h1, h2, h3, h4, h5, h6 {color: orange;} | |
| #gmain {stroke: #777;} | |
| .odyssey #gmain {stroke: #0FF !important;} | |
| .label, th {color: #0BC;} | |
| .date {color: white; font-weight: bold;} | |
| .systems, .stations {padding: 0; font-weight: bold; font-size: 1.2em; vertical-align: top;color: orange;} | |
| .own {color: #2A4;} | |
| .notown {color: #A42;} | |
| .CellWithComment{position:relative;} | |
| .CellComment{ | |
| display:none; | |
| position:absolute; | |
| z-index:100; | |
| border: dotted 2px yellow; | |
| padding:3px; | |
| background-color: #420; | |
| color:yellow; | |
| top:20px; | |
| left:20px; | |
| white-space: nowrap; | |
| } | |
| .CellWithComment:hover span.CellComment{display:block;} | |
| #systemsData {display: none;} | |
| </style> | |
| <title>Censimento Assets Flotta Stellare</title> | |
| <script> | |
| //-------------------------------------------------------------------------------------- | |
| // const fetchJSON(url, options = {}) => | |
| // fetch(url, options).then(res => res.json()) | |
| //-------------------------------------------------------------------------------------- | |
| async function GetFactionSystems() { | |
| console.log("GetFactionSystems"); | |
| // Storing response | |
| const response = await fetch('https://elitebgs.app/api/ebgs/v5/factions?name=Flotta%20Stellare'); | |
| // Storing data in form of JSON | |
| var data = await response.json(); | |
| await showSystems(data); | |
| console.log("Close loader"); | |
| if (response) { | |
| hideloader(); | |
| } | |
| } | |
| //-------------------------------------------------------------------------------------- | |
| async function GetSystemStations(systemName) { | |
| // Storing response | |
| const systemStations = await fetch('https://elitebgs.app/api/ebgs/v5/stations?system='+systemName); | |
| // Storing data in form of JSON | |
| var data = await systemStations.json(); | |
| return showStations(data); | |
| } | |
| //-------------------------------------------------------------------------------------- | |
| // Function to hide the loader | |
| function hideloader() { | |
| document.getElementById('loading').style.display = 'none'; | |
| document.getElementById('systemsData').style.display = 'table'; | |
| } | |
| //-------------------------------------------------------------------------------------- | |
| // Function to define innerHTML for HTML table | |
| async function showSystems(data) { | |
| let tab = | |
| `<thead><tr> | |
| <th>System </th> | |
| <th>Stations </th> | |
| </tr></thead> | |
| <tbody> | |
| `; | |
| // Loop to access all systems | |
| for (let r of data.docs[0].faction_presence) { | |
| //let r = data.docs[0].faction_presence[0]; // to test just one system | |
| // Show what system we're loading in the loader | |
| document.getElementById("sysloading").innerHTML = r.system_name; | |
| tab += `<tr><td class='systems'><table><thead><tr><th colspan=2> | |
| <h2>${r.system_name}</h2></th></tr></thead><tbody> | |
| <tr><td class='label'>state </td><td> ${r.state } </td></tr> | |
| <tr><td class='label'>inf </td><td> ${(r.influence*100).toFixed(2) }% </td></tr> | |
| <tr><td class='label'>active states </td> ${showStates(r.active_states) } </tr> | |
| <tr><td class='label'>pending states </td> ${showStates(r.pending_states) } </tr> | |
| <tr><td class='label'>recovering states </td> ${showStates(r.recovering_states)} </tr> | |
| <tr><td class='label'>conflicts </td> ${showConflicts(r.conflicts) } </tr> | |
| <tr><td class='label'>updated at </td> ${showDate(r.updated_at) } </tr> | |
| </tbody></table></td>`; | |
| // Now add the stations | |
| tab += `<td class="stations">` | |
| tab += await GetSystemStations(r.system_name); | |
| tab += `</td></tr>`; | |
| } | |
| tab += `</tbody>`; | |
| // Setting innerHTML as tab variable | |
| document.getElementById("systemsData").innerHTML = tab; | |
| } | |
| //-------------------------------------------------------------------------------------- | |
| function showStations(data) { | |
| let tab = | |
| `<table><thead><tr> | |
| <th>name </th> | |
| <th>type </th> | |
| <th>state </th> | |
| <th>government </th> | |
| <th>economy </th> | |
| <th>updated at </th> | |
| </tr></thead>`; | |
| // Loop to access all stations | |
| tab += `<tbody>`; | |
| for (let r of data.docs) { | |
| if (r.controlling_minor_faction == "flotta stellare") { | |
| tab += `<tr class="own">`; | |
| }else{ | |
| tab += `<tr class="notown">`; | |
| } | |
| tab += ` | |
| <td> ${showStation(r.name,r.type) } </td> | |
| <td> ${r.type } </td> | |
| <td> ${r.state } </td> | |
| <td> ${r.government.replaceAll('$government_','')} </td> | |
| `; | |
| tab += showEconomies(r.all_economies); | |
| tab += showDate(r.updated_at); | |
| tab += ` | |
| </tr>`; | |
| } | |
| tab += `</tbody></table>`; | |
| return tab; | |
| } | |
| //-------------------------------------------------------------------------------------- | |
| function showStates(states) { | |
| let str = `<td class="CellWithComment">`; | |
| let spanstr =`<span class="CellComment">`; | |
| if (states.length<1) { | |
| str += `-</td>`; | |
| return str; | |
| } | |
| for (let s of states) { | |
| if('trend' in s) { | |
| str += `${s.state} `; | |
| spanstr += `${s.state} trend:<b>${s.trend}</b></br>`; | |
| }else{ | |
| str += `${s.state} `; | |
| spanstr += `${s.state}</br>`; | |
| } | |
| } | |
| spanstr += `</span>`; | |
| str += `${spanstr}</td>`; | |
| return str; | |
| } | |
| //-------------------------------------------------------------------------------------- | |
| function showConflicts(conflict) { | |
| let str = `<td class="CellWithComment">`; | |
| let spanstr =`<span class="CellComment">`; | |
| if (conflict.length<1) { | |
| str += `-</td>`; | |
| return str; | |
| } | |
| for (let c of conflict) { | |
| str += `${c.status} ${c.type}`; | |
| spanstr += `Opponent: <b>${c.opponent_name}</b></br> | |
| Stake: <b>${c.stake}</b></br> | |
| Days won: <b>${c.days_won}</b></br> | |
| `; | |
| } | |
| spanstr += `</span>`; | |
| str += `${spanstr}</td>`; | |
| return str; | |
| } | |
| //-------------------------------------------------------------------------------------- | |
| function showDate(updated) { | |
| var today = new Date(); | |
| var upd = new Date(updated); | |
| var Difference_In_Days = ( (today.getTime() - upd.getTime()) / (1000 * 3600 * 24) ).toFixed(0); | |
| let str = `<td class="CellWithComment date" style="background-color: rgb(`; | |
| var r = GetRed(Difference_In_Days); | |
| var g = GetGreen(Difference_In_Days); | |
| var b = 0; | |
| str += `${r}, ${g}, ${b});">`; | |
| let spanstr =`<span class="CellComment">${Difference_In_Days} days ago</span>`; | |
| str += upd.toLocaleDateString('it-it', { day:"numeric", year:"numeric", month:"short"}); | |
| str += `${spanstr}</td>`; | |
| return str; | |
| } | |
| //-------------------------------------------------------------------------------------- | |
| function showEconomies(economies) { | |
| let str = `<td class="CellWithComment">`; | |
| if (economies.length<1) { | |
| str += `-</td>`; | |
| return str; | |
| } | |
| if (economies.length==1) { | |
| str += `${economies[0].name.replaceAll('$economy_','').replaceAll(';','') }`; | |
| }else{ | |
| for (let e of economies) { | |
| str += `${e.name.replaceAll('$economy_','').replaceAll(';','')} (${(e.proportion*100).toFixed(0)}%) </br> `; | |
| } | |
| } | |
| str += `</td>`; | |
| return str; | |
| } | |
| //-------------------------------------------------------------------------------------- | |
| function GetGreen(input) { | |
| // Map the input range [30, 60] to the output range [vmax, 0] | |
| let vmax = 192; | |
| let v = Math.round(((60 - input) / (60 - 30)) * vmax); | |
| if (v<0) v=0; if (v>vmax) v=vmax; | |
| return v; | |
| } | |
| //-------------------------------------------------------------------------------------- | |
| function GetRed(input) { | |
| // Map the input range [30, 60] to the output range [0, vmax] | |
| let vmax = 255; | |
| let v = Math.round(((input - 30) / (60 - 30)) * vmax); | |
| if (v<0) v=0; if (v>vmax) v=vmax; | |
| return v; | |
| } | |
| //-------------------------------------------------------------------------------------- | |
| function showStation(name,type) { | |
| let sid = ''; | |
| let scl = ''; | |
| switch(type) { | |
| case 'outpost' : sid = 'Outpost' ; break; | |
| case 'coriolis' : sid = 'Coriolis' ; break; | |
| case 'orbis' : sid = 'Orbis' ; break; | |
| case 'bernal' : | |
| case 'ocellus' : sid = 'Ocellus' ; break; | |
| case 'onfootsettlement' : sid = 'Settlement' ; scl = 'class="odyssey"'; break; | |
| case 'surfacestation' : | |
| case 'craterport' : | |
| case 'crateroutpost' : sid = 'SurfacePort'; break; | |
| default : sid = 'unknown' ; break; | |
| } | |
| let str = ` | |
| <svg ${scl} width="1.2em" height="1.2em" version="2.0"> | |
| <use href="#${sid}" /></svg> ${name}`; | |
| return str; | |
| //-------------------------------------------------------------------------------------- | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container text-primary bg-dark bg-gradient shadow min-vh-100 py-2 "data-bs-theme="dark"> | |
| <h1 id="System presence">Censimento Flotta Stellare</h1> | |
| <!-- Here a loader is created which loads till response comes --> | |
| <div class="d-flex justify-content-center"> | |
| <div class="spinner-border" role="status" id="loading"> | |
| <span class="sr-only">Loading...</span> | |
| <span class="sr-only" id="sysloading"></span> | |
| </div> | |
| </div> | |
| <!-- table for showing data --> | |
| <table id="systemsData" class="table"></table> | |
| </div> | |
| <script type="text/javascript"> | |
| GetFactionSystems(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment