Skip to content
latent_pfsp.html 6.75 KiB
Newer Older
<!DOCTYPE html>
<html>
    <head>
        {% for src in js %}
            <script type="text/javascript" src="{{ src }}"></script>
        {% endfor %}
        {% for src in css %}
            <link type="text/css" rel="stylesheet" href="{{ src }}">
        {% endfor %}
        
        <script type="text/javascript" src="{{ url_for( 'send_app_files', path = 'functions.js' ) }}"></script>
        <link type="text/css" rel="stylesheet" href="{{ url_for( 'send_app_files', path = 'app.css' ) }}">
        
        <style type="text/css">
            #img_preview > img {
                max-height:500px;
                max-width:500px;
                height:auto;
                width:auto;
            }
            
            .icnml_button {
                margin-top: 50px;
            }
            .icnml_button > div > a {
                width: 60%;
                margin-bottom: 10px;
            }
            
            #location_img {
                background-image: url( '{{ url_for( 'send_static_files', path = 'location/main.png' ) }}' );
                background-repeat: no-repeat;
                background-size: 100%;
            }
            #location_img > img {
                height: 500px;
                width: auto;
            }
            
            .icnml_lp_cardbox {
                display: grid;
                grid-template-columns: auto auto;
                grid-gap: 30px;
            }
        </style>
        
        <script type="text/javascript">
            baseurl = "{{ baseurl }}";
            
            var password_local = decrypt( sessionStorage.getItem( "session_key" ), "{{ session_security_key }}" );
            var nickname = decrypt( "{{ nickname }}", password_local );
            var filename = decrypt( "{{ file[ 'filename' ] }}", password_local );
            var note     = decrypt( "{{ file[ 'note' ] }}", password_local );
            
            var updateMapCoordinates = function( data, fac )
            {
                data.children( 'area' ).each( function( i )
                { 
                    $( this )[ 0 ].coords = $( this )[ 0 ].coords
                        .split( ',' )
                        .map( x => x * fac )
                        .join( ',' );
                } );
            }
            var updateSelection = function( data )
            {
            	var location_base_url = "{{ url_for( 'send_static_files', path = 'location' ) }}";
            	
                var d = [ 'main' ]
                	.concat( data )
                	.map( x => 'url( ' + location_base_url + '/' + x + '.png )' )
                    .join( ', ' );
                
                $( '#location_img' )
                    .css( 'background-image', d );
            }
            var update_pfsp_db = function( data )
            {
            	$.ajax( {
    	            url: "{{ url_for( 'submission_latent_pfsp_set', id = submission_id, lid = file[ 'uuid' ] ) }}",
    	            dataType: 'json',
    	            method: 'POST',
    	            data: {
    	            	pfsp: data
    	            }
    	        } );
            }
        </script>
    </head>
    <body class="icnml_main_layout">
        {% include "header.html" %}
        {% include "navigations/submitter.html" %}
        
        <div class="icnml_content">
            <div class="icnml_lp_oneperpage">
                <form id="icnml_file_update_{{ file[ 'uuid' ] }}">
                    <div class="ui-widget-header ui-corner-top icnml_box_top">File '<span id="header_filename">-</span>'</div>
                    <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                        <div class="icnml_lp_cardbox">
                            <div id="img_preview" class="icnml_img">
                                <img src="{{ url_for( 'image_file_serve', id = file[ 'uuid' ] ) }}">
                            </div>
                            <div>
                                <div id="pfsp">
                                    <div id="location_img">
                                        <img src="{{ url_for( 'send_static_files', path = 'location/empty.png' ) }}" usemap="#location_map" />
                                    </div>
                                    <map id="Map" name="location_map" class="location_map">
                                        {% for zone in pfsp_zones %}
                                            <area
                                                shape="polygon"
                                                id="area_{{ zone[ 'sel' ] | join( '_' ) }}"
                                                coords="{{ zone[ 'coords' ] }}"
                                                data-selection="{{ zone[ 'sel' ] | join( ',' ) }}"
                                                data-desc="{{ zone[ 'desc' ] }}"
                                                data-zone="{{ zone[ 'zone' ] }}"
                                                data-lat="{{ zone[ 'lat' ] }}"
                                            />
                                        {% endfor %}
                                    </map>
                                </div>
                                <div class="icnml_button">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $( '#header_filename' ).text( filename );
    	$( '#box_filename' ).text( filename );
    	
    	// Action for the PFSP zones
    	
	 	updateMapCoordinates( $( "#Map" ), 500 / 656 );
		
    	{% for zone in pfsp_zones %}
    		$( "#area_{{ zone[ 'sel' ] | join( '_' ) }}" )
    			.mouseover( function()
				{
    				var s = $( this )[ 0 ].dataset.selection.split( ',' );
                    updateSelection( s );
				} )
				.mouseout( function()
				{
					updateSelection( [] );
				} )
				.on( 'click', function()
				{
					var d = $( this )[ 0 ].dataset.desc;
				} )
    	{% endfor %}
    	
		//
    	
    	$( '#icnml_navigation_updatedonor' )
			.addClass( 'activated' );
        
        $( '#navloc' ).append(
    		$( '<a />' )
    			.attr( 'href', "{{ url_for( 'submission_list' ) }}" )
    			.text( "Submissions" )
		)
		.append(
    		$( '<span />' ).text( ">" )
		)
		.append(
			$( '<a />' )
				.attr( 'href', "{{ url_for( 'submission_update', id = submission_id ) }}" )
				.text( nickname )
		)
		.append(
    		$( '<span />' ).text( ">" )
		)
		.append(
    		$( '<a />' )
    			.attr( 'href', "{{ url_for( 'submission_latent_list', id = submission_id ) }}" )
    			.text( "Latents" )
		)
		.append(
    		$( '<span />' ).text( ">" )
		)
		.append(
    		$( '<span />' ).text( filename )
		);
    </script>
    
</html>