<commit_before><!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properities -->
  <title>Map</title>
  <link rel="stylesheet" type="text/css" href="bower_components/semantic/dist/semantic.min.css">

</head>
<body>


  <div class="pusher">
    <div class="ui inverted vertical masthead center aligned segment">

      <div class="ui container">
        <div class="ui large secondary inverted pointing menu">
          <a class="item" href="index.html">
            Home
          </a>
          <a class="active item" href="map.html">
            Map
          </a>
          <!--
          <div class="right menu small">
            <div class="item">
              <div class="ui icon input">
                <input id="thing_search" type="text" placeholder="Search...">
                <i class="search link icon"></i>
              </div>
            </div>
          </div>
          -->
        </div>
      </div>

    </div>
  </div>

  <div id="map" data-tap-disabled="true"></div>

  <div id="popup"  class="ui page modal">
    <i class="close icon"></i>
    <div  id="name" class="header">
    </div>
    <div class="image content">
      <div class="ui medium image">
        <img src="assets/images/no-image.png">
      </div>
      <div class="description">
        <div id="name" class="ui header"></div>
        <p id="description"></p>
      </div>
    </div>
    <div class="actions">
      <div class="ui positive right labeled icon button">
        Edit
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>

  <script>

  function initMap() {
    var center = {};
    API.GetLocation(function (data) {
      console.log('Got location', data);
      center.lng = data.coords.longitude;
      center.lat = data.coords.latitude;

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: center
      });

      var options = {
        longitude: center.lng,
         latitude: center.lat,
         radius: 10 * 5000
      };
      API.GetNear(options, function (data) {
        // console.log('Got things', data);

        for (var i = 0; i < data['rows'].length; i++) {
          var thing = data['rows'][i];
            // console.log('Got thing', thing);
            (function (thing) {
              var position = {};
              position.lng = Number(thing.longitude);
              position.lat = Number(thing.latitude);

              var marker = new google.maps.Marker({
                position: position,
                map: map,
                title: thing.name
              });

              var interact = function(event) {
                console.log(event);
                map.panTo(marker.getPosition());
                $('#popup').modal('show');
                for (var prop in thing) {
                  if (thing.hasOwnProperty(prop)) {
                    $('#'+prop).text(thing[prop]);
                  }
                }
              };
              marker.addListener('mousedown', interact);
            })(thing);
          }
      },
      function (data) {
        console.error('ERROR getting near', data);
      }
    );
    },
    function (data) {
      console.error('ERROR getting location', data);
    }
  );
}

  </script>

<style type="text/css">
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#map {
  flex: 1 1 auto;
}<commit_msg>Moving markers and almost saving<commit_after><!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properities -->
  <title>Map</title>
  <link rel="stylesheet" type="text/css" href="bower_components/semantic/dist/semantic.min.css">

</head>
<body>


  <div class="pusher">
    <div class="ui inverted vertical masthead center aligned segment">

      <div class="ui container">
        <div class="ui large secondary inverted pointing menu">
          <a class="item" href="index.html">
            Home
          </a>
          <a class="active item" href="map.html">
            Map
          </a>
          <!--
          <div class="right menu small">
            <div class="item">
              <div class="ui icon input">
                <input id="thing_search" type="text" placeholder="Search...">
                <i class="search link icon"></i>
              </div>
            </div>
          </div>
          -->
        </div>
      </div>

    </div>
  </div>

  <div id="map" data-tap-disabled="true"></div>

  <div id="popup"  class="ui page modal">
    <i class="close icon"></i>
    <div  id="name" class="header">
    </div>
    <div class="image content">
      <div class="ui medium image">
        <img src="assets/images/no-image.png">
      </div>
      <div class="description">
        <div id="name" class="ui header"></div>
        <p id="description"></p>
      </div>
    </div>
    <div class="actions">
      <div id="cancel"  class="ui red deny button">
        Cancel
      </div>
      <div id="action" class="ui positive right labeled icon button">
        <i class="checkmark icon"></i>
        <p id="actionText">
        </p>
      </div>
    </div>
  </div>

  <script>

  function initMap() {
    var center = {};
    API.GetLocation(function (data) {
      console.log('Got location', data);
      center.lng = data.coords.longitude;
      center.lat = data.coords.latitude;

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: center
      });

      var options = {
        longitude: center.lng,
         latitude: center.lat,
         radius: 10 * 5000
      };
      API.GetNear(options, function (data) {
        // console.log('Got things', data);

        for (var i = 0; i < data['rows'].length; i++) {
          var thing = data['rows'][i];
            // console.log('Got thing', thing);
            (function (thing) {
              var position = {};
              position.lng = Number(thing.longitude);
              position.lat = Number(thing.latitude);

              var marker = new google.maps.Marker({
                position: position,
                map: map,
                title: thing.name,
                draggable: false
              });

              var startEditing = function (event) {
                marker.setDraggable(true);
                console.log('Now editing', marker.draggable);
                google.maps.event.clearListeners(marker, 'dragstart');
                marker.addListener('dragstart', function (event) {
                  console.log('Dragging marker:', marker.getPosition());

                });
                marker.addListener('dragend', function (event) {
                  console.log('Done dragging marker:', marker.getPosition());
                });
              };

              var endEditing = function (event) {
                console.log('endEditing');
                marker.setDraggable(false);
                google.maps.event.clearListeners(marker, 'dragstart');
                google.maps.event.clearListeners(marker, 'dragend');
              };

              var saveEditing = function (event) {
                console.log('saveEditing');
                endEditing();
                console.log('About to save thing:', thing);
                // API.SaveThing(thing['_id'] || thing['id'], thing, function (data) {
                //   console.log('Success saving thing:', data);
                // },
                // function (err) {
                //   console.log('ERROR while saving edited thing:', err);
                // });
              };

              var interact = function(event) {
                console.log('Interaction', marker.draggable);
                map.panTo(marker.getPosition());
                $('#popup').modal('show');
                $('#action').unbind();
                $('#cancel').unbind();
                $('#cancel').on('mousedown', endEditing);
                if (marker.draggable === false) {
                  $('#actionText').text('Edit');
                  $('#cancel').hide();
                  $('#action').on('mousedown', startEditing);
                } else {
                  $('#actionText').text('Save Edits');
                  $('#cancel').show();
                  $('#action').on('mousedown', saveEditing);
                }
                for (var prop in thing) {
                  if (thing.hasOwnProperty(prop)) {
                    $('#'+prop).text(thing[prop]);
                  }
                }
              };
              marker.addListener('click', interact);
            })(thing);
          }
      },
      function (data) {
        console.error('ERROR getting near', data);
      }
    );
    },
    function (data) {
      console.error('ERROR getting location', data);
    }
  );
}

  </script>

<style type="text/css">
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#map {
  flex: 1 1 auto;
}
{'fraction_non_alphanumeric': 0.1599743013170575, 'fraction_numerical': 0.004925580897312346, 'mean_word_length': 1.670860737775236, 'pattern_counts': {'":': 0, '<': 135, '<?xml version=': 0, '>': 133, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3965342', 'n_tokens_mistral': 2753, 'n_tokens_neox': 2614, 'n_words': 592}