mirror/maloja
1
0
Fork 0
mirror of https://github.com/krateng/maloja.git synced 2023-08-10 21:12:55 +03:00
Code Issues Projects Releases Wiki Activity

Modularized on-page range selector and added to artist page

Browse Source
This commit is contained in:
Krateng 2019-04-30 17:23:09 +02:00
parent d51441d508
commit 9f54b1711c
5 changed files with 127 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
website/artist.html
View File

@ -4,6 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Maloja - KEY_ARTISTNAME</title> <title>Maloja - KEY_ARTISTNAME</title>
<script src="javascript/rangeselect.js"></script>
</head> </head>
<body> <body>
@ -32,11 +33,34 @@
<tr> <tr>
<td> <td>
<h2><a href='/pulse?artist=KEY_ENC_ARTISTNAME&step=year&trail=1'>Pulse</a></h2> <h2><a href='/pulse?artist=KEY_ENC_ARTISTNAME&step=year&trail=1'>Pulse</a></h2>
KEY_PULSE
<span onclick="showRange('pulse','days')" class="stat_selector_pulse selector_pulse_days">7 days</span>
| <span onclick="showRange('pulse','weeks')" class="stat_selector_pulse selector_pulse_weeks">12 weeks</span>
| <span onclick="showRange('pulse','months')" class="stat_selector_pulse selector_pulse_months" style="opacity:0.5;">12 months</span>
| <span onclick="showRange('pulse','years')" class="stat_selector_pulse selector_pulse_years">10 years</span>
<br/><br/>
<span class="stat_module_pulse pulse_months">KEY_PULSE_MONTHS</span>
<span class="stat_module_pulse pulse_days" style="display:none;">KEY_PULSE_DAYS</span>
<span class="stat_module_pulse pulse_years" style="display:none;">KEY_PULSE_YEARS</span>
<span class="stat_module_pulse pulse_weeks" style="display:none;">KEY_PULSE_WEEKS</span>
</td> </td>
<td> <td>
<!-- We use the same classes / function calls here because we want it to switch together with pulse -->
<h2><a href='/performance?artist=KEY_ENC_CREDITEDARTISTNAME&step=year&trail=1'>Performance</a></h2> <h2><a href='/performance?artist=KEY_ENC_CREDITEDARTISTNAME&step=year&trail=1'>Performance</a></h2>
KEY_PERFORMANCE <span onclick="showRange('pulse','days')" class="stat_selector_pulse selector_pulse_days">7 days</span>
| <span onclick="showRange('pulse','weeks')" class="stat_selector_pulse selector_pulse_weeks">12 weeks</span>
| <span onclick="showRange('pulse','months')" class="stat_selector_pulse selector_pulse_months" style="opacity:0.5;">12 months</span>
| <span onclick="showRange('pulse','years')" class="stat_selector_pulse selector_pulse_years">10 years</span>
<br/><br/>
<span class="stat_module_pulse pulse_months">KEY_PERFORMANCE_MONTHS</span>
<span class="stat_module_pulse pulse_days" style="display:none;">KEY_PERFORMANCE_DAYS</span>
<span class="stat_module_pulse pulse_years" style="display:none;">KEY_PERFORMANCE_YEARS</span>
<span class="stat_module_pulse pulse_weeks" style="display:none;">KEY_PERFORMANCE_WEEKS</span>
</td> </td>
</tr> </tr>
</table> </table>

35
website/artist.py
View File

