iptables.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="keywords" content="iptables, iptables visual scheme">
   <meta name="author" content="zersh">

   <title>Iptables interactive scheme</title>

   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <div id="container">
      <div id="top">
         <button id="button1" onclick="buttonClicked(this)"></button>
         <button id="button2" onclick="buttonClicked(this)" style="margin-right: 10px;"></button>
         <span>Extension:</span> 
	 <select id="extensionSelect" style="margin-right: 10px;">
            <option value="none">None</option>
	 </select>
	<div id="extensionTooltip" class="custom-tooltip">Загрузка...</div>
         <span>Lang:</span> 
         <select id="languageSelect">
            <option value="ru">RU</option>
            <option value="en">EN</option>
            <option value="zh_CN">zh_CN</option>
         </select>
      </div>
      <div id="middle">
         <div class="svg-container"><!-- SVG контейнер будет здесь --></div>
      </div>
     <div id="comment">
       	<h2 id="information-title"></h2>
	<div id="description-container"></div>
     </div>
   </div>
   
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.10.2/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   <script>
	//Автоматическое определение языка при запуске
	window.onload = function() {
            // copied from https://stackoverflow.com/questions/1043339/javascript-for-detecting-browser-language-preference#comment91904885_25603630
            var userLanguages = [].concat(navigator.languages, navigator.language, navigator.userLanguage, navigator.browserLanguage, navigator.systemLanguage).filter(Boolean);

            var select = document.getElementById('languageSelect');
            var supportedLanguages = [...select.options].map(o => o.value);

            var selectedLanguage = "en";
            for (const lang of userLanguages) {
                if(supportedLanguages.includes(lang)){
                    selectedLanguage = lang;
                    break;
                }
                const langPrefix = lang.substr(0, 2);
                if(supportedLanguages.includes(langPrefix)){
                    selectedLanguage = langPrefix;
                    break;
                }
            }
            select.value = selectedLanguage; // устанавливаем значение select в язык пользователя
        }

	//Кнопки направления трафика
	function buttonClicked(button) {
    	    var button1 = document.getElementById('button1');
            var button2 = document.getElementById('button2');
        
            //Если нажата одна кнопка, отключаем другую, чтобы не было путаницы
            if (button == button1) {
                button1.classList.toggle('clicked');
                if (button1.classList.contains('clicked')) {
                    button2.disabled = true;
                } else {
                    button2.disabled = false;
                }
            } else if (button == button2) {
                button2.classList.toggle('clicked');
                if (button2.classList.contains('clicked')) {
                    button1.disabled = true;
                } else {
                    button1.disabled = false;
                }
            }
        }
	// Функция для загрузки текста кнопки
	function loadButtonText(id, selectedLanguage) {
    	    var ButtonText = 'Iptables/' + selectedLanguage + '/' + id;

	    // Загрузка текста кнопки
	    fetch(ButtonText)
    	    .then(response => response.text())
    	    .then(data => {
        	document.getElementById(id).innerText = data;
    	    })
    	    .catch(error => console.error('Ошибка:', error));
	}

	$(document).ready(function () {
	var previousElements = [];

	function resetPreviousColorsAndWidths() {
	    if (previousElements.length > 0) {
	        changeStrokeColor(previousElements, 'initial'); // Сброс цвета к начальному
	        changeStrokeWidth(previousElements, 'initial'); // Сброс толщины к начальной
	        previousElements = [];
    	    }
	}

	function loadExtensions(language, git_pages) {

	    $("#extensionSelect").empty(); // Очищаем текущие опции
	    $("#extensionSelect").append($('<option value="none">None</option>')); // Добавляем опцию "None"

	    var git_pages = 0; // 1 for git_pages,  0 for local web servers
	    if (git_pages === 1) {
	        // Загружаем из файла extension_list
	        var path = 'Iptables/' + language + '/extensions/extension_list';
	        $.get(path, function(data) {
	            var lines = data.split('\n');
	            lines.forEach(function(line) {
	                if (line.trim().length > 0) {
	                    var parts = line.split('_');
	                    var label = parts[0];
	                    var filename = line.trim();
	                    $("#extensionSelect").append($('<option></option>').val(filename).text(label));
	                }
	            });
	        });
	    } else {
	        // Используем существующий метод загрузки
	        var path = 'Iptables/' + language + '/extensions/';
	        $.ajax({
	            url: path,
	            success: function(data) {
	                var files = $(data).find("a");
	                files.each(function() {
	                    var href = this.href;
	                    var filename = href.substring(href.lastIndexOf('/') + 1);
	                    if (filename.indexOf('.') === -1 && filename.indexOf('baloon') === -1 && filename.indexOf('extension_list') === -1) {
	                        var parts = filename.split('_');
	                        var label = parts[0];
	                        var values = parts.slice(1); // Собираем все labels
	                        $("#extensionSelect").append($('<option></option>').val(filename).text(label));
	                    }
	                });
	                }
	            });
	        }
	    }

        $('#languageSelect').change(function () {
            var selectedLanguage = $(this).val();
            loadExtensions(selectedLanguage);    // Загружаем расширения для выбранного языка
            resetPreviousColorsAndWidths();      // Сброс предыдущих изменений цвета и толщины
            loadAndSetTooltip(selectedLanguage); // Загружаем и устанавливаем подсказку для выбранного языка
        }).change();                             // Вызываем сразу после загрузки страницы
    
        $('#extensionSelect').change(function () {
        resetPreviousColorsAndWidths();         // Сброс предыдущих изменений цвета и толщины
        var selectedValue = $(this).val();
        if (selectedValue !== 'none') {
            var selectedElements = selectedValue.split('_');
            changeStrokeWidth(selectedElements, '2px');  // Выделяем таблицу или цепочку
            previousElements = selectedElements.slice(); // Сохраняем текущие элементы для возможного сброса
            // Загрузка и отображение содержимого файла
            var filePath = 'Iptables/' + $('#languageSelect').val() + '/extensions/' + selectedValue;
            $.get(filePath, function(data) {
		$('#description-container').html(data); // Отображаем содержимое файла в div
		$('#information-title').hide();         // Очищаем содержимое в div
            });
            } else {
                $('#comment').html(''); // Очищаем div, если выбрано "None"
            }
        });
    
	$.ajaxSetup({ cache: false });
	function changeOpacity(...elementIds) {
	    elementIds.forEach(elementId => {
    		var $element = $('#' + elementId);
    		var previousOpacity = $element.css('opacity');

    		if (previousOpacity === '0.7') {
        	    $element.css('opacity', '0');   // Восстанавливаем предыдущее значение
    		} else {
        	    $element.css('opacity', '0.7'); // Устанавливаем новое значение
    		}
	    });
	}
	// Меняем цвет
	function changeStrokeColor(elementIds, color) {
	    for (var i = 0; i < elementIds.length; i++) {
    		var $element = $('#' + elementIds[i]);
		var previousColor = $element.data('previous-color');
    		if (previousColor) {
        	    $element.css('stroke', previousColor);
        	    $element.removeData('previous-color');
    		} else {
        	    $element.data('previous-color', $element.css('stroke'));
        	    $element.css('stroke', color);
    		}
	    }
	}

	// Меняем толщину 
	function changeStrokeWidth(elementIds, newWidth) {
	    elementIds.forEach(function(elementId) {
	        var $element = $('#' + elementId);
	        if (newWidth === 'initial') {
	            // Восстанавливаем сохраненное исходное значение толщины
	            var originalWidth = $element.data('original-stroke-width');
	            if (originalWidth) {
	                $element.css('stroke-width', originalWidth);
	            }
	        } else {
	            // Сохраняем исходное значение толщины, если оно еще не сохранено
	            if (!$element.data('original-stroke-width')) {
	                $element.data('original-stroke-width', $element.css('stroke-width'));
	            }
	            // Устанавливаем новую толщину
	            $element.css('stroke-width', newWidth);
	        }
	    });
	}

        //no cache - чтобы загружать всегда актальные данные
        var timestamp = new Date().getTime();
        $.get("iptables.svg?time=" + timestamp, function (data) {
            var $svg = $(data).find('svg');
            var paths = $svg.find('path');
            var svgWidth = $svg.width();

            // Устанавливаем ширину контейнера по ширене схемы
            $('#description-container').css('max-width', svgWidth + 'px');
            
	    $('#languageSelect').change(function() {
	        var selectedLanguage = $(this).val(); // Получаем выбранный язык при изменении

		paths.each(function (index) {
        	var name = $(this).attr('inkscape:label');
        	    if (name) { // проверяем, что name определено
            		var dataFile = 'Iptables/' + selectedLanguage + '/' + name + '-data';   // Всплывающее описание
            		var descrFile = 'Iptables/' + selectedLanguage + '/' + name + '-descr'; // Текст(description)
            		var $this = $(this); // сохраняем ссылку на текущий объект

			$(document).on('mousemove', function(e) {
			    var mouseX = e.clientX,
			    mouseY = e.clientY;

			    //console.log(mouseX, mouseY);  //for debug     
			    $('.tooltip').css({
			        top: mouseY - 20,
			        left: mouseX + 10
			    });
			});

			var dataPromise = $.get(dataFile); // Создаем промис для загрузки данных

			dataPromise.done(function(data) {
			    $this.tooltip('dispose');      // Уничтожаем старый tooltip
			    $this.attr('title', data);     // Обновляем данные
			    $this.tooltip({trigger: 'hover', container: 'body', placement: 'top', html: true, boundary: 'viewport'}); // Инициализируем новый tooltip
			});

			$this.off('click').click(function() { // Удаляем предыдущий обработчик клика
	    		    // Загрузка данных для tooltip
			    $.get(dataFile, function (data) {
				$this.tooltip('dispose'); // Уничтожаем старый tooltip
				$this.attr('data-toggle', 'tooltip');
				$this.attr('data-placement', 'top');
				$this.attr('title', data);
			    });
			});
    			// Загрузка данных для описания
    			$this.click(function() {
        		    $.get(descrFile, function (description) {
            			$('#description-container').html(description);
            			$('#information-title').hide();
        		    });
    			});
		    }
		});

		//Загрузка начального пояснительного текста под схемой
		var id = 'information-title';
	        var InfoText = 'Iptables/' + selectedLanguage + '/' + id;

	        // Загрузка текста из файла
	        fetch(InfoText)
	            .then(response => response.text())
	            .then(data => {
	        	document.getElementById(id).innerText = data;	// Применение загруженного текста к элементу
	            }).catch(error => console.error('Ошибка:', error));

		loadButtonText('button1', selectedLanguage); 		// Загрузка текста для каждой кнопки
		loadButtonText('button2', selectedLanguage);
	    }).change(); // Вызываем событие change сразу после загрузки страницы, чтобы установить начальный язык

            $('.svg-container').replaceWith($svg);

        }, 'xml');
  
         $('#top button').on('click', function() {
	    //Transit traffic
	    if ($(this).is(':first-child')) {
		//Прозрачность
               changeOpacity('path870-5-1','path870-2-8','path870-7-9','path2968','path2625','path2643','path870-2-0','path870-3-75','path870-5-9-23','path870-22');

		//Цвет стрелок
	       changeStrokeColor(
		    [
			'path63094','path42369-0-5','path42369-0-5-7','path42889','path49110-7-3-0','path46227','path52951','path46283','prerouting',
			'forward','postrouting','path49110-7-3-0-9' 
		    ], 'rgb(220,20,60)');

	      //Prerouting/Forward/Postrouting/ bold
	      changeStrokeWidth('prerouting','forward','postrouting');
            } else {
		//Local traffic
               changeOpacity('path870-5-9','path870-2','path2635');

		//Color arrow
	       changeStrokeColor(
		[
		    'path63094','path42369-0-5','path42369-0-5-7','path42889','path42369-7','path42369-7','path42369-7','path46403','path46403-2',
		    'path49110','path49110-7','path49110-7-3','path49110-7-3-8','path49110-7-3-84','path49110-7-3-4','prerouting',
		    'input','output','local-process','postrouting','path49110-7-3-0','path49110-7-3-0-9'
		],'rgb(220,20,60)');

		//Input/Output/LocalProc bold
	        changeStrokeWidth('prerouting','input','output','local-process','postrouting');
            }
         });

         function loadAndSetTooltip(language) {
             var tooltipPath = 'Iptables/' + language + '/extensions/baloon';

             fetch(tooltipPath)
                      .then(response => response.text())
                      .then(data => {
                     // Установка текста всплывающего окна
                     document.getElementById('extensionTooltip').textContent = data;
                 })
                 .catch(error => console.error('Error load baloon tooltip:', error));
         }
      });
   </script>
</body>
</html>