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', subpath = 'functions.js' ) }}"></script>
<link type="text/css" rel="stylesheet" href="{{ url_for( 'send_app_files', subpath = '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', subpath = '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 }}";
current_pfsp = "{{ current_pfsp }}";
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', subpath = 'location' ) }}";
var d = [ 'main' ]
.concat( data )
.filter( x => x != "None" )
.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
},
error: function()
{
toastr.error( "Error while saving the location 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', subpath = '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 id="next_button_div">
<a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="clear_pfsp_button">
<span class="ui-button-text" id="clear_pfsp_button_span_text">Unset the location</span>
</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
<script type="text/javascript">
$( '#header_filename' ).text( filename );
$( '#box_filename' ).text( filename );
$( "#clear_pfsp_button" ).on( 'click', function()
{
update_pfsp_db( null );
current_pfsp = [];
updateSelection( current_pfsp );
} );
// Action for the PFSP zones
updateMapCoordinates( $( "#Map" ), 500 / 656 );
var current_pfsp = "{{ current_pfsp }}".split( "," );
areas.push( "#area_{{ zone[ 'sel' ] | join( '_' ) }}" );
{% endfor %}
for( var i = 0; i < areas.length; i++ )
{
$( areas[ i ] )
.mouseover( function()
{
var s = $( this )[ 0 ].dataset.selection.split( ',' );
updateSelection( s );
} )
.mouseout( function()
{
updateSelection( current_pfsp );
} )
.on( 'click', function()
{
var d = $( this )[ 0 ].dataset.desc;
var s = $( this )[ 0 ].dataset.selection.split( ',' );
update_pfsp_db( d );
current_pfsp = s;
updateSelection( current_pfsp );
updateSelection( current_pfsp );
//
$( '#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_upload_tplp', 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>