You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
4.2 KiB
84 lines
4.2 KiB
{% extends 'base_index.html' %}
|
|
{% block title %}Все доступные достижения{% endblock %}
|
|
{% block head %}
|
|
<link rel="stylesheet" href="/static/css/pie_chart.css" type="text/css" />
|
|
<script>
|
|
window.courses = [];
|
|
</script>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="col" style="width: 100%;">
|
|
<!-- main header -->
|
|
<div class="wrapper-md col-md-9 col-sm-12 col-xs-12 col-lg-9" style="text-align: center;">
|
|
<h3 style="margin-top: 0;font-weight: bold;text-align: left;
|
|
margin-bottom: 20px;
|
|
margin-left: 30px; border-bottom: 1px dotted #ccc;
|
|
padding-bottom: 10px;"><i class="glyphicon glyphicon-star" style="color: #fcb813;margin-right: 5px;"></i> Все доступные достижения системы</h3>
|
|
|
|
{% for achievement in achievements %}
|
|
<div class="thumb-xl" style="text-align: center;
|
|
margin: 10px;">
|
|
<img src="{{ achievement.icon.url }}" alt="..." class="m-b-xs" style=" width: 125px;">
|
|
<small class="block">{{ achievement.title }}</small>
|
|
</div>
|
|
{% empty %}
|
|
<h3 style="text-align: center; font-weight: bold">Достижений еще нет</h3>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
|
|
<div class="wrapper-md col-md-3 col-sm-12 col-xs-12 col-lg-3">
|
|
<h3 style="margin-top: 0;font-weight: bold;
|
|
margin-bottom: 20px;
|
|
margin-left: 30px; border-bottom: 1px dotted #ccc;
|
|
padding-bottom: 10px;"><i class="glyphicon glyphicon-ok-sign" style="color: #fcb813;margin-right: 5px;"></i> Получаемые навыки</h3>
|
|
{% for course, points in skills.items %}
|
|
<script>
|
|
{% if points %}
|
|
window.courses.push({{ course.0 }})
|
|
{% endif %}
|
|
</script>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading font-bold">{{ course.1 }} <span style="float: right; color: #666;"><i class="glyphicon glyphicon-ok-sign"></i></span></div>
|
|
|
|
<div class="text-center wrapper m-b-sm" style="width: 100%">
|
|
{% if points %}
|
|
<div id="pieChart{{ course.0 }}" class="chart" style="width: 100%;height: 250px;"></div>
|
|
{% else %}
|
|
<h3 style="font-weight: bold;text-align: center;margin: 10px 0;">Навыков не назначено</h3>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<ul class="list-group no-radius">
|
|
{% for key, value in points.items %}
|
|
<li class="list-group-item" name="skill_row{{ course.0 }}" skill_title="{{ key }}" skill_color="{{ value.color }}" skill_value={{ value.size }}>
|
|
<span class="pull-right"><b>{{ value.size }}</b> очков</span>
|
|
<span class="label font-normal text-white" style="background: {{ value.color }};font-size: 14px;">{% if value.icon %}<img src="{{ value.icon.url }}" style="margin-top: -1px;width: 15px;
|
|
height: 15px;
|
|
margin-right: 5px;">{% endif %}{{ key }}</span>
|
|
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
<!-- / main header -->
|
|
</div>
|
|
{% endblock %}
|
|
{% block js %}
|
|
<script src="/static/js/pie_chart.js"></script>
|
|
<script src="/static/js/clipboard.min.js"></script>
|
|
<script>
|
|
$(function(){
|
|
for (var c in courses){
|
|
var result = [];
|
|
var skills = $('li[name=skill_row'+courses[c]+']');
|
|
for(var i=0;i<skills.length;i++){result.push({'title': $(skills[i]).attr('skill_title'), 'value': parseInt($(skills[i]).attr('skill_value'), 10), 'color':$(skills[i]).attr('skill_color')})}
|
|
$("#pieChart"+courses[c]).drawPieChart(result);
|
|
}
|
|
|
|
});
|
|
</script>
|
|
{% endblock %} |