@ -1,5 +1,6 @@
import urllib import urllib
import database import database
from malojatime import today,thisweek,thismonth,thisyear
def instructions(keys): def instructions(keys):
@ -46,24 +47,46 @@ def instructions(keys):
html_scrobbles, _, _ = module_scrobblelist(artist=artist,max_=10,earlystop=True) html_scrobbles, _, _ = module_scrobblelist(artist=artist,max_=10,earlystop=True)
# pulse and rankings
html_pulse = module_pulse(**filterkeys,step="year",stepn=1,trail=1) html_pulse = module_pulse(**filterkeys,step="year",stepn=1,trail=1)
html_pulse_days = module_pulse(**filterkeys,max_=7,since=today().next(-6),step="day",trail=1)
html_pulse_weeks = module_pulse(**filterkeys,max_=12,since=thisweek().next(-11),step="week",trail=1)
html_pulse_months = module_pulse(**filterkeys,max_=12,since=thismonth().next(-11),step="month",trail=1)
html_pulse_years = module_pulse(**filterkeys,max_=10,since=thisyear().next(-9),step="year",trail=1)
html_performance = module_performance(artist=credited,step="year",stepn=1,trail=1) html_performance = module_performance(artist=credited,step="year",stepn=1,trail=1)
html_performance_days = module_performance(**filterkeys,max_=7,since=today().next(-6),step="day",trail=1)
html_performance_weeks = module_performance(**filterkeys,max_=12,since=thisweek().next(-11),step="week",trail=1)
html_performance_months = module_performance(**filterkeys,max_=12,since=thismonth().next(-11),step="month",trail=1)
html_performance_years = module_performance(**filterkeys,max_=10,since=thisyear().next(-9),step="year",trail=1)
replace = { replace = {
# info
"KEY_ARTISTNAME":keys["artist"], "KEY_ARTISTNAME":keys["artist"],
"KEY_ENC_ARTISTNAME":urllib.parse.quote(keys["artist"]), "KEY_ENC_ARTISTNAME":urllib.parse.quote(keys["artist"]),
"KEY_ENC_CREDITEDARTISTNAME":urllib.parse.quote(credited), "KEY_ENC_CREDITEDARTISTNAME":urllib.parse.quote(credited),
"KEY_IMAGEURL":imgurl, "KEY_IMAGEURL":imgurl,
"KEY_DESCRIPTION":"", "KEY_DESCRIPTION":"",
"KEY_MEDALS":html_medals,
"KEY_TRACKLIST":html_tracks,
"KEY_PULSE":html_pulse,
"KEY_PERFORMANCE":html_performance,
"KEY_SCROBBLES":scrobbles, "KEY_SCROBBLES":scrobbles,
"KEY_POSITION":pos,
"KEY_ASSOCIATED":includestr,
"KEY_MEDALS":html_medals,
# tracks
"KEY_TRACKLIST":html_tracks,
# pulse
"KEY_PULSE_MONTHS":html_pulse_months,
"KEY_PULSE_YEARS":html_pulse_years,
"KEY_PULSE_DAYS":html_pulse_days,
"KEY_PULSE_WEEKS":html_pulse_weeks,
# performance
"KEY_PERFORMANCE_MONTHS":html_performance_months,
"KEY_PERFORMANCE_YEARS":html_performance_years,
"KEY_PERFORMANCE_DAYS":html_performance_days,
"KEY_PERFORMANCE_WEEKS":html_performance_weeks,
# scrobbles
"KEY_SCROBBLELIST":html_scrobbles, "KEY_SCROBBLELIST":html_scrobbles,
"KEY_SCROBBLELINK":compose_querystring(keys), "KEY_SCROBBLELINK":compose_querystring(keys),
"KEY_POSITION":pos,
"KEY_ASSOCIATED":includestr
} }
return (replace,pushresources) return (replace,pushresources)

13
website/css/maloja.css
View File

