Вьюшка: "Каталог / Типовые серии зданий / Информация по серии" -- готово

oknardia/templates/seria_info/all_seria_info_pre_light.html

@@ -0,0 +1,120 @@
+{% extends "base.html" %}
+{% load static %}
+{% load filters %}
+{% load humanize %}
+
+{% block Title %}серия {{ THIS_SERIA_NAME }} — типовые проёмы, размеры окон, схемы открывания, планировки, здания на карте, история и статистика{% endblock %}
+
+{% block Add_Body_Attribute %} style="padding-top:70px;"{% endblock %}
+
+{% block Date4Meta %}{{ META_DATA_PUBLISH|date:"c" }}{% endblock %}
+
+{% block Last4Meta %}{{ META_DATA_PUBLISH|date:"c" }}{% endblock %}
+
+{% block Description %}Информация по зданиям серии {{ THIS_SERIA_NAME }} и установке окон в них{% endblock %}
+
+{% block Keywords %}серии {{ THIS_SERIA_NAME }}, серия {{ THIS_SERIA_NAME }}, проект {{ THIS_SERIA_NAME }}, года	простойки, размеры окон, размеры проемов, оконные проемы, {{ THIS_SERIA_NAME }} на карте, установка окон, цены на пластиковые окна{% endblock %}
+
+{% block Top_JS1 %}
+	<script type="text/javascript">
+		$(window).load(function () {
+			var images = $('.half');
+			images.each(function (i) {
+				$(this).width($(this).width() / 2);
+			});
+		});
+	</script>{% endblock %}
+
+{% block Main_Content %}<div class="container-fluid">
+  {# <!--- Хлебные крошки: НАЧАЛО --> #}<div class="row">
+    <div class="col-md-11 col-xs-12">
+      <ol class="breadcrumb">
+        <li><a href="/">Главная</a></li>
+        <li><a href="/catalog/">Каталог</a></li>
+        <li><a href="/catalog/seria/">Типовые серии домов</a></li>
+        <li>Серия {{ THIS_SERIA_NAME }}</li>
+      </ol>
+      <h1>СЕРИЯ {{ THIS_SERIA_NAME }}</h1>
+    </div>
+  </div>{# <!--- Хлебные крошки: КОНЕЦ ---> #}
+	<div class="row">
+    <div class="col-md-12">{{ THIS_SERIA_DESCRIPTION|safe }}</div>
+	</div>
+
+	<div class="row">
+    <div class="col-lg-10">
+      <h2 class="header">Окна <nobr>в серии {{ THIS_SERIA_NAME }}</nobr>: типовые размеры и схемы открывания</h2>
+    </div>
+    <div class="col-lg-12" style="padding:1em 0 0 0;margin-left:-1em">
+      {% include 'report/show_big_flap_pictures.html' %}
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-lg-8 col-xs-12 col-md-offset-1">
+      <h3 class="header">Оконные проёмы в типовых квартирах <nobr>серии {{ THIS_SERIA_NAME }}</nobr></h3>
+    </div>
+    <div class="col-lg-8 col-xs-12 col-md-offset-1">
+      <!--- прешаблон начало ---><table style="padding:2px;">{% templatetag openblock %} for row in TABLE_OF_WINDOWS {% templatetag closeblock %}
+        <tr class="tr2">
+          <td>{% templatetag openvariable %} row.APART_NAME|safe {% templatetag closevariable %}</td>{% templatetag openblock %} for col in row.WIN_IN_APART {% templatetag closeblock %}
+          <td class="cntr">{% templatetag openblock %} if col.WIN_ID {% templatetag closeblock %}<nobr	title="{% templatetag openvariable %} col.WIN_Q {% templatetag closevariable %} × {% templatetag openvariable %} col.WIN_DESCRIPTION {% templatetag closevariable %}: {% templatetag openvariable %} col.WIN_WIDTH {% templatetag closevariable %}шт.: {% templatetag openvariable %} col.WIN_HEIGHT {% templatetag closevariable %} (Ш×В, см.). Схема открывания: {% templatetag openvariable %} col.WIN_FLAPCFG {% templatetag closevariable %}">{% templatetag openblock %} for I_II in col.WIN_NUM {% templatetag closeblock %}<span	style="background-image:url('{% static 'img/svg/mark' %}{% templatetag openvariable %} I_II {% templatetag closevariable %}.svg');">&nbsp;</span>{% templatetag openblock %} endfor {% templatetag closeblock %}</nobr>{% templatetag openblock %} else {% templatetag closeblock %}—{% templatetag openblock %} endif {% templatetag closeblock %}</td>{% templatetag openblock %} endfor {% templatetag closeblock %}
+          <td style="background:#f9f9f9;"><a href="#{% templatetag openvariable %} row.APART_ID {% templatetag closevariable %}" class="badge" title="Оконных предложений для квартиры: {% templatetag openvariable %} row.NUM_OFFERS {% templatetag closevariable %}"><small class="glyphicon glyphicon-tags" aria-hidden="true"></small>&nbsp;{% templatetag openvariable %} row.NUM_OFFERS {% templatetag closevariable %}</a></td>
+        </tr>{% templatetag openblock %} endfor {% templatetag closeblock %}
+        <tr class="trZ">
+          <td style="font-size: xx-small;vertical-align:text-top">© 2015-{% now "Y" %}, данные: oknardia.ru</td>{% templatetag openblock %} for i in WIN_OFFER_AND_MERCHANT {% templatetag closeblock %}
+          <td class="cntr" style="background:#f9f9f9;"><a href="/tsena-odnogo-okna/{% templatetag openvariable %} i.WIN_W|floatformat:0 {% templatetag closevariable %}0x{% templatetag openvariable %} i.WIN_H|floatformat:0 {% templatetag closevariable %}0mm/tip{% templatetag openvariable %} i.WIN_ID {% templatetag closevariable %}" class="badge" title="Ценовых предложений для окна: {% templatetag openvariable %} i.WIN_OFFER {% templatetag closevariable %}"><small class="glyphicon glyphicon-tags" aria-hidden="true"></small>&nbsp;{% templatetag openvariable %} i.WIN_OFFER {% templatetag closevariable %}</a></td>{% templatetag openblock %} endfor {% templatetag closeblock %}
+          <td></td>
+        </tr>
+      </table>
+    <!--- прешаблон конец  ---></div>
+  </div>
+
+	<div class="row">
+		<div class="col-md-9"><a name="s_graph"></a>
+			<h2 class="header">Серия {{ THIS_SERIA_NAME }}: ввод в эксплуатацию по годам</h2>
+    </div>
+		<div class="col-md-9 col-md-offset-1" style="height:300px;font-size:large;">
+			{% include 'seria_info/yaer_graph.html' %}
+		</div>
+		<div class="col-md-9 col-md-offset-1">
+			<div style="font-size: xx-small;float: right">© 2015-{% now "Y" %}, данные: oknardia.ru</div>
+		</div>
+	</div>
+
+	<div class="row">
+		<div class="col-md-7"><a name="s_map"></a>
+      <h2 class="header">Серия {{ THIS_SERIA_NAME }}: жилой фонд проекта на карте</h2>
+    </div>
+		<div class="col-md-7 col-lg-offset-1">
+      <p><small>Чтобы посмотреть цены на&nbsp;установку и&nbsp;замену окон от&nbsp;партнёров &laquo;Окнардия&raquo; в&nbsp;своей квартире: найдите дом на&nbsp;карте; кликните на&nbsp;него; перейдите по&nbsp;ссылке &laquo;Смотреть коммерческие предложения&raquo;. При необходимости смените типовую планировку квартиры (на&nbsp;странице ценовой выдачи, справа от&nbsp;изображения типовых проёмов и&nbsp;схем открывания).</small></p>
+			<div style="height:350px;">{% include 'seria_info/geo_map.html' %}</div>
+			<div style="font-size: xx-small;float: right">© 2015-{% now "Y" %}, данные: oknardia.ru</div>
+		</div>
+
+		<diV class="col-md-4">
+			<h3  class="header">Статистика <nobr>серии {{ THIS_SERIA_NAME }}</nobr></h3>
+			<p>Совокупно во всех зданиях типового проекта:</p>
+			<ul>
+				<li><strong>{{ ACCOUNTS|price_format }}</strong> квартир.</li>
+				<li>Проживает <strong>{{ APARTMENTS|price_format }}</strong> семей <small>(<strong>{{ RESIDENTS|price_format }}</strong> человек)</small>.</li>
+				<li><strong>{{ RESIDENTIAL_M2|stringformat:".1f"|price_format }} м²</strong> жилых помещений.</li>
+				<li><strong>{{ MUNICIPAL_M2|stringformat:".1f"|price_format }} м²</strong> — муниципальное жильё.</li>
+				<li><strong>{{ GOVERNMENT_M2|stringformat:".1f"|price_format }} м²</strong> занимают государственные и городские	службы, учреждения бытового обслуживания, магазины, офисы и тому подобное.</li>
+				<li>Максимальный износ жилого фонда серии {{ THIS_SERIA_NAME }} — <strong>{{ CONDITION_MAX|stringformat:".2f" }} %</strong>. Минимальный — <strong>{{ CONDITION_MIN|stringformat:".2f" }} %</strong>.	</li>
+			</ul>
+		</diV>
+	</div>
+
+	<div class="row">
+		<div class="col-md-4 col-lg-offset-8" style="margin-top: 1em;">{# <div class="col-md-4"> #}
+			<h5>Информация о&nbsp;других, отличных от&nbsp;{{ THIS_SERIA_NAME }}, типовых сериях в&nbsp;базе &laquo;Окнардия&raquo;, типовых планировках квартир и&nbsp;оконных проёмах в&nbsp;них, а также рекомендации по замене окон:</h5>
+			<div class="href_d">{% include 'seria_info/seria_nav.html' %}</div>
+		</div>
+	</div>
+  <div class="row">
+    {% templatetag openblock %}include "report/report_last_user_visit.html" {% templatetag closeblock %}
+    {% templatetag openblock %} include "report/report_log_user_visit.html" {% templatetag closeblock %}
+  </div>
+</div>
+{% endblock %}

oknardia/templates/seria_info/geo_map.html

@@ -0,0 +1,56 @@
+{# Скрипт Yandex.Chart для отображения клястеров на карте #}{% load static %}
+       {% block Top_JS5 %}<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
+{% if MAP_JS %}<script src="{% static '' %}{{ MAP_JS }}"  charset="utf-8" type="text/javascript"></script>{% else %}<script type="text/javascript">
+let points = [{% for count in DATA4GEO %}{% if forloop.last %}[{{ count.LONGITUDE|stringformat:"f" }},{{ count.LATITUDE|stringformat:"f" }}]{% else %}[{{ count.LONGITUDE|stringformat:"f" }},{{ count.LATITUDE|stringformat:"f" }}],{% endif %}{% endfor %}];
+let forURL = [{% for count in DATA4GEO %}{{ count.ADDR_ID }}{# ,rus: '{{ count.ADDR_RUS }}',lat: '{{ count.ADDR_LAT }}' #}{% if not forloop.last %},{% endif %}{% endfor %}];
+
+
+ymaps.ready(function () {
+    var myMap = new ymaps.Map('SeriaMap', {
+        center: [55.75, 37.57],
+        zoom: 10,
+        behaviors: ['default', 'scrollZoom'],
+        controls: [ 'rulerControl', 'zoomControl', 'geolocationControl', 'fullscreenControl' ]
+        });
+    // Создадим кластеризатор, вызвав функцию-конструктор.
+    clusterer = new ymaps.Clusterer({
+        preset: 'islands#invertedGrayClusterIcons',
+        groupByCoordinates: false,
+        hasHint: false,
+        viewportMargin: 0,
+        zoomMargin: 16,
+        clusterDisableClickZoom: false,
+        gridSize: 80
+        });
+    geoObjects = [];
+    add_str1 = '<a href="/';
+    add_str2 = '/0/">Смотреть коммерческие предложения</a>';
+    add_str3 = '<b>Здание серии {{ THIS_SERIA_NAME }}</b>';
+    // Данные передаются в конструктор метки.
+    for(var i = 0, len = points.length; i < len; i++) {
+        geoObjects[i] = new ymaps.Placemark( points[i],
+		        { // Содержимое иконки, балуна и хинта.
+               balloonContent: add_str1 + forURL[i] + add_str2,
+               hintContent: add_str3
+            },
+		        { preset:'islands#circleIcon',iconColor: 'silver'} );
+	      geoObjects[i].events
+		      .add('mouseenter', function (e) {
+            e.get('target').options.set('preset', 'islands#yellowCircleIcon');
+          })
+	        .add('mouseleave', function (e) {
+            e.get('target').options.set('preset', 'islands#grayCircleIcon');
+          });
+	    }
+    // Добавляем метки в кластеризатор.
+    clusterer.add(geoObjects);
+    myMap.geoObjects.add(clusterer);
+    // позиционирование карты так, чтобы на ней были видны все объекты кластера.
+    myMap.setBounds(clusterer.getBounds(), { checkZoomRange: true });
+});
+</script>{% endif %}{% endblock %}
+<div id="SeriaMap" style="height:100%;width:100%;">
+  <noscript>
+    <p>Для отображения картографических данных по серии {{ THIS_SERIA_NAME }} с&nbsp;помощью &laquo;Яндекс.Карт&raquo; нужно включить поддержку JavaScript.</p>
+  </noscript>
+</div>

oknardia/templates/seria_info/seria_nav.html

@@ -0,0 +1 @@
+{# Выводит навигацию по сериям домов #}{% for CountSeria in SERIA_NAV_DIM %}{% if CountSeria.SERIA_L == "" %}<span style="background-color:cornsilk;"><nobr>{{ CountSeria.SERIA_R }}</nobr></span>{% else %}<span><a href="/catalog/seria/{{ CountSeria.SERIA_L }}/all{{ CountSeria.ID2URL }}/"><nobr>{{ CountSeria.SERIA_R }}</nobr></a></span>{% endif %}{% endfor %}

oknardia/templates/seria_info/yaer_graph.html

@@ -0,0 +1,58 @@
+{# Скрипт Google.Chart для рисования графика #}{% block Top_JS3 %}
+<script type="text/javascript" src="https://www.google.com/jsapi" type="text/javascript"></script>{# <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script> #}
+<script type="text/javascript">
+    // google.charts.load('current', {'packages':['bar']});
+    // google.charts.setOnLoadCallback(drawChart);
+    google.load("visualization", "1", {packages:["corechart"]});
+    google.setOnLoadCallback(drawChart);
+    function drawChart() {
+      let data = google.visualization.arrayToDataTable([
+        ["Год",   "Введено в эксплуатацию", {role:'style'}],{% for row in DATA4GRAPH %}
+        ["{{ row.YEAR }}",{{ row.NUMS }},"color: #99{{ row.CLRS }}99"]{% if not forloop.last %},{% endif %}{% endfor %}
+      ]);
+      let view = new google.visualization.DataView(data);
+      view.setColumns([0, 1,
+                       { calc: "stringify",
+                         sourceColumn: 1,
+                         type: "string",
+                         role: "annotation" },
+                       2
+                       ]);
+      let options = {
+        animation:{
+            duration: 1500,
+            easing: 'in',
+            startup: true
+            },
+        backgroundColor: "#EEEEEE",
+        bar: {groupWidth: "76.4%"},
+        chartArea: {left: "2%", top: "5%", width: '96%', height: '85%'},
+        dataOpacity: 0.76,
+        explorer:{
+            maxZoomIn: 0.20,
+            maxZoomOut: 32 },
+        vAxis: {
+            baselineColor:'grey',
+            gridlines:{color: 'silver', count: 7},
+            minorGridlines:{color: '#dddddd', count: 3},
+            textPosition: 'in',
+            textStyle: {fontSize: 10}
+        },
+        hAxis: { textStyle: {fontSize: 10} },
+        isStacked: true,
+        tooltip: {
+            textStyle:{color: 'grey', fontSize: 10 },
+            trigger: 'selection'
+        },
+        annotations: {textStyle: { fontSize: 8, bold: true, color: 'black',  opacity: 0.8 }},
+        legend: { position: "none" }
+      };
+      let chart = new google.visualization.ColumnChart(document.getElementById("graph"));
+      chart.draw(data, options);
+  }
+</script>{% endblock %}
+<div id="graph" style="width:100%;height:100%">
+  <p>Для отображения гистограммы ввода в&nbsp;эксплуатацию зданий серии {{ THIS_SERIA_NAME }} нужна поддержка SVG.</p>
+  <noscript>
+    <p>Для визуализации отображения картографической информации с&nbsp;помощью Google.Charts нужно включить поддержку JavaScript.</p>
+  </noscript></div>