grid_template.html

{% extends "base_grid_template.html" %}
 
{% block title %}
  {% if project %}
    <title> {{ user }} {{ project }} {{ session }} - TiledViz</title>
  {% else %}
    <title>TiledViz</title>
  {% endif %}
  <meta name="viewport" content="width=device-width,initial-scale=1">
{% endblock %}
 
{% block additional_scripts_css %}
  <!-- TileViz CSS -->
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css')}}">
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/base.css')}}">
  <!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/grid.css')}}"> -->
 
  <!-- PorstItAll -->
  <link rel="stylesheet"
    href="https://unpkg.com/postitall@1.1.0/dist/jquery.postitall.css">
 
  <!-- Actions Icons -->
  <link rel="stylesheet"
     href="https://fonts.googleapis.com/icon?family=Material+Icons">
  
  <!--Some variables here-->
  <script type="text/javascript" charset="utf-8">
    my_user    = "{{ user }}";
    my_project = "{{ project }}";
    my_session = "{{ session }}";
    my_description = "{{ description }}";
    my_geometry = {{ json_geom|tojson }};
  </script>
  <script type="text/javascript" charset="utf-8">
    json_data = {{ json_data|tojson }};
  </script>
  <script type="text/javascript" charset="utf-8">
    json_config = {{ json_config|tojson }};
    json_actions = {{ json_actions|tojson }};
    helpPath = "{{ helpPath }}";
  </script>
  <script type="text/javascript" charset="utf-8">
    jsDataTab = json_data.nodes;
  </script>
  <script type="text/javascript" charset="utf-8">
    Tags = {{ json_Tags|tojson }};
  </script>
  <!-- My scripts -->
 
    <!-- <script type="text/javascript" src="{{ url_for('static', filename='js/menu_config.js') }}"></script> -->
    <!-- <script type="text/javascript" src="{{ url_for('static', filename='js/menu_options.js') }}"></script> -->
 
    <!-- PorstItAll -->
    <script type="text/javascript"
        src="https://unpkg.com/postitall@1.1.0/dist/jquery.postitall.js"></script>
    
    <!-- FileSaver -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"
        integrity="sha512-k8F8QynmFNURwbUJC8drKA+fo3YfNvjqKzStdydD6au+MzvxBoRnxH8E31RJXwDY9DrnEiPhh9wBoDSIxhkyHQ=="
        crossorigin="anonymous"></script>
 
    <!-- Canvas to Blob : save pictures -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.29.0/js/canvas-to-blob.min.js"
            integrity="sha512-zkt2aBQ0jhSXjI6VhJegNqBN3Kqlbi7PxpxOpELGoKtRGSuPOVGvetuTixdhQSuRefsFKroRgWRwQDpRcMd3+A=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
    <!-- Waypoints : optimize non visible tiles -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"
        integrity="sha256-XJuslujM3cGzRZGiSi/KNSdk58uORO/mmrEQNjVtb5k="
        crossorigin="anonymous"></script>
    
    <!-- q : promise/deference for pictures -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/1.5.1/q.min.js"
        integrity="sha256-URAm3POAyTpcU8ACdb2iIjMWFuTai4/fCdXdeqGN3h8="
        crossorigin="anonymous"></script>
        
    <!-- QRcodes : lib with correction -->
    <!-- <script type="text/javascript" -->
    <!--        src="https://combinatronics.com/davidshimjs/qrcodejs/master/qrcode.js"></script> -->
    <script type="text/javascript" src="{{ url_for('static', filename='dist/js/qrcode.js')}}"></script>
    
    <!-- Test Anonymous connection -->
    {% if is_client_active %}
    <script type="text/javascript" charset="utf-8">
      my_inactive=false;
    </script>
    {% else %}
    <script type="text/javascript" charset="utf-8">
      my_inactive=true;
    </script>
    {% endif %}
  <!-- <script type="text/javascript" src="{{ url_for('static', filename='dist/js/debug_tablette.js')}}"></script> -->  
{% endblock %}
 
