List and/or load bulk GPX files on the server

[Terramoto]

Hello,

I was wondering if wtracks has a method to import gpx files from a folder on the server whenever i load the map.
I'd like to sync the gpx files from my phone to the server and have it available whenever accessing the map.

[opoto]

Hi
You can include the URL of your track in the WTracks URL:
https://opoto.github.io/wtracks/?url=<link to online track file>[&<option>=<value>]
See https://opoto.github.io/wtracks/doc/#features

[Terramoto]

Hi You can include the URL of your track in the WTracks URL: https://opoto.github.io/wtracks/?url=<link to online track file>[&<option>=<value>] See https://opoto.github.io/wtracks/doc/#features

What i'm trying to achieve is, to sync the gpx files from my devices to the home server hosting wtracks and then load them via checkbox on the map.
I was going to get an updated list of files on the server and generate checkboxes for them in the Load menu option with loadFromUrl but i'm a noob when it comes to javascript so i'm not sure where i should put the code to generate them and be able to action the loadFromUrl function.

[opoto]

There is no storage service in WTracks, files are only loaded in your browser. Hence the URL format I shared to load a track hosted somewhere else.

[Terramoto]

I understand, the checkboxes ive created are suppose to send urls to loadFromUrl which appears to accept relative path aswell. Meaning i can transfer gpx files to a folder in wtracks and send the relative path (or full url) via the function. The trouble im having with my lack of javascript, is understanding how to call loadFromUrl defined in wtracks.js from another javascript script and that would've trigger the loading.

[Terramoto]

I'm a complete noob when it comes to javascript and I'm pretty sure there are more efficient ways of doing this but here it goes.

I created function to load a gpx list from a json file and generate checkboxes for each gpx inside a div with a class ".server-content":
server.js

function createCheckboxesFromJson(jsonUrl) {

  // Fetch the JSON data from the specified URL
  fetch(jsonUrl)
    .then(response => response.json())
    .then(data => {
    
      // Find the existing div with the class "server-content"
      const serverContentDiv = document.querySelector('.server-content');

      // Clear any existing content in the div
      serverContentDiv.innerHTML = '';
      
      // Create a DOM element to hold the checkboxes
      const checkboxesContainer = document.createElement('div');

      // Create "all" checkbox
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.name = 'urls';
      checkbox.value = "All";
      checkbox.className = "all";
      checkbox.id = "all";
          
      // Create a label element for the checkbox
      const label = document.createElement('label');
      checkboxesContainer.appendChild(label);
      label.appendChild(checkbox);
      label.appendChild(document.createTextNode("All"));

      // Iterate through each entry in the JSON data
      for (const entry of data.urls) {

        // Create a checkbox element
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = 'urls';
        checkbox.value = entry;
        checkbox.className = "gpx";

        // Create a label element for the checkbox
        const label = document.createElement('label');

        // Add checkbox trigger
        //checkbox.addEventListener('change',window.loadFromUrl(checkbox.value));

        // Append the checkbox and label to the container
        checkboxesContainer.appendChild(label);
        label.appendChild(checkbox);
        label.appendChild(document.createTextNode(entry.split(/(\\|\/)/g).pop()));
      }
      
      // Add the container to the DOM
      serverContentDiv.appendChild(checkboxesContainer);
    });
}
createCheckboxesFromJson("urls.json");

Then in wtracks.js i had to create the following code to load them:

  $(".gpx").each(function(i,obj){
    $(this).on("change", function(){
      if(obj.checked){
        var url = $(obj).val();
        ga('send', 'event', 'file', 'load-url');
        setEditMode(EDIT_AUTO_TRACK);
        var noproxy = !isChecked("#noproxy");
        setChecked("#merge", true);
        loadFromUrl(url, {
          ext: getLoadExt(),
          noproxy: noproxy,
          withCredentials: noproxy
        });
      }
    });
  });

  $("#all").on("change", function() {
      $(".gpx").each(function(i,obj){
        if($("#all").prop("checked")){
          setChecked(obj,true);
          $(this).trigger("change");
        }else{
          setChecked(obj,false);
          $("#track-new").trigger("click");
        }
      });
  });

wtracks.css

label:has(> input.gpx) {
  width:100%;
}

[opotonniee]

Good you found a way to do it