views/trainer/templates/trainer/search.html

@@ -68,6 +68,7 @@
                 display: grid;
                 grid-gap: 10px;
                 grid-template-columns: 1fr 1fr;
+                grid-template-rows: 1fr auto;
                 height: 100%;
             }
             #icnml_mark_detail_left,
@@ -206,8 +207,9 @@
             var mark_details = function( event )
             {
                 var target = event.currentTarget.id.replace( "outer_div_mark_", "" );
-                var target_ref = [];
-                var target_fpc = [];
+                target_ref = [];
+                target_fpc = [];
+                display_ref = 0;
                 
                 _.forEach( marks[ target ][ "pfsp" ], function( pfsp )
                 {
@@ -218,8 +220,9 @@
                     } );
                 } );
                 
-                target_ref = target_ref[ 0 ];
-                target_fpc = target_fpc[ 0 ];
+                target_ref_img_url = "{{ url_for( 'image.image_segment_serve', tenprint_id = 'uuid', pc = 'fpc' ) }}";
+                target_ref_img_url = target_ref_img_url.replace( "uuid", target_ref[ display_ref ] );
+                target_ref_img_url = target_ref_img_url.replace( "fpc", target_fpc[ display_ref ] );
                 
                 $( "<div />" )
                     .attr( "id", "mark_details_dialog" )
@@ -236,7 +239,50 @@
                             .append(
                                 $( "<div/>" )
                                     .attr( "id", "icnml_mark_detail_right" )
-                                    .attr( "style", "background-image:url( {{ url_for( 'image.image_segment_serve', tenprint_id = 'uuid', pc = 'fpc' ) }} )".replace( "uuid", target_ref ).replace( "fpc", target_fpc ) )
+                                    .attr( "style", "background-image:url( " + target_ref_img_url + " )" )
+                            )
+                            .append( $( "<div />" ) )
+                            .append(
+                                $( "<div />" )
+                                    .attr( "id", "pre_next_div" )
+                                    .css( "text-align", "center" )
+                                    .append(
+                                        $( "<span />" )
+                                            .attr( "id", "previous_ref" )
+                                            .css( "cursor", "pointer" )
+                                            .text( "Previous" )
+                                            .on( "click", function()
+                                            {
+                                                display_ref -= 1;
+                                                display_ref = display_ref % target_ref.length;
+                                                
+                                                target_ref_img_url = "{{ url_for( 'image.image_segment_serve', tenprint_id = 'uuid', pc = 'fpc' ) }}";
+                                                target_ref_img_url = target_ref_img_url.replace( "uuid", target_ref[ display_ref ] );
+                                                target_ref_img_url = target_ref_img_url.replace( "fpc", target_fpc[ display_ref ] );
+                                                
+                                                $( "#icnml_mark_detail_right" )
+                                                    .attr( "style", "background-image:url( " + target_ref_img_url + " )" )
+                                            } )
+                                    )
+                                    .append( $( "<span />" ).css( "margin-left", "10px" ).css( "margin-right", "10px" ).text( "|" ) )
+                                    .append(
+                                        $( "<span />" )
+                                            .attr( "id", "next_ref" )
+                                            .css( "cursor", "pointer" )
+                                            .text( "Next" )
+                                            .on( "click", function()
+                                            {
+                                                display_ref += 1;
+                                                display_ref = display_ref % target_ref.length;
+                                                
+                                                target_ref_img_url = "{{ url_for( 'image.image_segment_serve', tenprint_id = 'uuid', pc = 'fpc' ) }}";
+                                                target_ref_img_url = target_ref_img_url.replace( "uuid", target_ref[ display_ref ] );
+                                                target_ref_img_url = target_ref_img_url.replace( "fpc", target_fpc[ display_ref ] );
+                                                
+                                                $( "#icnml_mark_detail_right" )
+                                                    .attr( "style", "background-image:url( " + target_ref_img_url + " )" )
+                                            } )
+                                    )
                             )
                     )
                     .dialog( {
@@ -260,6 +306,9 @@
                             {
                                 $( "#mark_details_dialog" ).dialog( "close" );
                             } );
+                            
+                            if( target_ref.length == 1 )
+                                $( "#pre_next_div" ).remove();
                         }
                     } );
             }