@ -393,6 +393,7 @@ table.list tr td {
overflow:hidden; overflow:hidden;
text-overflow:ellipsis; text-overflow:ellipsis;
padding-right:15px; padding-right:15px;
line-height: 140%;
} }
@ -648,6 +649,18 @@ table.tiles_3x3 td {
/*
**
**
** Pulse / performance thingies
**
**
*/
span.stat_module_pulse {
display: inline-block;
vertical-align: top;
}
/* /*
** **

28
website/javascript/rangeselect.js Normal file
View File

@ -0,0 +1,28 @@
function showRange(identifier,unit) {
// Make all modules disappear
modules = document.getElementsByClassName("stat_module_" + identifier)
for (var i=0;i<modules.length;i++) {
modules[i].setAttribute("style","width:0px;overflow:hidden;")
// cheesy trick to make the allocated space always whatever the biggest module needs
}
// Make requested module appear
reactivate = document.getElementsByClassName(identifier + "_" + unit)
for (var i=0;i<reactivate.length;i++) {
reactivate[i].setAttribute("style","")
}
// Set all selectors to unselected
selectors = document.getElementsByClassName("stat_selector_" + identifier)
for (var i=0;i<selectors.length;i++) {
selectors[i].setAttribute("style","")
}
// Set the active selector to selected
reactivate = document.getElementsByClassName("selector_" + identifier + "_" + unit)
for (var i=0;i<reactivate.length;i++) {
reactivate[i].setAttribute("style","opacity:0.5;")
}
}
document.addEventListener('DOMContentLoaded',function() {KEY_JS_INIT_RANGES})

81
website/start.html
View File

@ -4,26 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Maloja</title> <title>Maloja</title>
<script src="javascript/rangeselect.js"></script>
<script>
function showRange(identifier,unit) {
modules = document.getElementsByClassName("stat_module_" + identifier)
for (var i=0;i<modules.length;i++) {
modules[i].setAttribute("style","display:none;")
}
document.getElementById(identifier + "_" + unit).setAttribute("style","")
selectors = document.getElementsByClassName("stat_selector_" + identifier)
for (var i=0;i<selectors.length;i++) {
selectors[i].setAttribute("style","")
}
document.getElementById("selector_" + identifier + "_" + unit).setAttribute("style","opacity:0.5;")
}
document.addEventListener('DOMContentLoaded',function() {KEY_JS_INIT_RANGES})
</script>
</head> </head>
@ -39,17 +20,17 @@
<span onclick="showRange('topartists','week')" class="stat_selector_topartists" id="selector_topartists_week">This Week</span> <span onclick="showRange('topartists','week')" class="stat_selector_topartists selector_topartists_week">This Week</span>
| <span onclick="showRange('topartists','month')" class="stat_selector_topartists" id="selector_topartists_month">This Month</span> | <span onclick="showRange('topartists','month')" class="stat_selector_topartists selector_topartists_month">This Month</span>
| <span onclick="showRange('topartists','year')" class="stat_selector_topartists" id="selector_topartists_year">This Year</span> | <span onclick="showRange('topartists','year')" class="stat_selector_topartists selector_topartists_year">This Year</span>
| <span onclick="showRange('topartists','alltime')" class="stat_selector_topartists" id="selector_topartists_alltime" style="opacity:0.5;">All Time</span> | <span onclick="showRange('topartists','alltime')" class="stat_selector_topartists selector_topartists_alltime" style="opacity:0.5;">All Time</span>
<br/><br/> <br/><br/>
<span class="stat_module_topartists" id="topartists_week" style="display:none;">KEY_TOPARTISTS_WEEK</span> <span class="stat_module_topartists topartists_week" style="display:none;">KEY_TOPARTISTS_WEEK</span>
<span class="stat_module_topartists" id="topartists_month" style="display:none;">KEY_TOPARTISTS_MONTH</span> <span class="stat_module_topartists topartists_month" style="display:none;">KEY_TOPARTISTS_MONTH</span>
<span class="stat_module_topartists" id="topartists_year" style="display:none;">KEY_TOPARTISTS_YEAR</span> <span class="stat_module_topartists topartists_year" style="display:none;">KEY_TOPARTISTS_YEAR</span>
<span class="stat_module_topartists" id="topartists_alltime">KEY_TOPARTISTS_TOTAL</span> <span class="stat_module_topartists topartists_alltime">KEY_TOPARTISTS_TOTAL</span>
@ -57,17 +38,17 @@
<h1><a href="/charts_tracks?max=50">Top Tracks</a></h1> <h1><a href="/charts_tracks?max=50">Top Tracks</a></h1>
<span onclick="showRange('toptracks','week')" class="stat_selector_toptracks" id="selector_toptracks_week">This Week</span> <span onclick="showRange('toptracks','week')" class="stat_selector_toptracks selector_toptracks_week">This Week</span>
| <span onclick="showRange('toptracks','month')" class="stat_selector_toptracks" id="selector_toptracks_month">This Month</span> | <span onclick="showRange('toptracks','month')" class="stat_selector_toptracks selector_toptracks_month">This Month</span>
| <span onclick="showRange('toptracks','year')" class="stat_selector_toptracks" id="selector_toptracks_year">This Year</span> | <span onclick="showRange('toptracks','year')" class="stat_selector_toptracks selector_toptracks_year">This Year</span>
| <span onclick="showRange('toptracks','alltime')" class="stat_selector_toptracks" id="selector_toptracks_alltime" style="opacity:0.5;">All Time</span> | <span onclick="showRange('toptracks','alltime')" class="stat_selector_toptracks selector_toptracks_alltime" style="opacity:0.5;">All Time</span>
<br/><br/> <br/><br/>
<span class="stat_module_toptracks" id="toptracks_week" style="display:none;">KEY_TOPTRACKS_WEEK</span> <span class="stat_module_toptracks toptracks_week" style="display:none;">KEY_TOPTRACKS_WEEK</span>
<span class="stat_module_toptracks" id="toptracks_month" style="display:none;">KEY_TOPTRACKS_MONTH</span> <span class="stat_module_toptracks toptracks_month" style="display:none;">KEY_TOPTRACKS_MONTH</span>
<span class="stat_module_toptracks" id="toptracks_year" style="display:none;">KEY_TOPTRACKS_YEAR</span> <span class="stat_module_toptracks toptracks_year" style="display:none;">KEY_TOPTRACKS_YEAR</span>
<span class="stat_module_toptracks" id="toptracks_alltime">KEY_TOPTRACKS_TOTAL</span> <span class="stat_module_toptracks toptracks_alltime">KEY_TOPTRACKS_TOTAL</span>
@ -97,27 +78,27 @@
<a href="/pulse?step=year&trail=1">Years</a> <a href="/pulse?step=year&trail=1">Years</a>
--> -->
<span onclick="showRange('pulse','days')" class="stat_selector_pulse" id="selector_pulse_days">7 days</span> <span onclick="showRange('pulse','days')" class="stat_selector_pulse selector_pulse_days">7 days</span>
| <span onclick="showRange('pulse','weeks')" class="stat_selector_pulse" id="selector_pulse_weeks">12 weeks</span> | <span onclick="showRange('pulse','weeks')" class="stat_selector_pulse selector_pulse_weeks">12 weeks</span>
| <span onclick="showRange('pulse','months')" class="stat_selector_pulse" id="selector_pulse_months" style="opacity:0.5;">12 months</span> | <span onclick="showRange('pulse','months')" class="stat_selector_pulse selector_pulse_months" style="opacity:0.5;">12 months</span>
| <span onclick="showRange('pulse','years')" class="stat_selector_pulse" id="selector_pulse_years">10 years</span> | <span onclick="showRange('pulse','years')" class="stat_selector_pulse selector_pulse_years">10 years</span>
<!-- <!--
### this is for extra views of the current canonical week / month / year ### this is for extra views of the current canonical week / month / year
<br/> <br/>
<span onclick="showRange('pulse','week')" class="stat_selector_pulse" id="selector_pulse_week">This Week</span> <span onclick="showRange('pulse','week')" class="stat_selector_pulse selector_pulse_week">This Week</span>
| <span onclick="showRange('pulse','month')" class="stat_selector_pulse" id="selector_pulse_month">This Month</span> | <span onclick="showRange('pulse','month')" class="stat_selector_pulse selector_pulse_month">This Month</span>
| <span onclick="showRange('pulse','year')" class="stat_selector_pulse" id="selector_pulse_year"">This Year</span> | <span onclick="showRange('pulse','year')" class="stat_selector_pulse selector_pulse_year"">This Year</span>
--> -->
<br/><br/> <br/><br/>
<span class="stat_module_pulse" id="pulse_months">KEY_PULSE_MONTHS</span> <span class="stat_module_pulse pulse_months">KEY_PULSE_MONTHS</span>
<span class="stat_module_pulse" id="pulse_days" style="display:none;">KEY_PULSE_DAYS</span> <span class="stat_module_pulse pulse_days" style="display:none;">KEY_PULSE_DAYS</span>
<span class="stat_module_pulse" id="pulse_years" style="display:none;">KEY_PULSE_YEARS</span> <span class="stat_module_pulse pulse_years" style="display:none;">KEY_PULSE_YEARS</span>
<span class="stat_module_pulse" id="pulse_weeks" style="display:none;">KEY_PULSE_WEEKS</span> <span class="stat_module_pulse pulse_weeks" style="display:none;">KEY_PULSE_WEEKS</span>
<!-- <!--
<span class="stat_module_pulse" id="pulse_week" style="display:none;">KEY_PULSE_WEEK</span> <span class="stat_module_pulse pulse_week" style="display:none;">KEY_PULSE_WEEK</span>
<span class="stat_module_pulse" id="pulse_month" style="display:none;">KEY_PULSE_MONTH</span> <span class="stat_module_pulse pulse_month" style="display:none;">KEY_PULSE_MONTH</span>
<span class="stat_module_pulse" id="pulse_year" style="display:none;">KEY_PULSE_YEAR</span> <span class="stat_module_pulse pulse_year" style="display:none;">KEY_PULSE_YEAR</span>
--> -->
</div> </div>