source: main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl@ 35258

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:java="http://xml.apache.org/xslt/java"
    xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
    xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
    xmlns:gslib="http://www.greenstone.org/skinning"
    extension-element-prefixes="java util"
    exclude-result-prefixes="java util">

    <!-- use the 'main' layout -->
    <xsl:import href="layouts/main.xsl"/>

    <xsl:variable name="groupPath"><xsl:value-of select="/page/pageRequest/paramList/param[@name='group']/@value"/></xsl:variable>
    <!-- set page title -->
    <xsl:template name="pageTitle"><gslib:collectionName/></xsl:template>

    <!-- set page breadcrumbs -->
    <xsl:template name="breadcrumbs"><gslib:siteLink/><gslib:rightArrow/>
    <xsl:if test="$groupPath != ''">
      <xsl:for-each select="/page/pageResponse/pathList/group">
        <xsl:sort data-type="number" select="@position"/>
          <a>
        <xsl:attribute name="href"><gslib:groupHref path="{@path}"/></xsl:attribute>                
        <xsl:attribute name="title"><gslib:groupName path="{@path}"/></xsl:attribute>
        <gslib:groupName path="{@path}"/>
          </a>
          <gslib:rightArrow/>
      </xsl:for-each>
    </xsl:if>
    </xsl:template>

    <!-- the page content -->
    <xsl:template match="/page">
        <xsl:call-template name="audio-upload"/>
    </xsl:template>
    
    <!-- Template for processing audio file uploads -->
    <xsl:template name="audio-upload">
        <link href="interfaces/{$interface_name}/style/asr.css" rel="stylesheet" type="text/css" />
        
        <div>
            <form onSubmit="    doAudioUpload(); return false;" enctype="multipart/form-data">
                <label for="fileUpload">Audio File:</label>
                <input id="fileUpload" type="file" accept="audio/wav" multiple="multiple" />
                <button id="btnFileUpload" type="submit" disabled="disabled">Transcribe</button>
            </form>
        </div>

        <div id="prgFileUploadContainer" class="asr-hidden">
            <label for="prgFileUpload">Processing:</label>
            <progress id="prgFileUpload" />
        </div>

        <div id="transcriptionsDisplayContainer">
            <audio id="transcriptionAudio" controls="controls">
                <source id="transcriptionAudioSource" src="" />
            </audio>

            <ul id="transcriptionsList" class="transcription-list"></ul>

            <template id="transcriptionTemplate">
                <li class="transcription-list-item">
                    <div>
                        <div class="spaced-block">
                            <b>File: </b><span></span>
                        </div>
                        <div class="spaced-block">
                            <b>Transcription: </b><span></span>
                        </div>
                        <details>
                            <summary>Character Information</summary>
                            <div class="metadata-list-container">
                                <ul id="metadataList" class="metadata-list"></ul>
                            </div>
                        </details>
                    </div>
                </li>
            </template>

            <template id="errorTemplate">
                <li class="error-list-item">
                    <div>
                        <div class="spaced-block">
                            <b>Transcription Failed: </b><span></span>
                        </div>
                        <div class="spaced-block">
                            <b>File: </b><span></span>
                        </div>
                    </div>
                </li>
            </template>

            <template id="metadataTemplate">
                <!-- <li class="metadata-list-item tooltip-parent tooltip">
                    <div class="spaced-block">
                        <p></p>
                    </div>
                    <div class="spaced-block">
                        <button type="button"><img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /></button>
                    </div>
                    <div class="tooltip-wrapper">
                        <span class="tooltip">0.02</span>
                    </div>
                </li> -->
                <li class="metadata-list-item">
                    <div class="spaced-block">
                        <p></p>
                    </div>
                    <div class="spaced-block">
                        <button type="button"><img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /></button>
                    </div>
                </li>
            </template>
        </div>
        
        <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js"></gsf:script>
    </xsl:template>

</xsl:stylesheet>