mark_list.html

<!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' ) }}">
        
        <script type="text/javascript">
            baseurl = "{{ baseurl }}";
            var password_local = decrypt( sessionStorage.getItem( "session_key" ), "{{ session_security_key }}" );
            var nickname = decrypt( "{{ nickname }}", password_local );
            
            var marks_list = new Array();
            {% for file in files %}
                marks_list.push( "{{ file[ 'uuid' ] }}" );
            {% endfor %}
            
            update_search_result = function()
            {
                var searched = $( "#search_bar" ).val();
                
                for( var i = 0; i < marks_list.length; i++ )
                {
                    var uuid = marks_list[ i ];
                    var filename = $( "#mark_" + uuid + "_filename" ).text();
                    
                    if( filename.indexOf( searched ) >= 0 )
                    {
                        $( "#mark_" + uuid ).show();
                     } else {
                         $( "#mark_" + uuid ).hide();
                     }
                }
            }
        </script>
        
        <style type="text/css">
            .icnml_lp_list {
                margin: 10px;
                display: grid;
                grid-gap: 10px;
                grid-template-columns: repeat( auto-fit, 320px );
            }
            .icnml_lp_list > div {
                height: 347px;
            }
            
            .icnml_box_content {
                height: 300px;
            }
            
            .icnml_img > a > img {
                display: block;
                width: auto;
                height: auto;
                max-width: 300px;
                max-height: 300px;
                margin: auto;
            }
            .icnml_search_bar {
                margin-left: 10px;
                margin-bottom: 20px;
                width: 500px;
            }
        </style>
    </head>
    <body class="icnml_main_layout">
        {% include "header.html" %}
        {% include navigation %}
        
        <div class="icnml_content">
            <div class="icnml_search_bar">
                <input id="search_bar" placeholder="Search for a file..."/>
            </div>
            
            <div class="icnml_lp_list">
                {% for file in files %}
                    <div id="mark_{{ file[ 'uuid' ] }}">
                        <div class="ui-widget-header ui-corner-top icnml_box_top" id="mark_{{ file[ 'uuid' ] }}_filename">-</div>
                        <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                            <div class="icnml_img">
                                <a id="edit_{{ file[ 'id' ] }}" href="{{ url_for( 'submission_mark', submission_id = submission_id, mark_id = file[ 'uuid' ] ) }}">
                                    <img src="{{ url_for( 'image_file_serve', file_id = file[ 'uuid' ] ) }}">
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        <script type="text/javascript">
            
            $( "#search_bar" ).on( "keyup", update_search_result );
            $( "#search_bar" ).focus();
            
            //
            
            $( "#icnml_navigation_updatedonor" )
                .addClass( "activated" );
            
            {% for file in files %}
                $( "#mark_{{ file[ 'uuid' ] }}_filename" )
                    .text( decrypt( "{{ file[ 'filename' ] }}", password_local ) );
            {% endfor %}
            
            $( "#navloc" ).append(
                $( "<a />" )
                    .attr( "href", "{{ url_for( 'submission_list' ) }}" )
                    .text( "Submissions" )
            )
            .append(
                $( "<span />" ).text( ">" )
            )
            .append(
                $( "<a />" )
                    .attr( "href", "{{ url_for( 'submission_upload_tplp', submission_id = submission_id ) }}" )
                    .text( nickname )
            )
            .append(
                $( "<span />" ).text( ">" )
            )
            .append(
                $( "<a />" )
                    .attr( "href", "{{ url_for( 'submission_mark_list', submission_id = submission_id, mark_type = 'all' ) }}" )
                    .text( "Marks" )
            )
            .append(
                $( "<span />" ).text( ">" )
            )
            .append(
                $( "<span />" ).text( "{{ mark_type }}" )
            );
        </script>
    </body>
</html>