{% block legend %}
<div class="main-legend-zone">
    <div class="legend-zone" id="legend"><h1>Working on {{ session }}</h1> 
    </div>
    <div class="notif-zone" id="notifications" style="font-size: 40px">Test notifications
    </div>
    <form id="gotoGrid" action="/grid" method="post">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
      <input type="text" id="gGnewroom" name="new room" value="{{ session }}">
      <input type="submit" id="gGsubmit" value='Submit'>
    </form>
    {% if is_client_active %}
    <div id="home">
      <a class="btn btn-large btn-info" href="/" style="font-size: 40px">Home</a>
    </div>
    <div id="allsessions">
      <a class="btn btn-large btn-info " href="/allsessions" style="font-size: 40px">Sessions</a>
    </div>
    <div id="editsession">
      <a class="btn btn-large btn-info" href="/editsession?message=%7B&quot;oldsessionname&quot;%3A&quot;{{ session }}&quot;%7D" style="font-size: 40px">Editsession</a>
    </div>
    <div id="editnodes">
      <a class="btn btn-large btn-info" href="/editnodes?message=%7B&quot;oldsessionname&quot;%3A&quot;{{ session }}&quot;%7D" style="font-size: 40px">Editnodes</a>
    </div>
    {# Show invite button only for owner/admin #}
    {% if isadmin or (project_role in ['owner','admin']) %}
    <div class="join-zone" id="join">
      <span id="join-clients" style="font-size: 30px"></span>
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#inviteModal"  style="font-size: 40px">
      Invite others ?
    </button>
    <!--   btn-info-->
    </div>
    {% endif %}
    {% endif %}
</div>
<!-- <form action='/grid' method="post"> -->
<!--    <input type="text" name="new room" value="{{ session }}"> -->
<!--    <input type="submit" value='Submit'> -->
<!-- </form> -->
 
<!--Modal definition! -->
<div id="inviteModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="inviteModalLabel" aria-hidden="true" style="font-size: 40px">
  <div class="modal-dialog modal-dialog-centered modal-xl" style="--bs-modal-bg: darkgrey" >
    <div class="modal-content">
      <div class="modal-header">
        <h0 class="modal-title">Invite another member to join</h0>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
    <div class="row">
      <div class="column">
        <h1>  Configure the new client:</h1>
      </div>
      <div class="column btn-group" data-toggle="buttons-radio">
        <button id="active_new_client" type="checkbox" class="btn btn-secondary btn-selected">Active</button>
        <button id="passive_new_client" type="checkbox" class="btn btn-secondary">Passive</button>
      </div>
    
      <div class="form-group"
        <h1 for="invitee_name">Invitee Name:</h1>
        <input type="text" class="form-control" id="invitee_name"
           placeholder="Enter invitee's username" style="font-size: 40px">>
      </div>
    
      <div class="form-group">
        <h1 for="max_uses">Maximum Uses:</h1>
        <input type="number" class="form-control" id="max_uses" min="1" value="1" style="font-size: 50px">
      </div>
    
      <button id="getUrl" class="btn btn-grey btn-primary" style="font-size: 30px">Generate invite link</button>
    </div>
    <form>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Invite link will appear here..."
           id="custom-url" style="font-size: 40px">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button" id="copy-button"
              data-toggle="tooltip" data-placement="button"
              title="Copy to Clipboard"> Copy
          </button>
        </span>
      </div>
    </form>
    
    <div id="invite-error" class="alert alert-danger" style="display: none;"></div>
      </div>
      <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}
 
