Verified Commit 27df2385 authored by Elger Jonker's avatar Elger Jonker

improvements to ticker, for expo's

parent d7d8fba1
Pipeline #36556463 passed with stage
in 13 minutes and 20 seconds
......@@ -519,7 +519,7 @@ path {
display: inline-block;
padding-left: 1vw;
text-indent: 0;
animation: marquee 5000s linear infinite;
animation: marquee 8000s linear infinite;
}
.marquee span:hover {
animation-play-state: paused
......@@ -535,15 +535,19 @@ path {
font-size: 140px;
}
#ticker {
#ticker_bar {
/* Inspired by news and stock tickers */
z-index: 1002;
width: 100%;
height: 200px;
width: 96vw;
position: fixed;
bottom: 0;
left: 0;
background-color: white;
border-top: 2px solid black;
border: 1px solid #4c4c4c;
margin: 2vw;
box-shadow: 4px 28px 62px -16px rgba(120,120,120,0.65);
background: white linear-gradient(to bottom, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
line-height: 183px;
height: 190px;
}
section {
......
......@@ -4,6 +4,7 @@ let version = document.head.querySelector("[name=version]").getAttribute('conten
let country = document.head.querySelector("[name=country]").getAttribute('content');
let mapbox_token = document.head.querySelector("[name=mapbox_token]").getAttribute('content');
let debug = document.head.querySelector("[name=debug]").getAttribute('content');
let TICKER_VISIBLE_VIA_JS_COMMAND = document.head.querySelector("[name=TICKER_VISIBLE_VIA_JS_COMMAND]").getAttribute('content');
if (sentry_token) {
Raven.config(sentry_token, {release: version}).install();
}
......
......@@ -742,16 +742,13 @@ const top_mixin = {
};
function extracrunchycyber(){
vueMapStateBar.countries = ["NL", "DE"];
// This is for demo purposes only
function show_ticker() {
vueTicker.visible = true;
}
function extra() {
vueMapStateBar.countries = ["NL", "DE", "SE"];
vueMapStateBar.categories = ["municipality", "cyber", "unknown"];
}
// This helps showing some regions that might not be set to 'displayed' and is for demo purposes
function germany() {
vueMapStateBar.countries = ["NL", "DE"];
vueMapStateBar.categories = ["bundesland", "regierungsbezirk", "landkreis_kreis_kreisfreie_stadt",
......@@ -1146,23 +1143,27 @@ function views() {
el: '#ticker',
data: {
tickertext: "",
visible: false,
visible: true,
changes: Array(),
slogan: ""
},
mounted: function () {
console.log("Ticker");
this.visible = !(TICKER_VISIBLE_VIA_JS_COMMAND === 'true');
},
methods: {
colorize: function (value, rank) {
if (value === 0)
return "black";
if (rank === "high")
return "red";
return "crimson";
if (rank === "medium")
return "orange";
return "darkorange";
if (rank === "low")
return "yellow";
return "gold";
if (high > 0) return "red";
if (medium > 0) return "orange";
......@@ -1170,18 +1171,17 @@ function views() {
},
arrow: function(value, rank){
if (value > 0)
return "<a style='color: red'>▲</a>"+ value + " ";
return "<a style='color: red'>▲</a>+"+ value + " ";
if (value === 0)
return "▶0";
if (value < 0)
return "<a style='color: green'>▼</a>" + (value * -1) + " ";
return "<a style='color: green'>▼</a>-" + (value * -1) + " ";
},
get_tickertext: function() {
// weird that this should be a function...
return this.tickertext;
},
load: debounce(function () {
// /data/ticker/NL/municipality/0/0
load: function () {
if (!this.country || !this.category)
return;
......@@ -1193,30 +1193,40 @@ function views() {
this.slogan = data.slogan;
for (let j=0; j<this.changes.length; j++){
change = this.changes[j];
this.tickertext += " &nbsp; " + change['organization'] + " ";
let change = this.changes[j];
this.tickertext += " &nbsp; &nbsp; " + change['organization'].toUpperCase() + " &nbsp; ";
if (!change['high_now'] && !change['medium_now'] && !change['low_now']){
this.tickertext += "<a style='color: green'>PERFECT</a> ";
this.tickertext += "<a style='color: " + this.colorize(change['high_now'], 'high') +"'>" + change['high_now'] + "</a>";
this.tickertext += this.arrow(change['high_changes'], 'high');
this.tickertext += " | ";
} else {
this.tickertext += "<a style='color: " + this.colorize(change['medium_now'], 'medium') +"'>" + change['medium_now'] + "</a>";
this.tickertext += this.arrow(change['medium_changes'], 'medium');
this.tickertext += " | ";
this.tickertext += "<a style='color: " + this.colorize(change['high_now'], 'high') + "'>" + change['high_now'] + "</a>";
this.tickertext += this.arrow(change['high_changes'], 'high');
this.tickertext += " &nbsp; ";
this.tickertext += "<a style='color: " + this.colorize(change['low_now'], 'low') +"'>" + change['low_now'] + "</a>";
this.tickertext += this.arrow(change['low_changes'], 'low');
this.tickertext += " ";
this.tickertext += "<a style='color: " + this.colorize(change['medium_now'], 'medium') + "'>" + change['medium_now'] + "</a>";
this.tickertext += this.arrow(change['medium_changes'], 'medium');
this.tickertext += " &nbsp; ";
this.tickertext += "<a style='color: " + this.colorize(change['low_now'], 'low') + "'>" + change['low_now'] + "</a>";
this.tickertext += this.arrow(change['low_changes'], 'low');
this.tickertext += " ";
}
if (j % 10 === 0) {
this.tickertext += " - <b> " + this.slogan + " </b> - "
this.tickertext += " &nbsp; &nbsp; <b> " + this.slogan.toUpperCase() + " </b> &nbsp; "
} else {
// show space between each rating, except the first / after the closing message
this.tickertext += " &nbsp; ";
}
}
}).catch((fail) => {console.log('An error occurred: ' + fail)});
}, 42)
}).catch((fail) => {console.log('A Ticker error occurred: ' + fail)});
}
}
});
......
This diff is collapsed.
......@@ -719,7 +719,7 @@ CONSTANCE_CONFIG = {
'SHOW_COMPLY_OR_EXPLAIN_DISCUSS': (False, 'Shows a link to the comply or explain discussion forum. The url of this'
'forum can be edited below.', bool),
'SHOW_TICKER': (False, 'Shows stock-ticker with updates in the past month.', bool),
'TICKER_SLOGAN': ('failmap.org - monitor everything', 'Text to show between every 10 changes.', str),
'TICKER_SLOGAN': ('FAILMAP - MONITOR YOUR GOVERNMENT', 'Text to show between every 10 changes.', str),
'TICKER_VISIBLE_VIA_JS_COMMAND': (False, 'Only show the ticker using the Javascript command "show_ticker()"', bool),
'SHOW_SCAN_SCHEDULE': (False, 'Shows list of upcoming scans, so everyone knows what scan is due next.', bool),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment