legacy site deprication
This commit is contained in:
=
43
old/current_site/src/pages/graph.pug
Normal file
43
old/current_site/src/pages/graph.pug
Normal file
@@ -0,0 +1,43 @@
|
||||
include ../components/mixins.pug
|
||||
|
||||
doctype html
|
||||
html(lang="ru")
|
||||
head
|
||||
meta(charset="utf-8")
|
||||
script(src="graph/d3.v7.min.js")
|
||||
script(src="graph/data.js")
|
||||
script(src="graph/main.js")
|
||||
script(src="graph/table.js")
|
||||
script(src="graph/chart.js")
|
||||
body
|
||||
+navbarMixin("Graph")
|
||||
|
||||
h3 Цена на оперативную память
|
||||
svg
|
||||
p Значение по оси OX
|
||||
|
||||
input(type="radio" value="0" name="OX" checked)
|
||||
span Maker
|
||||
br
|
||||
input(type="radio" value="1" name="OX")
|
||||
span Release Year
|
||||
|
||||
p Значение по оси OY
|
||||
p#errorDisplay(hidden) Выберете хотя бы одно
|
||||
|
||||
input(type="checkbox" value="0" name="OY" checked)
|
||||
span Min
|
||||
br
|
||||
input(type="checkbox" value="1" name="OY")
|
||||
span Max
|
||||
|
||||
br
|
||||
select#graphType
|
||||
option(value="0" selected) Точечная
|
||||
option(value="1") Гистограма
|
||||
option(value="2") График
|
||||
button#drawButton Рисовать
|
||||
|
||||
br
|
||||
button#tableVisibilityButton Скрыть Таблицу
|
||||
table#build
|
||||
135
old/current_site/src/pages/graph/chart.js
Normal file
135
old/current_site/src/pages/graph/chart.js
Normal file
@@ -0,0 +1,135 @@
|
||||
// Входные данные:
|
||||
// data - исходный массив (например, buildings)
|
||||
// key - поле, по которому осуществляется группировка
|
||||
|
||||
function createArrGraph(data, key) {
|
||||
|
||||
const groupObj = d3.group(data, d => d[key]);
|
||||
|
||||
let arrGraph = [];
|
||||
for (let entry of groupObj) {
|
||||
const minMax = d3.extent(entry[1].map(d => d['price']));
|
||||
arrGraph.push({ labelX: entry[0], values: minMax });
|
||||
}
|
||||
|
||||
return arrGraph;
|
||||
}
|
||||
|
||||
function drawGraph(data, keyX, drawMin, drawMax, graphtype) {
|
||||
// значения по оси ОХ
|
||||
|
||||
// создаем массив для построения графика
|
||||
let arrGraph = createArrGraph(data, keyX);
|
||||
if (keyX == "release") {
|
||||
arrGraph = d3.sort(arrGraph, (x, y) => Number(x["labelX"]) - Number(y["labelX"]));
|
||||
}
|
||||
const svg = d3.select("svg")
|
||||
svg.selectAll('*').remove();
|
||||
|
||||
// создаем словарь с атрибутами области вывода графика
|
||||
const attr_area = {
|
||||
width: parseFloat(svg.style('width')),
|
||||
height: parseFloat(svg.style('height')),
|
||||
marginX: 50,
|
||||
marginY: 50
|
||||
}
|
||||
|
||||
const scaleYDomain = [ d3.min(arrGraph.map(d => d.values[drawMin? 0:1])) , d3.max(arrGraph.map(d => d.values[drawMax?1:0]))];
|
||||
|
||||
|
||||
// создаем шкалы преобразования и выводим оси
|
||||
const [scX, scY] = createAxis(svg, arrGraph, attr_area,scaleYDomain);
|
||||
|
||||
// рисуем график
|
||||
|
||||
if (drawMin && drawMax) {
|
||||
createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0, graphtype, 0, scaleYDomain)
|
||||
createChart(svg, arrGraph, scX, scY, attr_area, "red", 1, graphtype, 0, scaleYDomain)
|
||||
}
|
||||
else if (drawMin) {
|
||||
createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0, graphtype, 1, scaleYDomain)
|
||||
}
|
||||
else if (drawMax) {
|
||||
createChart(svg, arrGraph, scX, scY, attr_area, "red", 1, graphtype, 1, scaleYDomain)
|
||||
}
|
||||
}
|
||||
|
||||
function createAxis(svg, data, attr_area,scaleYDomain) {
|
||||
// находим интервал значений, которые нужно отложить по оси OY
|
||||
// максимальное и минимальное значение и максимальных высот по каждой стране
|
||||
const [min, max] = scaleYDomain;
|
||||
|
||||
// функция интерполяции значений на оси
|
||||
// по оси ОХ текстовые значения
|
||||
const scaleX = d3.scaleBand()
|
||||
.domain(data.map(d => d.labelX))
|
||||
.range([0, attr_area.width - 2 * attr_area.marginX]);
|
||||
|
||||
const scaleY = d3.scaleLinear()
|
||||
.domain([min * 0.85, max * 1.1])
|
||||
.range([attr_area.height - 2 * attr_area.marginY, 0]);
|
||||
|
||||
// создание осей
|
||||
const axisX = d3.axisBottom(scaleX); // горизонтальная
|
||||
const axisY = d3.axisLeft(scaleY); // вертикальная
|
||||
|
||||
// отрисовка осей в SVG-элементе
|
||||
svg.append("g")
|
||||
.attr("transform", `translate(${attr_area.marginX},
|
||||
${attr_area.height - attr_area.marginY})`)
|
||||
.call(axisX)
|
||||
.selectAll("text") // подписи на оси - наклонные
|
||||
.style("text-anchor", "end")
|
||||
.attr("dx", "-.8em")
|
||||
.attr("dy", ".15em")
|
||||
.attr("transform", d => "rotate(-45)");
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
|
||||
.call(axisY);
|
||||
|
||||
return [scaleX, scaleY]
|
||||
}
|
||||
|
||||
function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx, graphType, horisontalScale, scaleYDomain) {
|
||||
if (graphType == 1) {
|
||||
svg.selectAll(".dot")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", d => scaleX(d.labelX) + valueIdx * 6)
|
||||
.attr("y", d => scaleY(d.values[valueIdx]))
|
||||
.attr("width", 6 * (horisontalScale + 1))
|
||||
.attr("height", d => scaleY(scaleYDomain[0] * 0.85) - scaleY(d.values[valueIdx]))
|
||||
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
|
||||
.style("fill", color)
|
||||
|
||||
|
||||
}
|
||||
else if (graphType == 2) {
|
||||
const line = d3.line()
|
||||
.x(d => scaleX(d.labelX) + scaleX.bandwidth() / 2 + valueIdx * 4)
|
||||
.y(d => scaleY(d.values[valueIdx]));
|
||||
|
||||
svg.append('path')
|
||||
.datum(data)
|
||||
.attr('d', line.curve(d3.curveBasis))
|
||||
.attr('stroke-width',2)
|
||||
.attr('fill', 'none')
|
||||
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
|
||||
.attr('stroke', color);
|
||||
}
|
||||
else if (graphType == 0) {
|
||||
const r = 4;
|
||||
|
||||
svg.selectAll(".dot")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("r", r)
|
||||
.attr("cx", d => scaleX(d.labelX) + scaleX.bandwidth() / 2 + valueIdx * 4)
|
||||
.attr("cy", d => scaleY(d.values[valueIdx]))
|
||||
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
|
||||
.style("fill", color)
|
||||
}
|
||||
}
|
||||
2
old/current_site/src/pages/graph/d3.v7.min.js
vendored
Normal file
2
old/current_site/src/pages/graph/d3.v7.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
68
old/current_site/src/pages/graph/data.js
Normal file
68
old/current_site/src/pages/graph/data.js
Normal file
@@ -0,0 +1,68 @@
|
||||
let ram_sticks = [
|
||||
{ "type": "DDR3", "name": "DDR3-1600-4GB-A1", "size": 4, "maker": "Kingston", "release": "2014-03", "price": 18, },
|
||||
{ "type": "DDR3", "name": "DDR3-1600-8GB-A2", "size": 8, "maker": "Corsair", "release": "2015-06", "price": 26, },
|
||||
{ "type": "DDR3", "name": "DDR3-1866-8GB-A3", "size": 8, "maker": "G.Skill", "release": "2016-02", "price": 29, },
|
||||
{ "type": "DDR4", "name": "DDR4-2133-8GB-B1", "size": 8, "maker": "Crucial", "release": "2017-01", "price": 24, },
|
||||
{ "type": "DDR4", "name": "DDR4-2400-8GB-B2", "size": 8, "maker": "Kingston", "release": "2017-09", "price": 27, },
|
||||
{ "type": "DDR4", "name": "DDR4-2666-16GB-B3", "size": 16, "maker": "Corsair", "release": "2018-04", "price": 48, },
|
||||
{ "type": "DDR4", "name": "DDR4-3000-16GB-B4", "size": 16, "maker": "G.Skill", "release": "2018-11", "price": 52, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-16GB-B5", "size": 16, "maker": "HyperX", "release": "2019-03", "price": 55, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-32GB-B6", "size": 32, "maker": "Crucial", "release": "2019-08", "price": 92, },
|
||||
{ "type": "DDR4", "name": "DDR4-3600-32GB-B7", "size": 32, "maker": "Corsair", "release": "2020-02", "price": 99, },
|
||||
{ "type": "DDR5", "name": "DDR5-4800-16GB-C1", "size": 16, "maker": "Kingston", "release": "2021-01", "price": 78, },
|
||||
{ "type": "DDR5", "name": "DDR5-5200-16GB-C2", "size": 16, "maker": "Corsair", "release": "2021-06", "price": 84, },
|
||||
{ "type": "DDR5", "name": "DDR5-5600-32GB-C3", "size": 32, "maker": "G.Skill", "release": "2022-02", "price": 145, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-32GB-C4", "size": 32, "maker": "Crucial", "release": "2022-07", "price": 158, },
|
||||
{ "type": "DDR5", "name": "DDR5-6400-32GB-C5", "size": 32, "maker": "Corsair", "release": "2023-01", "price": 172, },
|
||||
{ "type": "DDR5", "name": "DDR5-6600-64GB-C6", "size": 64, "maker": "Kingston", "release": "2023-05", "price": 310, },
|
||||
{ "type": "DDR5", "name": "DDR5-6800-64GB-C7", "size": 64, "maker": "G.Skill", "release": "2023-09", "price": 329, },
|
||||
{ "type": "DDR5", "name": "DDR5-7200-64GB-C8", "size": 64, "maker": "Corsair", "release": "2024-02", "price": 355, },
|
||||
{ "type": "DDR5", "name": "DDR5-7600-96GB-C9", "size": 96, "maker": "Crucial", "release": "2024-06", "price": 520, },
|
||||
{ "type": "DDR5", "name": "DDR5-8000-96GB-C10", "size": 96, "maker": "Kingston", "release": "2024-10", "price": 560, },
|
||||
{ "type": "LPDDR4", "name": "LP4-3200-8GB-D1", "size": 8, "maker": "Samsung", "release": "2019-01", "price": 34, },
|
||||
{ "type": "LPDDR4", "name": "LP4-4266-8GB-D2", "size": 8, "maker": "Micron", "release": "2019-07", "price": 39, },
|
||||
{ "type": "LPDDR5", "name": "LP5-5500-12GB-D3", "size": 12, "maker": "Samsung", "release": "2020-03", "price": 58, },
|
||||
{ "type": "LPDDR5", "name": "LP5-6400-16GB-D4", "size": 16, "maker": "SKHynix", "release": "2021-01", "price": 74, },
|
||||
{ "type": "LPDDR5X", "name": "LP5X-7500-24GB-D5", "size": 24, "maker": "Micron", "release": "2022-05", "price": 118, },
|
||||
{ "type": "DDR4", "name": "DDR4-2666-8GB-E1", "size": 8, "maker": "Patriot", "release": "2018-05", "price": 25, },
|
||||
{ "type": "DDR4", "name": "DDR4-3000-8GB-E2", "size": 8, "maker": "ADATA", "release": "2018-09", "price": 28, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-8GB-E3", "size": 8, "maker": "TeamGroup", "release": "2019-04", "price": 30, },
|
||||
{ "type": "DDR4", "name": "DDR4-3600-16GB-E4", "size": 16, "maker": "ADATA", "release": "2020-01", "price": 53, },
|
||||
{ "type": "DDR4", "name": "DDR4-4000-16GB-E5", "size": 16, "maker": "Patriot", "release": "2020-06", "price": 61, },
|
||||
{ "type": "DDR5", "name": "DDR5-5200-8GB-F1", "size": 8, "maker": "TeamGroup", "release": "2021-03", "price": 52, },
|
||||
{ "type": "DDR5", "name": "DDR5-5600-16GB-F2", "size": 16, "maker": "ADATA", "release": "2021-10", "price": 88, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-16GB-F3", "size": 16, "maker": "Patriot", "release": "2022-03", "price": 95, },
|
||||
{ "type": "DDR5", "name": "DDR5-6400-32GB-F4", "size": 32, "maker": "TeamGroup", "release": "2022-09", "price": 168, },
|
||||
{ "type": "DDR5", "name": "DDR5-7200-32GB-F5", "size": 32, "maker": "ADATA", "release": "2023-04", "price": 185, },
|
||||
{ "type": "DDR3", "name": "DDR3-1333-4GB-G1", "size": 4, "maker": "Samsung", "release": "2013-02", "price": 15, },
|
||||
{ "type": "DDR3", "name": "DDR3-1600-4GB-G2", "size": 4, "maker": "Micron", "release": "2014-08", "price": 17, },
|
||||
{ "type": "DDR3", "name": "DDR3-1866-8GB-G3", "size": 8, "maker": "Samsung", "release": "2015-11", "price": 28, },
|
||||
{ "type": "DDR5", "name": "DDR5-8400-128GB-H1", "size": 128, "maker": "Corsair", "release": "2025-01", "price": 890, },
|
||||
{ "type": "DDR5", "name": "DDR5-8800-128GB-H2", "size": 128, "maker": "G.Skill", "release": "2025-03", "price": 940, },
|
||||
{ "type": "DDR5", "name": "DDR5-9200-128GB-H3", "size": 128, "maker": "Kingston", "release": "2025-06", "price": 990, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X1", "size": 48, "maker": "Corsair", "release": "2024-01", "price": 210, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X2", "size": 48, "maker": "Kingston", "release": "2024-02", "price": 215, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X3", "size": 48, "maker": "G.Skill", "release": "2024-03", "price": 218, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X4", "size": 48, "maker": "ADATA", "release": "2024-04", "price": 222, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X5", "size": 48, "maker": "Patriot", "release": "2024-05", "price": 225, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X6", "size": 48, "maker": "TeamGroup", "release": "2024-06", "price": 228, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X7", "size": 48, "maker": "Crucial", "release": "2024-07", "price": 230, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X8", "size": 48, "maker": "Samsung", "release": "2024-08", "price": 235, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X9", "size": 48, "maker": "Micron", "release": "2024-09", "price": 238, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X10", "size": 48, "maker": "SKHynix", "release": "2024-10", "price": 240, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y1", "size": 64, "maker": "Corsair", "release": "2021-01", "price": 180, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y2", "size": 64, "maker": "Kingston", "release": "2021-02", "price": 182, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y3", "size": 64, "maker": "G.Skill", "release": "2021-03", "price": 185, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y4", "size": 64, "maker": "ADATA", "release": "2021-04", "price": 188, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y5", "size": 64, "maker": "Patriot", "release": "2021-05", "price": 190, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y6", "size": 64, "maker": "TeamGroup", "release": "2021-06", "price": 192, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y7", "size": 64, "maker": "Crucial", "release": "2021-07", "price": 195, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y8", "size": 64, "maker": "Samsung", "release": "2021-08", "price": 198, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y9", "size": 64, "maker": "Micron", "release": "2021-09", "price": 200, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y10", "size": 64, "maker": "SKHynix", "release": "2021-10", "price": 205, }
|
||||
|
||||
]
|
||||
ram_sticks = ram_sticks.map((x) => ({
|
||||
...x,
|
||||
release: Number(x.release.split("-")[0]),
|
||||
}))
|
||||
50
old/current_site/src/pages/graph/main.js
Normal file
50
old/current_site/src/pages/graph/main.js
Normal file
@@ -0,0 +1,50 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
showTable('build', ram_sticks);
|
||||
let tableIsDisplayed = true;
|
||||
tableVisibilityButton.addEventListener("click", () => {
|
||||
if (tableIsDisplayed) {
|
||||
clearTable('build')
|
||||
tableVisibilityButton.innerHTML = "Показать таблицу";
|
||||
} else {
|
||||
showTable('build', ram_sticks);
|
||||
tableVisibilityButton.innerHTML = "Скрыть таблицу";
|
||||
}
|
||||
tableIsDisplayed = !tableIsDisplayed;
|
||||
})
|
||||
updateGraph();
|
||||
drawButton.addEventListener("click", () => {
|
||||
clearGraph();
|
||||
updateGraph();
|
||||
});
|
||||
document.querySelectorAll("[name=\"OY\"]").forEach((x) => {
|
||||
x.addEventListener("click", () => { d3.select("#drawButton").attr("class", getOY().length == 0 ? "error" : ""); })
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
|
||||
function updateGraph() {
|
||||
const keyX = ["maker", "release"][getOX()];
|
||||
const yAxis = getOY();
|
||||
d3.select("#drawButton").attr("class", yAxis.length == 0 ? "error" : "");
|
||||
drawGraph(ram_sticks, keyX, yAxis.includes(0), yAxis.includes(1), getGraphType());
|
||||
|
||||
}
|
||||
|
||||
|
||||
function getOX() {
|
||||
return Number(document.querySelector("input[name=\"OX\"]:checked").value);
|
||||
}
|
||||
|
||||
function getOY() {
|
||||
return d3.map(document.querySelectorAll("input[name=\"OY\"]:checked"),
|
||||
(x) => Number(x.value));
|
||||
}
|
||||
|
||||
function clearGraph() {
|
||||
d3.select("svg").selectAll('*').remove();
|
||||
}
|
||||
|
||||
function getGraphType() {
|
||||
return Number(graphType.value);
|
||||
}
|
||||
36
old/current_site/src/pages/graph/table.js
Normal file
36
old/current_site/src/pages/graph/table.js
Normal file
@@ -0,0 +1,36 @@
|
||||
// создание таблицы
|
||||
const showTable = (idTable, data) => {
|
||||
const table = d3.select("#" + idTable);
|
||||
|
||||
// создание строк таблицы (столько, сколько элементов в массиве)
|
||||
const rows = table
|
||||
.selectAll("tr")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('tr')
|
||||
.style("display", "");
|
||||
|
||||
// создание ячеек каждой строки на основе каждого элемента массива
|
||||
const cells = rows
|
||||
.selectAll("td")
|
||||
.data(d => Object.values(d))
|
||||
.enter()
|
||||
.append("td")
|
||||
.text(d => d);
|
||||
|
||||
// создание шапки таблицы
|
||||
const head = table
|
||||
.insert("tr", "tr")
|
||||
.selectAll("th")
|
||||
.data(d => Object.keys(data[0]))
|
||||
.enter()
|
||||
.append("th")
|
||||
.text(d => d);
|
||||
}
|
||||
|
||||
const clearTable = (idTable) => {
|
||||
const table = document.getElementById(idTable);
|
||||
while (table.children.length > 0) {
|
||||
table.removeChild(table.children[0]);
|
||||
}
|
||||
}
|
||||
51
old/current_site/src/pages/index.pug
Normal file
51
old/current_site/src/pages/index.pug
Normal file
@@ -0,0 +1,51 @@
|
||||
include ../components/mixins.pug
|
||||
|
||||
-
|
||||
const infoBlockA = {
|
||||
header: "Embedded Systems",
|
||||
text: "Had a serval projects with different MCUs and wrote firmware for them. My main stack consists of Platformio+EspIdf or Arduino, also tried STM32 asdadas",
|
||||
description: "I love embeded development beceuse of autonomity of produced devices, the redices are not dependant on any other hardware and can work autunomously",
|
||||
img: require('../images/AQ_monitor.png'),
|
||||
imgAlt: "ESP32"
|
||||
}
|
||||
const infoBlockB = {
|
||||
header: "Embedded Systems",
|
||||
text: "Had a serval projects with different MCUs and wrote firmware for them. My main stack consists of Platformio+EspIdf or Arduino, also tried STM32",
|
||||
description: "I love embeded development device because of autonomity of produced devices, the devices are not dependant on any other hardware and can work autunomously or off the grid",
|
||||
img: require('../images/remote.jpeg'),
|
||||
imgAlt: "ESP32"
|
||||
}
|
||||
|
||||
html(lang="en")
|
||||
head
|
||||
meta(charset="UTF-8")
|
||||
title Portfolio
|
||||
|
||||
body
|
||||
+navbarMixin("Home")
|
||||
|
||||
.gallery
|
||||
+galleryMixin()
|
||||
|
||||
.main-container
|
||||
.main-container__content
|
||||
article.info-block
|
||||
h2.info-block__header #{infoBlockA.header}
|
||||
.info-block__container.info-block__container_layout-a
|
||||
p.info-block__text #{infoBlockA.text}
|
||||
.info-block__details
|
||||
p.info-block__description #{infoBlockA.description}
|
||||
a.info-block__link(href="#") More info
|
||||
img.info-block__image(src=infoBlockA.img alt=infoBlockA.imgAlt)
|
||||
|
||||
article.info-block
|
||||
h2.info-block__header #{infoBlockB.header}
|
||||
.info-block__container.info-block__container_layout-b
|
||||
p.info-block__text #{infoBlockB.text}
|
||||
img.info-block__image(src=infoBlockB.img alt=infoBlockB.imgAlt)
|
||||
.info-block__details
|
||||
p.info-block__description #{infoBlockB.description}
|
||||
a.info-block__link(href="./photography-details.html") More info
|
||||
|
||||
.sidebar
|
||||
+infoCardsMinxin()
|
||||
22
old/current_site/src/pages/photography-details.pug
Normal file
22
old/current_site/src/pages/photography-details.pug
Normal file
@@ -0,0 +1,22 @@
|
||||
extends ../components/details-template.pug
|
||||
|
||||
block title
|
||||
title Photography Portfolio - Details
|
||||
|
||||
block navbar
|
||||
+navbarMixin("Photography")
|
||||
|
||||
block header
|
||||
h1.details__title Photography
|
||||
p.details__description I prefer landscape photography.
|
||||
|
||||
block text
|
||||
p.details__text-content D3100 -> SLT A58.
|
||||
|
||||
block gallery
|
||||
.details__gallery-item
|
||||
img.details__gallery-image(src=require('../images/photos/image0.png') alt="Photography 1")
|
||||
.details__gallery-item
|
||||
img.details__gallery-image(src=require('../images/photos/image1.png') alt="Photography 2")
|
||||
.details__gallery-item
|
||||
img.details__gallery-image(src=require('../images/photos/image2.png') alt="Photography 3")
|
||||
82
old/current_site/src/pages/svg_playground.pug
Normal file
82
old/current_site/src/pages/svg_playground.pug
Normal file
@@ -0,0 +1,82 @@
|
||||
include ../components/mixins.pug
|
||||
|
||||
|
||||
doctype html
|
||||
html(lang="ru")
|
||||
head
|
||||
meta(charset="utf-8")
|
||||
title Трансформация и анимация
|
||||
script(src="svg_playground/d3.v7.min.js")
|
||||
script(src="svg_playground/main.js")
|
||||
script(src="svg_playground/image.js")
|
||||
script(src="svg_playground/path.js")
|
||||
body
|
||||
+navbarMixin("SVG Playground")
|
||||
|
||||
form#setting
|
||||
p.path-anim-related-inverse
|
||||
| Координаты рисунка
|
||||
br
|
||||
label(for="cx") x:
|
||||
input#cx(type="number", value="300", max="600", min="0")
|
||||
label.anim-related(for="cx_finish") до:
|
||||
input#cx_finish.anim-related(type="number", value="300", max="600", min="0")
|
||||
br
|
||||
label(for="cy") y:
|
||||
input#cy(type="number", value="300", max="600", min="0")
|
||||
label.anim-related(for="cy_finish") до:
|
||||
input.anim-related#cy_finish(type="number", value="300", max="600", min="0")
|
||||
|
||||
p.path-anim-related
|
||||
| Пути перемещения
|
||||
br
|
||||
select#pathSelect
|
||||
option(value="0") Буквой "Г"
|
||||
option(value="1") По кругу
|
||||
option(value="2") Спиралью
|
||||
|
||||
p
|
||||
| Масштаб
|
||||
br
|
||||
label(for="sx") по x:
|
||||
input#sx(type="number", value="1", max="100", min="-100")
|
||||
label.anim-related(for="sx_finish") до:
|
||||
input#sx_finish.anim-related(type="number", value="1.5", max="100", min="-100")
|
||||
br
|
||||
label(for="sy") по y:
|
||||
input#sy(type="number", value="1", max="100", min="-100")
|
||||
label.anim-related(for="sy_finish") до:
|
||||
input#sy_finish.anim-related(type="number", value="1.5", max="100", min="-100")
|
||||
|
||||
p
|
||||
| Поворот
|
||||
br
|
||||
label(for="r") x:
|
||||
input#r(type="number", value="0", max="360", min="-360")
|
||||
label.anim-related(for="r_finish") до:
|
||||
input#r_finish.anim-related(type="number", value="360", max="360", min="-360")
|
||||
|
||||
p.anim-related
|
||||
| Время анамации (мс)
|
||||
br
|
||||
label(for="duration") x:
|
||||
input#duration(type="number", value="2000", max="10000", min="1")
|
||||
|
||||
p
|
||||
input#applyButton.anim-related-inverse(type="button", value="Нарисовать")
|
||||
input#clearButton(type="button", value="Отчистить")
|
||||
|
||||
p
|
||||
| Включить Анимацию?
|
||||
input#enableAnimCheckbox(type="checkbox")
|
||||
br
|
||||
label.anim-related(for="animAlongPathCheckbox") Перемещение вдоль пути?
|
||||
input#animAlongPathCheckbox.anim-related(type="checkbox")
|
||||
select#animTypeSelect.anim-related
|
||||
option(value="0") linear
|
||||
option(value="1") elastic
|
||||
option(value="2") bounce
|
||||
br
|
||||
input#startAnimButton.anim-related(type="button", value="Анимировать")
|
||||
|
||||
svg
|
||||
2
old/current_site/src/pages/svg_playground/d3.v7.min.js
vendored
Normal file
2
old/current_site/src/pages/svg_playground/d3.v7.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
33
old/current_site/src/pages/svg_playground/image.js
Normal file
33
old/current_site/src/pages/svg_playground/image.js
Normal file
@@ -0,0 +1,33 @@
|
||||
// создаем изображение смайлик
|
||||
// рисуем его относительно точки (0, 0)
|
||||
function drawSmile(svg) {
|
||||
let smile = svg.append("g")
|
||||
.style("stroke", "brown")
|
||||
.style("stroke-width", 0)
|
||||
.style("fill", "brown");
|
||||
|
||||
for (let t = 0; t <= Math.PI * 6; t += .8) {
|
||||
let cords = {
|
||||
x: 50 / 3 * (1 - (t / (Math.PI * 6))) * -Math.sin(t),
|
||||
y: 50 / 3 * (1 - (t / (Math.PI * 6))) * Math.cos(t)
|
||||
}
|
||||
smile.append("circle")
|
||||
.attr("cx", cords["x"])
|
||||
.attr("cy", cords["y"])
|
||||
.attr("r", (1 - (t / (Math.PI * 6))))
|
||||
.style("fill", "red");
|
||||
}
|
||||
|
||||
for (let t = .4; t <= Math.PI * 6; t += .8) {
|
||||
let cords = {
|
||||
x: 50 / 3 * (1 - (t / (Math.PI * 6))) * -Math.sin(t),
|
||||
y: 50 / 3 * (1 - (t / (Math.PI * 6))) *Math.cos(t)
|
||||
}
|
||||
smile.append("circle")
|
||||
.attr("cx", cords["x"])
|
||||
.attr("cy", cords["y"])
|
||||
.attr("r", (1 - (t / (Math.PI * 6))))
|
||||
.style("fill", "green");
|
||||
}
|
||||
return smile
|
||||
}
|
||||
93
old/current_site/src/pages/svg_playground/main.js
Normal file
93
old/current_site/src/pages/svg_playground/main.js
Normal file
@@ -0,0 +1,93 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const width = 600;
|
||||
const height = 600;
|
||||
const svg = d3.select("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
// let pict1 = drawSmile(svg);
|
||||
// pict1.attr("transform", `translate(400, 400) scale(1.5, 1.5) rotate(180)`);
|
||||
|
||||
// let pict = drawSmile(svg);
|
||||
// pict.attr("transform", "translate(200, 200)");
|
||||
|
||||
setting.applyButton.addEventListener("click", () => {
|
||||
draw(setting);
|
||||
})
|
||||
setting.clearButton.addEventListener("click", () => {
|
||||
svg.selectAll('*').remove()
|
||||
})
|
||||
|
||||
updateAnimationControllsDisplay();
|
||||
enableAnimCheckbox.addEventListener("change", updateAnimationControllsDisplay);
|
||||
animAlongPathCheckbox.addEventListener("change", updateAnimationControllsDisplay);
|
||||
|
||||
|
||||
startAnimButton.addEventListener("click", () => {
|
||||
animRouter(setting)
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
const updateAnimationControllsDisplay = () => {
|
||||
let isChecked = enableAnimCheckbox.checked;
|
||||
let isPathAnim = animAlongPathCheckbox.checked;
|
||||
// console.log(isChecked);
|
||||
document.querySelectorAll(".anim-related").forEach((elem) => { elem.hidden = !isChecked });
|
||||
document.querySelectorAll(".anim-related-inverse").forEach((elem) => { elem.hidden = isChecked });
|
||||
document.querySelectorAll(".path-anim-related").forEach((elem) => { elem.hidden = !(isPathAnim && isChecked) });
|
||||
document.querySelectorAll(".path-anim-related-inverse").forEach((elem) => { elem.hidden = (isPathAnim && isChecked) });
|
||||
}
|
||||
|
||||
|
||||
const draw = (dataForm) => {
|
||||
const svg = d3.select("svg")
|
||||
let pict = drawSmile(svg);
|
||||
pict.attr("transform", `
|
||||
translate(${dataForm.cx.value},
|
||||
${dataForm.cy.value})
|
||||
scale(${dataForm.sx.value},
|
||||
${dataForm.sy.value})
|
||||
rotate(${dataForm.r.value})`);
|
||||
|
||||
}
|
||||
|
||||
const animRouter = (dataForm) => {
|
||||
if (dataForm.animAlongPathCheckbox.checked) {
|
||||
let path = drawPath(Number(dataForm.pathSelect.value));
|
||||
const svg = d3.select("svg")
|
||||
let pict = drawSmile(svg);
|
||||
const parameters = {
|
||||
sx:[Number(dataForm.sx.value),Number(dataForm.sx_finish.value)],
|
||||
sy:[Number(dataForm.sy.value),Number(dataForm.sy_finish.value)],
|
||||
r:[Number(dataForm.r.value),Number(dataForm.r_finish.value)],
|
||||
};
|
||||
pict.transition()
|
||||
.ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
|
||||
.duration(Number(duration.value))
|
||||
.attrTween('transform', translateAlong(path.node(),parameters));
|
||||
}
|
||||
else {
|
||||
runAnimation(dataForm)
|
||||
}
|
||||
}
|
||||
|
||||
const runAnimation = (dataForm) => {
|
||||
const svg = d3.select("svg")
|
||||
let pict = drawSmile(svg);
|
||||
pict.attr("transform", `
|
||||
translate(${dataForm.cx.value},
|
||||
${dataForm.cy.value})
|
||||
scale(${dataForm.sx.value},
|
||||
${dataForm.sy.value})
|
||||
rotate(${dataForm.r.value})`)
|
||||
.transition()
|
||||
.duration(Number(duration.value))
|
||||
.ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
|
||||
.attr("transform", `
|
||||
translate(${dataForm.cx_finish.value},
|
||||
${dataForm.cy_finish.value})
|
||||
scale(${dataForm.sx_finish.value},
|
||||
${dataForm.sy_finish.value})
|
||||
rotate(${dataForm.r_finish.value})`);
|
||||
}
|
||||
99
old/current_site/src/pages/svg_playground/path.js
Normal file
99
old/current_site/src/pages/svg_playground/path.js
Normal file
@@ -0,0 +1,99 @@
|
||||
/* массив точек пути будет иметь следующий вид:
|
||||
[
|
||||
{x: координата, y: координата},
|
||||
{x: координата, y: координата},
|
||||
...
|
||||
]
|
||||
*/
|
||||
// создаем массив точек, расположенных буквой "Г"
|
||||
function createPathG() {
|
||||
const svg = d3.select("svg")
|
||||
const width = svg.attr("width")
|
||||
const height = svg.attr("height")
|
||||
|
||||
let data = [];
|
||||
const padding = 100;
|
||||
//начальное положение рисунка
|
||||
let posX = padding;
|
||||
let posY = height - padding;
|
||||
const h = 5;
|
||||
// координаты y - уменьшаются, x - постоянны
|
||||
while (posY > padding) {
|
||||
data.push({ x: posX, y: posY });
|
||||
posY -= h;
|
||||
}
|
||||
// координаты y - постоянны, x - увеличиваются
|
||||
while (posX < width - padding) {
|
||||
data.push({ x: posX, y: posY });
|
||||
posX += h;
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
// создаем массив точек, расположенных по кругу
|
||||
function createPathCircle() {
|
||||
const svg = d3.select("svg")
|
||||
const width = svg.attr("width")
|
||||
const height = svg.attr("height")
|
||||
let data = [];
|
||||
// используем параметрическую форму описания круга
|
||||
// центр расположен в центре svg-элемента, а радиус равен трети высоты/ширины
|
||||
for (let t = 0; t <= Math.PI * 2; t += 0.1) {
|
||||
data.push(
|
||||
{
|
||||
x: width / 2 + width / 3 * Math.sin(t),
|
||||
y: height / 2 + height / 3 * Math.cos(t)
|
||||
}
|
||||
);
|
||||
}
|
||||
return data
|
||||
}
|
||||
function createPathSpiral() {
|
||||
const svg = d3.select("svg")
|
||||
const width = svg.attr("width")
|
||||
const height = svg.attr("height")
|
||||
let data = [];
|
||||
// используем параметрическую форму описания круга
|
||||
// центр расположен в центре svg-элемента, а радиус равен трети высоты/ширины
|
||||
for (let t = 0; t <= Math.PI * 6; t += 0.1) {
|
||||
data.push(
|
||||
{
|
||||
x: width / 2 + width / 3 * (1 - (t / (Math.PI * 6))) * -Math.sin(t),
|
||||
y: height / 2 + height / 3 * (1 - (t / (Math.PI * 6))) * Math.cos(t)
|
||||
}
|
||||
);
|
||||
}
|
||||
return data
|
||||
}
|
||||
const drawPath = (typePath) => {
|
||||
// создаем массив точек
|
||||
const dataPoints = [createPathG, createPathCircle, createPathSpiral][Number(typePath)]()
|
||||
|
||||
const line = d3.line()
|
||||
.x((d) => d.x)
|
||||
.y((d) => d.y);
|
||||
const svg = d3.select("svg")
|
||||
// создаем путь на основе массива точек
|
||||
const path = svg.append('path')
|
||||
.attr('d', line(dataPoints))
|
||||
.attr('stroke', 'black')
|
||||
.attr('fill', 'none');
|
||||
|
||||
return path;
|
||||
}
|
||||
|
||||
function translateAlong(path, params) {
|
||||
const length = path.getTotalLength();
|
||||
|
||||
return function () {
|
||||
return function (t) {
|
||||
const { x, y } = path.getPointAtLength(t * length);
|
||||
return `
|
||||
translate(${x},${y})
|
||||
scale(${params.sx[0] +(params.sx[1] - params.sx[0])*t},
|
||||
${params.sy[0] +(params.sy[1] - params.sy[0])*t})
|
||||
rotate(${params.r[0] +(params.r[1] - params.r[0])*t})
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
old/current_site/src/pages/table.pug
Normal file
19
old/current_site/src/pages/table.pug
Normal file
@@ -0,0 +1,19 @@
|
||||
include ../components/mixins.pug
|
||||
|
||||
head
|
||||
title table
|
||||
script(src='./table/data.js')
|
||||
script(src='./table/filter.js')
|
||||
script(src='./table/main.js')
|
||||
script(src='./table/sort.js')
|
||||
script(src='./table/table.js')
|
||||
|
||||
body
|
||||
+navbarMixin("Table")
|
||||
|
||||
.table-controls
|
||||
+filtersMixin()
|
||||
+sortingMixin()
|
||||
+graphMixin()
|
||||
|
||||
table(id='list')
|
||||
68
old/current_site/src/pages/table/data.js
Normal file
68
old/current_site/src/pages/table/data.js
Normal file
@@ -0,0 +1,68 @@
|
||||
let ram_sticks = [
|
||||
{ "type": "DDR3", "name": "DDR3-1600-4GB-A1", "size": 4, "maker": "Kingston", "release": "2014-03", "price": 18, },
|
||||
{ "type": "DDR3", "name": "DDR3-1600-8GB-A2", "size": 8, "maker": "Corsair", "release": "2015-06", "price": 26, },
|
||||
{ "type": "DDR3", "name": "DDR3-1866-8GB-A3", "size": 8, "maker": "G.Skill", "release": "2016-02", "price": 29, },
|
||||
{ "type": "DDR4", "name": "DDR4-2133-8GB-B1", "size": 8, "maker": "Crucial", "release": "2017-01", "price": 24, },
|
||||
{ "type": "DDR4", "name": "DDR4-2400-8GB-B2", "size": 8, "maker": "Kingston", "release": "2017-09", "price": 27, },
|
||||
{ "type": "DDR4", "name": "DDR4-2666-16GB-B3", "size": 16, "maker": "Corsair", "release": "2018-04", "price": 48, },
|
||||
{ "type": "DDR4", "name": "DDR4-3000-16GB-B4", "size": 16, "maker": "G.Skill", "release": "2018-11", "price": 52, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-16GB-B5", "size": 16, "maker": "HyperX", "release": "2019-03", "price": 55, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-32GB-B6", "size": 32, "maker": "Crucial", "release": "2019-08", "price": 92, },
|
||||
{ "type": "DDR4", "name": "DDR4-3600-32GB-B7", "size": 32, "maker": "Corsair", "release": "2020-02", "price": 99, },
|
||||
{ "type": "DDR5", "name": "DDR5-4800-16GB-C1", "size": 16, "maker": "Kingston", "release": "2021-01", "price": 78, },
|
||||
{ "type": "DDR5", "name": "DDR5-5200-16GB-C2", "size": 16, "maker": "Corsair", "release": "2021-06", "price": 84, },
|
||||
{ "type": "DDR5", "name": "DDR5-5600-32GB-C3", "size": 32, "maker": "G.Skill", "release": "2022-02", "price": 145, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-32GB-C4", "size": 32, "maker": "Crucial", "release": "2022-07", "price": 158, },
|
||||
{ "type": "DDR5", "name": "DDR5-6400-32GB-C5", "size": 32, "maker": "Corsair", "release": "2023-01", "price": 172, },
|
||||
{ "type": "DDR5", "name": "DDR5-6600-64GB-C6", "size": 64, "maker": "Kingston", "release": "2023-05", "price": 310, },
|
||||
{ "type": "DDR5", "name": "DDR5-6800-64GB-C7", "size": 64, "maker": "G.Skill", "release": "2023-09", "price": 329, },
|
||||
{ "type": "DDR5", "name": "DDR5-7200-64GB-C8", "size": 64, "maker": "Corsair", "release": "2024-02", "price": 355, },
|
||||
{ "type": "DDR5", "name": "DDR5-7600-96GB-C9", "size": 96, "maker": "Crucial", "release": "2024-06", "price": 520, },
|
||||
{ "type": "DDR5", "name": "DDR5-8000-96GB-C10", "size": 96, "maker": "Kingston", "release": "2024-10", "price": 560, },
|
||||
{ "type": "LPDDR4", "name": "LP4-3200-8GB-D1", "size": 8, "maker": "Samsung", "release": "2019-01", "price": 34, },
|
||||
{ "type": "LPDDR4", "name": "LP4-4266-8GB-D2", "size": 8, "maker": "Micron", "release": "2019-07", "price": 39, },
|
||||
{ "type": "LPDDR5", "name": "LP5-5500-12GB-D3", "size": 12, "maker": "Samsung", "release": "2020-03", "price": 58, },
|
||||
{ "type": "LPDDR5", "name": "LP5-6400-16GB-D4", "size": 16, "maker": "SKHynix", "release": "2021-01", "price": 74, },
|
||||
{ "type": "LPDDR5X", "name": "LP5X-7500-24GB-D5", "size": 24, "maker": "Micron", "release": "2022-05", "price": 118, },
|
||||
{ "type": "DDR4", "name": "DDR4-2666-8GB-E1", "size": 8, "maker": "Patriot", "release": "2018-05", "price": 25, },
|
||||
{ "type": "DDR4", "name": "DDR4-3000-8GB-E2", "size": 8, "maker": "ADATA", "release": "2018-09", "price": 28, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-8GB-E3", "size": 8, "maker": "TeamGroup", "release": "2019-04", "price": 30, },
|
||||
{ "type": "DDR4", "name": "DDR4-3600-16GB-E4", "size": 16, "maker": "ADATA", "release": "2020-01", "price": 53, },
|
||||
{ "type": "DDR4", "name": "DDR4-4000-16GB-E5", "size": 16, "maker": "Patriot", "release": "2020-06", "price": 61, },
|
||||
{ "type": "DDR5", "name": "DDR5-5200-8GB-F1", "size": 8, "maker": "TeamGroup", "release": "2021-03", "price": 52, },
|
||||
{ "type": "DDR5", "name": "DDR5-5600-16GB-F2", "size": 16, "maker": "ADATA", "release": "2021-10", "price": 88, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-16GB-F3", "size": 16, "maker": "Patriot", "release": "2022-03", "price": 95, },
|
||||
{ "type": "DDR5", "name": "DDR5-6400-32GB-F4", "size": 32, "maker": "TeamGroup", "release": "2022-09", "price": 168, },
|
||||
{ "type": "DDR5", "name": "DDR5-7200-32GB-F5", "size": 32, "maker": "ADATA", "release": "2023-04", "price": 185, },
|
||||
{ "type": "DDR3", "name": "DDR3-1333-4GB-G1", "size": 4, "maker": "Samsung", "release": "2013-02", "price": 15, },
|
||||
{ "type": "DDR3", "name": "DDR3-1600-4GB-G2", "size": 4, "maker": "Micron", "release": "2014-08", "price": 17, },
|
||||
{ "type": "DDR3", "name": "DDR3-1866-8GB-G3", "size": 8, "maker": "Samsung", "release": "2015-11", "price": 28, },
|
||||
{ "type": "DDR5", "name": "DDR5-8400-128GB-H1", "size": 128, "maker": "Corsair", "release": "2025-01", "price": 890, },
|
||||
{ "type": "DDR5", "name": "DDR5-8800-128GB-H2", "size": 128, "maker": "G.Skill", "release": "2025-03", "price": 940, },
|
||||
{ "type": "DDR5", "name": "DDR5-9200-128GB-H3", "size": 128, "maker": "Kingston", "release": "2025-06", "price": 990, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X1", "size": 48, "maker": "Corsair", "release": "2024-01", "price": 210, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X2", "size": 48, "maker": "Kingston", "release": "2024-02", "price": 215, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X3", "size": 48, "maker": "G.Skill", "release": "2024-03", "price": 218, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X4", "size": 48, "maker": "ADATA", "release": "2024-04", "price": 222, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X5", "size": 48, "maker": "Patriot", "release": "2024-05", "price": 225, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X6", "size": 48, "maker": "TeamGroup", "release": "2024-06", "price": 228, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X7", "size": 48, "maker": "Crucial", "release": "2024-07", "price": 230, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X8", "size": 48, "maker": "Samsung", "release": "2024-08", "price": 235, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X9", "size": 48, "maker": "Micron", "release": "2024-09", "price": 238, },
|
||||
{ "type": "DDR5", "name": "DDR5-6000-48GB-X10", "size": 48, "maker": "SKHynix", "release": "2024-10", "price": 240, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y1", "size": 64, "maker": "Corsair", "release": "2021-01", "price": 180, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y2", "size": 64, "maker": "Kingston", "release": "2021-02", "price": 182, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y3", "size": 64, "maker": "G.Skill", "release": "2021-03", "price": 185, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y4", "size": 64, "maker": "ADATA", "release": "2021-04", "price": 188, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y5", "size": 64, "maker": "Patriot", "release": "2021-05", "price": 190, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y6", "size": 64, "maker": "TeamGroup", "release": "2021-06", "price": 192, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y7", "size": 64, "maker": "Crucial", "release": "2021-07", "price": 195, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y8", "size": 64, "maker": "Samsung", "release": "2021-08", "price": 198, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y9", "size": 64, "maker": "Micron", "release": "2021-09", "price": 200, },
|
||||
{ "type": "DDR4", "name": "DDR4-3200-64GB-Y10", "size": 64, "maker": "SKHynix", "release": "2021-10", "price": 205, }
|
||||
|
||||
]
|
||||
ram_sticks = ram_sticks.map((x) => ({
|
||||
...x,
|
||||
release: Number(x.release.split("-")[0]),
|
||||
}))
|
||||
92
old/current_site/src/pages/table/filter.js
Normal file
92
old/current_site/src/pages/table/filter.js
Normal file
@@ -0,0 +1,92 @@
|
||||
const correspond = {
|
||||
"type": "type",
|
||||
"name": "name",
|
||||
"maker": "manufacturer",
|
||||
"size": ["sizeFrom", "sizeTo"],
|
||||
"release": ["releaseDateFrom", "releaseDateTo"],
|
||||
"price": ["priceFrom", "priceTo"]
|
||||
}
|
||||
|
||||
|
||||
/* Структура возвращаемого ассоциативного массива:
|
||||
{
|
||||
input_id: input_value,
|
||||
...
|
||||
}
|
||||
*/
|
||||
const dataFilter = (dataForm) => {
|
||||
let dictFilter = {};
|
||||
|
||||
// перебираем все элементы формы с фильтрами
|
||||
for (const item of dataForm.elements) {
|
||||
|
||||
// получаем значение элемента
|
||||
let valInput = item.value;
|
||||
|
||||
// если поле типа text - приводим его значение к нижнему регистру
|
||||
if (item.type === "text") {
|
||||
valInput = valInput.toLowerCase();
|
||||
}
|
||||
|
||||
if (item.type === "number") {
|
||||
if (valInput === "") {
|
||||
if (item.id.includes("From")) {
|
||||
valInput = -Infinity;
|
||||
}
|
||||
else {
|
||||
valInput = Infinity;
|
||||
}
|
||||
}
|
||||
else {
|
||||
valInput = Number(valInput);
|
||||
}
|
||||
}
|
||||
|
||||
// формируем очередной элемент ассоциативного массива
|
||||
dictFilter[item.id] = valInput;
|
||||
}
|
||||
return dictFilter;
|
||||
}
|
||||
|
||||
|
||||
// фильтрация таблицы
|
||||
const filterTable = (data, idTable, dataForm) => {
|
||||
|
||||
// получаем данные из полей формы
|
||||
const datafilter = dataFilter(dataForm);
|
||||
|
||||
// выбираем данные соответствующие фильтру и формируем таблицу из них
|
||||
let tableFilter = data.filter(item => {
|
||||
|
||||
/* в этой переменной будут "накапливаться" результаты сравнения данных
|
||||
с параметрами фильтра */
|
||||
let result = true;
|
||||
|
||||
// строка соответствует фильтру, если сравнение всех значения из input
|
||||
// со значением ячейки очередной строки - истина
|
||||
Object.entries(item).map(([key, val]) => {
|
||||
|
||||
// текстовые поля проверяем на вхождение
|
||||
if (typeof val == 'string') {
|
||||
result &&= val.toLowerCase().includes(datafilter[correspond[key]])
|
||||
}
|
||||
|
||||
// САМОСТОЯТЕЛЬНО проверить числовые поля на принадлежность интервалу
|
||||
if (typeof val == 'number') {
|
||||
result &&= datafilter[correspond[key][0]] <= Number(val) && datafilter[correspond[key][1]] >= Number(val)
|
||||
}
|
||||
// console.log(result, key, )
|
||||
});
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
// САМОСТОЯТЕЛЬНО вызвать функцию, которая удаляет все строки таблицы с id=idTable
|
||||
clearTable(idTable);
|
||||
// показать на странице таблицу с отфильтрованными строками
|
||||
createTable(tableFilter, idTable);
|
||||
}
|
||||
|
||||
const clearFilters = (form) => {
|
||||
form.querySelectorAll(`& input[type="text"],& input[type="number"]`).forEach((elem) => elem.value = null)
|
||||
}
|
||||
122
old/current_site/src/pages/table/main.js
Normal file
122
old/current_site/src/pages/table/main.js
Normal file
@@ -0,0 +1,122 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
doInit()
|
||||
})
|
||||
|
||||
function doInit() {
|
||||
createTable(ram_sticks, 'list');
|
||||
const clearFiltersButton = document.getElementById("clearFiltersButton");
|
||||
clearFiltersButton.addEventListener("click", (event) => {
|
||||
clearFilters(filters);
|
||||
createTable(ram_sticks, 'list');
|
||||
sortTable('list', sorting)
|
||||
})
|
||||
|
||||
const applyFiltersButton = document.getElementById("applyFiltersButton");
|
||||
applyFiltersButton.addEventListener("click", (event) => {
|
||||
filterTable(ram_sticks, 'list', filters)
|
||||
sortTable('list', sorting)
|
||||
})
|
||||
|
||||
setSortSelects(ram_sticks[0], sorting)
|
||||
|
||||
let i = 0;
|
||||
for (const elem of sorting.querySelectorAll(`& select`)) {
|
||||
const counter = i;
|
||||
elem.addEventListener("change", () => {
|
||||
updateOptions(counter, sorting)
|
||||
})
|
||||
i+=1;
|
||||
}
|
||||
|
||||
sorting.applySortButton.addEventListener("click", () => {
|
||||
clearTable('list');
|
||||
filterTable(ram_sticks, 'list', filters)
|
||||
sortTable('list', sorting)
|
||||
});
|
||||
sorting.resetSortButton.addEventListener("click", () => {
|
||||
resetSort(sorting);
|
||||
clearTable('list');
|
||||
filterTable(ram_sticks, 'list', filters)
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
const createOption = (str, val) => {
|
||||
let item = document.createElement('option');
|
||||
item.text = str;
|
||||
item.value = val;
|
||||
return item;
|
||||
}
|
||||
const resetSortSelect = (sortSelect) => {
|
||||
sortSelect.querySelectorAll(`& option`).forEach((elem) => {
|
||||
elem.parentElement.removeChild(elem)
|
||||
})
|
||||
}
|
||||
const all_fields = Object.keys(ram_sticks[0]);
|
||||
|
||||
const setSortSelect = (arr, sortSelect) => {
|
||||
|
||||
// создаем OPTION Нет и добавляем ее в SELECT
|
||||
sortSelect.append(createOption('none', 0));
|
||||
// перебираем массив со значениями опций
|
||||
arr.forEach((item, index) => {
|
||||
sortSelect.append(createOption(item, all_fields.indexOf(item) + 1));
|
||||
});
|
||||
}
|
||||
const updateOptions = (current_index, sort_form) => {
|
||||
const elem_collection = sort_form.querySelectorAll(`& select`);
|
||||
let used_options_list = []
|
||||
let i = 0;
|
||||
for (let elem_ of elem_collection) {
|
||||
if (i++ < current_index) {
|
||||
used_options_list.push(all_fields[elem_.value-1])
|
||||
}
|
||||
}
|
||||
if (current_index >= elem_collection.length) {
|
||||
return;
|
||||
}
|
||||
const elem = elem_collection[current_index]
|
||||
const available_options = all_fields.filter((x) => !used_options_list.includes(x));
|
||||
elem.disabled = available_options.length == 0;
|
||||
if(current_index>0){
|
||||
elem.disabled |= elem_collection[current_index-1].value==0;
|
||||
}
|
||||
|
||||
if(elem.disabled){
|
||||
elem.value = 0;
|
||||
}
|
||||
|
||||
save_val = 0;
|
||||
if (!used_options_list.includes(all_fields[elem.value - 1])) {
|
||||
save_val = elem.value;
|
||||
}
|
||||
resetSortSelect(elem)
|
||||
setSortSelect(available_options, elem)
|
||||
|
||||
elem.value = save_val;
|
||||
|
||||
|
||||
updateOptions(current_index + 1, sort_form)
|
||||
|
||||
}
|
||||
// формируем поля со списком для многоуровневой сортировки
|
||||
const setSortSelects = (data, dataForm) => {
|
||||
const head = Object.keys(data);
|
||||
const allSelect = dataForm.getElementsByTagName('select');
|
||||
|
||||
for (const item of dataForm.elements) {
|
||||
setSortSelect(head, item);
|
||||
}
|
||||
let skipped = false
|
||||
for (const elem of allSelect) {
|
||||
if (!skipped) {
|
||||
skipped = true;
|
||||
continue;
|
||||
}
|
||||
elem.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
const resetSort = (form) => {
|
||||
form.querySelectorAll(`& select`).forEach((curSelect, index) => { if (index != 0) { curSelect.disabled = true } curSelect.value = 0 })
|
||||
}
|
||||
87
old/current_site/src/pages/table/sort.js
Normal file
87
old/current_site/src/pages/table/sort.js
Normal file
@@ -0,0 +1,87 @@
|
||||
/*формируем массив для сортировки по двум уровням вида
|
||||
[
|
||||
{column: номер столбца, по которому осуществляется сортировка,
|
||||
direction: порядок сортировки (true по убыванию, false по возрастанию)
|
||||
},
|
||||
...
|
||||
]
|
||||
*/
|
||||
const createSortArr = (data) => {
|
||||
let sortArr = [];
|
||||
|
||||
const sortSelects = data.getElementsByTagName('select');
|
||||
|
||||
for (const item of sortSelects) {
|
||||
// получаем номер выбранной опции
|
||||
const keySort = item.value;
|
||||
// в случае, если выбрана опция Нет, заканчиваем формировать массив
|
||||
if (keySort == 0) {
|
||||
break;
|
||||
}
|
||||
// получаем порядок сортировки очередного уровня
|
||||
// имя флажка сформировано как имя поля SELECT и слова Desc
|
||||
const desc = document.getElementById(item.id + 'Desc').checked;
|
||||
// очередной элемент массива - по какому столбцу и в каком порядке сортировать
|
||||
sortArr.push(
|
||||
{
|
||||
column: keySort - 1,
|
||||
direction: desc
|
||||
}
|
||||
);
|
||||
}
|
||||
return sortArr;
|
||||
};
|
||||
|
||||
const numberColumns = [2, 4, 5]
|
||||
|
||||
const sortTable = (idTable, formData) => {
|
||||
|
||||
// формируем управляющий массив для сортировки
|
||||
const sortArr = createSortArr(formData);
|
||||
|
||||
// сортировать таблицу не нужно, во всех полях выбрана опция Нет
|
||||
if (sortArr.length === 0) {
|
||||
// clearTable(idTable)
|
||||
return false;
|
||||
|
||||
}
|
||||
//находим нужную таблицу
|
||||
let table = document.getElementById(idTable);
|
||||
|
||||
// преобразуем строки таблицы в массив
|
||||
let rowData = Array.from(table.rows);
|
||||
|
||||
// удаляем элемент с заголовками таблицы
|
||||
const headerRow = rowData.shift();
|
||||
|
||||
//сортируем данные по всем уровням сортировки
|
||||
rowData.sort((first, second) => {
|
||||
for (let { column, direction } of sortArr) {
|
||||
const firstCell = first.cells[column].innerHTML;
|
||||
const secondCell = second.cells[column].innerHTML;
|
||||
|
||||
// используем localeCompare для корректного сравнения
|
||||
let comparison = null;
|
||||
if (numberColumns.includes(column)) {
|
||||
comparison = Number(firstCell) - Number(secondCell);
|
||||
}
|
||||
else {
|
||||
comparison = firstCell.localeCompare(secondCell);
|
||||
}
|
||||
// учитываем направление сортировки
|
||||
if (comparison !== 0) {
|
||||
return (direction ? -comparison : comparison);
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
clearTable(idTable)
|
||||
//выводим отсортированную таблицу на страницу
|
||||
|
||||
let tbody = document.createElement('tbody');
|
||||
rowData.forEach(item => {
|
||||
tbody.append(item);
|
||||
});
|
||||
table.append(tbody);
|
||||
return true;
|
||||
}
|
||||
51
old/current_site/src/pages/table/table.js
Normal file
51
old/current_site/src/pages/table/table.js
Normal file
@@ -0,0 +1,51 @@
|
||||
const createTable = (data, idTable) => {
|
||||
const table = document.getElementById(idTable);
|
||||
if (data.length == 0) {
|
||||
return;
|
||||
}
|
||||
const header = Object.keys(data[0]);
|
||||
|
||||
/* создание шапки таблицы */
|
||||
if (!table.firstElementChild) {
|
||||
const headerRow = createHeaderRow(header);
|
||||
table.append(headerRow);
|
||||
}
|
||||
|
||||
/* создание тела таблицы */
|
||||
const bodyRows = createBodyRows(data);
|
||||
table.append(bodyRows);
|
||||
};
|
||||
|
||||
const clearTable = (idTable) => {
|
||||
const table = document.getElementById(idTable);
|
||||
if (table.children.length > 1) {
|
||||
table.removeChild(table.children[1]);
|
||||
}
|
||||
}
|
||||
|
||||
const createHeaderRow = (headers) => {
|
||||
const tr = document.createElement('tr');
|
||||
headers.forEach(header => {
|
||||
const th = document.createElement('th');
|
||||
|
||||
th.innerHTML = header.slice(0,1).toUpperCase()+header.slice(1);
|
||||
tr.append(th);
|
||||
});
|
||||
const thead = document.createElement('thead')
|
||||
thead.appendChild(tr)
|
||||
return thead;
|
||||
};
|
||||
|
||||
const createBodyRows = (rows) => {
|
||||
const body = document.createElement('tbody');
|
||||
rows.forEach(row => {
|
||||
const rowElement = document.createElement('tr');
|
||||
for (let key in row) {
|
||||
const td = document.createElement('td');
|
||||
td.innerHTML = row[key];
|
||||
rowElement.appendChild(td);
|
||||
}
|
||||
body.appendChild(rowElement);
|
||||
})
|
||||
return body;
|
||||
}
|
||||
Reference in New Issue
Block a user