176 lines
5.6 KiB
HTML
176 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Portal za oddajanje besedil</title>
|
|
<link rel="stylesheet" href="../static/css/header.css" type="text/css">
|
|
<link rel="stylesheet" href="../static/css/form.css" type="text/css">
|
|
<link rel="stylesheet" href="../static/css/simple-grid.css" type="text/css">
|
|
<link rel="stylesheet" href="../static/css/contracts.css" type="text/css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="logo"><a href="../"><img src="../static/image/logo-white.svg"/></a></div>
|
|
<div class="dropdown">
|
|
<button class="dropbtn"><img src="/static/image/menu.svg"/></button>
|
|
<div class="dropdown-content">
|
|
<a href="../oddaja">Oddaja</a>
|
|
<a href="../zgodovina">Zgodovina</a>
|
|
<a href="../pogodbe">Ekipa</a>
|
|
{% if is_institution_coordinator %}
|
|
<hr/>
|
|
<a href="../manage-institution">Upravljaj z institucijo</a>
|
|
{% endif %}
|
|
{% if is_admin %}
|
|
<hr/>
|
|
<a href="../admin">Administracijski meni</a>
|
|
{% endif %}
|
|
<hr/>
|
|
<a href="https://slovenscina.eu/" target="_blank">Več informacij</a>
|
|
<hr/>
|
|
<a href="../logout">Odjava</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="container" style="margin-top:8rem;">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h1 class="title">Korpus Šolar</h1>
|
|
<p class="subtitle"></p>
|
|
|
|
<div class="tab-nav">
|
|
<a href="../oddaja">Oddaja besedil</a>
|
|
<a href="../zgodovina">Zgodovina sodelovanja</a>
|
|
<a href="../pogodbe" class="active">Ekipa</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!--<div class="row">
|
|
<div class="col-12">
|
|
<h2>Sodelujoči</h2>
|
|
</div>
|
|
</div>-->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h2>Število oddaj na uporabnika</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div id="my_dataviz">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% set vars = {'prev_schoolyear': ''} %}
|
|
{% for item in cooperation_history %}
|
|
{% if item.school_year != vars.prev_schoolyear %}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h2>Šolsko leto {{item.school_year}}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
{% if vars.update({'prev_schoolyear': item.school_year}) %} {% endif %}
|
|
{% endif %}
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="team-item">
|
|
<div class="team-item-name">{{item.name}} <span class="team-item-role">{%if item.role == "mentor" %}Mentor{%elif item.role == "coordinator" %}Koordinator{%elif item.role == "other" %}{{item.badge_text}}{%endif%}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
|
|
|
|
|
|
</body>
|
|
<script src="https://d3js.org/d3.v6.js"></script>
|
|
<style>
|
|
#my_dataviz .tick line{
|
|
visibility:hidden;
|
|
}
|
|
#my_dataviz path.domain{
|
|
visibility:hidden;
|
|
}
|
|
</style>
|
|
<script>
|
|
var data;
|
|
// Parse the Data
|
|
d3.json("/topuploads-institution/{{institution_id}}").then(function(jsondata) {
|
|
if(Object.keys(jsondata).length < 1) {
|
|
return;
|
|
}
|
|
data = [];
|
|
console.log(Object.keys(jsondata).length);
|
|
var margin = {top: 20, right: 0, bottom: 40, left: 0};
|
|
var width = document.getElementById("my_dataviz").clientWidth - margin.left - margin.right;
|
|
var height = Object.keys(jsondata).length * 56;
|
|
var svg = d3.select("#my_dataviz")
|
|
.append("svg")
|
|
.attr("width", width + margin.left + margin.right)
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
.style("overflow","visible")
|
|
.append("g")
|
|
.attr("transform",
|
|
"translate(" + margin.left + "," + margin.top + ")");
|
|
for(var key in jsondata) {
|
|
data.push({'name': key, 'value':jsondata[key]});
|
|
}
|
|
|
|
|
|
console.log(data);
|
|
|
|
// Add X axis
|
|
var x = d3.scaleLinear()
|
|
.domain([0,d3.max(data, function (d) { return d.value})])
|
|
.range([ 0, width]);
|
|
|
|
svg.append("g")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(d3.axisBottom(x))
|
|
.selectAll("text")
|
|
.style("text-anchor", "center");
|
|
|
|
// Y axis
|
|
var y = d3.scaleBand()
|
|
.range([ 0, data.length*56 ])
|
|
.domain(data.map(function(d) { return d.name; }))
|
|
.padding(0);
|
|
svg.append("g")
|
|
.call(d3.axisLeft(y))
|
|
.selectAll("text")
|
|
.style("text-anchor", "start")
|
|
.style("font-size", "14px")
|
|
.attr("transform", "translate(8,-36)");
|
|
|
|
//Bars
|
|
svg.selectAll("myRect")
|
|
.data(data)
|
|
.enter()
|
|
.append("rect")
|
|
.attr("x", x(0) )
|
|
.attr("y", function(d) { return y(d.name); })
|
|
.attr("width", function(d) { return x(d.value); })
|
|
.attr("height", 32 )
|
|
.attr("fill", "#006CB7");
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
</script>
|
|
</html>
|