Add date to download buttons

This commit is contained in:
Mikołaj Pich 2018-06-14 19:08:39 +02:00
parent 45296d996c
commit 36f920064d
3 changed files with 49 additions and 23 deletions

21
app.css
View file

@ -82,14 +82,18 @@ a {
max-width: 300px; max-width: 300px;
} }
.button-container {
display: inline-block;
}
.button { .button {
width: 100%; max-width: 100%;
max-width: 300px; width: 300px;
margin: 10px 0; margin: 10px 0;
background: rgb(112, 50, 50); background: rgb(112, 50, 50);
border-radius: 3px; border-radius: 3px;
color: #eee; color: #eee;
display: inline-block; display: block;
font-size: 20px; font-size: 20px;
padding: 15px 25px; padding: 15px 25px;
text-align: left; text-align: left;
@ -97,6 +101,13 @@ a {
transition: background 0.3s; transition: background 0.3s;
} }
.button__info {
padding: 0;
margin: 5px 0 0;
display: flex;
justify-content: space-between;
}
.button:hover, .button:focus, .button:active { .button:hover, .button:focus, .button:active {
background: rgb(90, 45, 45); background: rgb(90, 45, 45);
} }
@ -119,8 +130,10 @@ a {
opacity: 0.7; opacity: 0.7;
} }
[id$="version"] { .button span {
font-size: small; font-size: small;
display: flex;
justify-content: space-between;
} }
.footer { .footer {

19
app.js
View file

@ -1,16 +1,17 @@
var disableClick = function(e) {e.preventDefault()}; var disableClick = function(e) {e.preventDefault()};
var addButtonInfo = function(url, button, version, cb) { var addButtonInfo = function(url, prefix, cb) {
var buttonElement = document.querySelector(button); var buttonElement = document.querySelector("#" + prefix + "-button");
buttonElement.addEventListener("click", disableClick); buttonElement.addEventListener("click", disableClick);
var versionElement = document.querySelector(version); var versionElement = document.querySelector("#" + prefix + "-version");
versionElement.innerHTML = "Ładowanie…"; versionElement.innerHTML = "Ładowanie…";
var dateElement = document.querySelector("#" + prefix + "-date");
var res = new XMLHttpRequest(); var res = new XMLHttpRequest();
res.open("GET", url, true); res.open("GET", url, true);
res.onloadend = function () { res.onloadend = function () {
if(res.status === 200) { if(res.status === 200) {
cb(buttonElement, versionElement, res); cb(res, buttonElement, versionElement, dateElement);
} else { } else {
versionElement.innerHTML = "wersja nieznana"; versionElement.innerHTML = "wersja nieznana";
} }
@ -19,19 +20,21 @@ var addButtonInfo = function(url, button, version, cb) {
res.send(null); res.send(null);
}; };
addButtonInfo("https://api.github.com/repos/wulkanowy/wulkanowy/releases/latest", "#beta-button", "#beta-version", addButtonInfo("https://api.github.com/repos/wulkanowy/wulkanowy/releases/latest", "beta",
function(button, version, res) { function(res, button, version, date) {
var json = JSON.parse(res.responseText); var json = JSON.parse(res.responseText);
button.href = json.assets[0].browser_download_url; button.href = json.assets[0].browser_download_url;
version.innerHTML = "v" + json.name; version.innerHTML = "v" + json.name;
date.innerHTML = new Date(json.published_at).toLocaleString("pl-PL");
} }
); );
addButtonInfo("https://bitrise-redirector.herokuapp.com/v0.1/apps/daeff1893f3c8128/builds/master/artifacts/app-debug-bitrise-signed.apk/info", "#dev-button", "#dev-version", addButtonInfo("https://bitrise-redirector.herokuapp.com/v0.1/apps/daeff1893f3c8128/builds/master/artifacts/app-debug-bitrise-signed.apk/info", "dev",
function(button, version, res) { function(res, button, version, date) {
var json = JSON.parse(res.responseText); var json = JSON.parse(res.responseText);
button.href = json.expiring_download_url; button.href = json.expiring_download_url;
version.innerHTML = "Build " + json.build_number; version.innerHTML = "Build " + json.build_number;
date.innerHTML = new Date(json.finished_at).toLocaleString("pl-PL");
setTimeout(function() { setTimeout(function() {
button.href = json.public_install_page_url; button.href = json.public_install_page_url;

View file

@ -32,17 +32,27 @@
</a> </a>
<section class="section"> <section class="section">
<h3 class="section__header">Więcej opcji</h3> <h3 class="section__header">Więcej opcji</h3>
<a class="button button--beta" id="beta-button" title="Pobierz wersję beta" href="https://github.com/wulkanowy/wulkanowy/releases"> <div class="button-container">
Pobierz wersję beta<br> <a class="button button--beta" id="beta-button" title="Pobierz wersję beta" href="https://github.com/wulkanowy/wulkanowy/releases">
<span id="beta-version">v0.0.0</span> Pobierz wersję beta
</a> <p class="button__info">
<a class="button button--dev" <span id="beta-version">v0.0.0</span>
id="dev-button" <span id="beta-date"></span>
title="Pobierz wersję DEV" </p>
href="https://bitrise-redirector.herokuapp.com/v0.1/apps/daeff1893f3c8128/builds/master/artifacts/app-debug-bitrise-signed.apk"> </a>
Pobierz wersję DEV<br> </div>
<span id="dev-version">Build 0000</span> <div class="button-container">
</a> <a class="button button--dev"
id="dev-button"
title="Pobierz wersję DEV"
href="https://bitrise-redirector.herokuapp.com/v0.1/apps/daeff1893f3c8128/builds/master/artifacts/app-debug-bitrise-signed.apk">
Pobierz wersję DEV
<p class="button__info">
<span id="dev-version">Build 0000</span>
<span id="dev-date"></span>
</p>
</a>
</div>
</section> </section>
</main> </main>
<footer id="footer" class="footer"> <footer id="footer" class="footer">