{% block body %}
<section id="primaryparent"> 
</section>  
 
  <!-- TODO:    <script type="text/javascript" src="../dico.js"></script> -->
  <script type="text/javascript">
    // Config through json_config by session from Flask
    //var configItems = json_config.cssProperties;
    var configColors = json_config.colors;
    var configJsonData = json_config.jsonData;
    var configBehaviour = json_config.behaviour;
    var configTagsBehaviour = json_config.tagBehaviour;
    var configCSS = json_config.cssProperties;
    // "FR" or "EN"
    var configLanguage = json_config.language;
  </script>
  <script type="text/javascript">
    touchok=true;  //('ontouchstart' in window || navigator.maxTouchPoints);
    document.body.setAttribute('style','overflow:hidden;');
  </script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/colorNameToHex.js')}}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/Location.js')}}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/Tile.js')}}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/Mesh.js')}}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/Stickers.js')}}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/QRcodes.js')}}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/ZoomNodes.js')}}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/ColorTheme.js')}}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/Menu.js')}}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/grid.js') }}"></script>
  <div id=helpSupport style='display:none'></div>
  {% if is_client_active %}
  <iframe content="text/html;charset=UTF-8" id="helpframe" scrolling="auto"
      src="{{ url_for('static', filename=helpPath) }}" height="50%" width="20%"></iframe>
  <script type="text/javascript">
  $('#helpSupport').append($('#helpframe'));
  </script>
  <script type="text/javascript">
    $('#gGsubmit').on("click",function() {
        new_room=$('#gGnewroom').val();
        cdata ={"room":my_session, "NewRoom": new_room }
        socket.emit("deploy_Session", cdata);
    })
    $('.main-legend-zone').append("<div id=primarySliderLabel "+
                  "style='background-image: none; color: white; background-color: black; font-size: 80px; padding: 20px; padding-top: 5px; padding-bottom: 5px;'>"+
                                  "Primary Zoom</div>");
    $('#primarySliderLabel').css({
    position: "fixed",
    fontSize : "60px",
    left : parseInt($('#gGsubmit').position().left),
    top: 10+parseInt($('#gGsubmit').css("height")),
    //color: "white",
    zIndex: 802,
    padding: "0px 20px",
    width : "600px",
    height : "100px",
    backgroundColor: "rgba(0, 0, 0, 0.5)"
    });
    
    $('#primarySliderLabel').append("<input id=primarySlider type='range' name=primarySlider "+
                    "min="+window.devicePixelRatio*50+" max="+8*window.devicePixelRatio*100+" value= " + 100 + ">");
 
    $('#primarySlider').css({
    position : "fixed",
    top: parseInt($('#primarySliderLabel').css("top"))+parseInt($('#primarySliderLabel').css("height"))/2,
    width: parseInt($('header').css("width")) - (parseInt($('#primarySliderLabel').css("left"))+parseInt($('#primarySliderLabel').css("width"))),
    //padding : parseInt($('#primarySliderLabel').css("height"))/2,
    });
 
    $('#primarySlider').change(function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
    
    $(this).css('background-image',
            '-webkit-gradient(linear, left top, right top, '
            + 'color-stop(' + val + ', rgb(255, 0, 0)), '
            + 'color-stop(' + val + ', rgb(0, 255, 0))'
            + ')'
           );
    });
 
    var valPrimary = ($("#primarySlider").val() - $("#primarySlider").attr('min')) / ($("#primarySlider").attr('max') - $("#primarySlider").attr('min'));
    $('#primarySlider').css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + valPrimary + ', rgb(255, 0, 0)), '
                + 'color-stop(' + valPrimary + ', rgb(0, 255, 0))'
                + ')'
               );
 
    $('#primarySlider').off("click").on({
    click : function(e){
        var newZoom = $('#primarySlider').val();
            if (Math.abs(newZoom - 100) < 6) newZoom=100;
 
            var ratio = newZoom/100;
        $('#primaryparent').css("-moz-transform","scale("+ratio+")").css("-webkit-transform","scale("+ratio+")").css("transform-origin", "0 0 0");
            //style="transform: scale(1);transform-origin: 0px 0px 0px;"
    }
    });
 
    $('#primarySliderLabel').hide();
    $('#primarySlider').hide();
 
  </script>
  {% endif %}
  <script type="text/javascript">
    buildAtEndComplete=false;
    function buildAtEnd() {
    setTimeout(function() {
        if (typeof mesh == "undefined")
        buildAtEnd();
        else {
        var Nodes=mesh.getNodes();
                console.log("Init htmlNodes")
                for (O in Nodes)
                     Nodes[O].init_htmlNode();
        buildAtEndComplete=true;
        }
    }, 1000);   
    };
    executeAtEndComplete=false;
    function executeAtEnd() {
    setTimeout(function() {
        if (typeof mesh == "undefined")
        executeAtEnd();
        else {
        // if (not buildAtEndComplete) {
        //     executeAtEnd();
        //     return
        // }
        var Nodes=mesh.getNodes();
                console.log("Build nodes menus")
                for (O in Nodes)
                     Nodes[O].buildmenu();
                console.log("Init zoom nodes")
                for (O in Nodes)
                    Nodes[O].init_zoomnode();
        me.init_click_zoomNode();
        executeAtEndComplete=true;
        $("#notifications").html("All init completed.")
        }
    }, 1000);   
    };
    if (document.readyState == 'complete') {
    buildAtEnd();
    executeAtEnd();
    } else {
        console.log("Not already complete : "+document.readyState)
        document.onreadystatechange = function () {
            if (document.readyState === "complete") {
                console.log("Wait for conplete : "+document.readyState)
                buildAtEnd();
                executeAtEnd();
            }
        }
    }
  </script>
 
{% endblock %}