Ignore:
Timestamp:
2021-08-11T16:24:17+12:00 (3 years ago)
Author:
davidb
Message:

Convert error templating to Vue

File:
1 edited

Legend:

Unmodified
Added
Removed
  • main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl

    r35282 r35284  
    4848        <link href="interfaces/{$interface_name}/style/asr.css" rel="stylesheet" type="text/css" />
    4949
    50         <span class="monospace-font-size">ngā tama a rangi |</span>
     50        <section id="audio-transcription-container" class="paper">
     51            <!-- Used to calculate the character size of our monospace font -->
     52            <span class="monospace-font-size">ngā tama a rangi</span>
    5153
    52         <section id="audio-transcription-container" class="paper">
    5354            <!-- Contains the file input, transcribe button and transcription progress indicator -->
    5455            <div id="audioUploadContainer">
    55                 <button class="btn-primary" type="button" v-on:click="openFilePicker">
     56                <button type="button" v-on:click="openFilePicker"
     57                        v-bind:disabled="isTranscribing">
    5658                    <span class="material-icons">&#xE2C6;</span> <!-- file_upload -->
    5759                    <span>Upload Audio Files</span>
     
    6163                       accept="audio/wav" multiple="multiple" v-bind:disabled="isTranscribing" />
    6264
    63                 <button id="btnBeginTranscription" class="btn-primary" type="submit"
     65                <button style="float: right;" type="submit"
    6466                        v-bind:disabled="!canTranscribe" v-on:click="doTranscription">
    6567                    <span class="material-icons">&#xEA3E;</span> <!-- history_edu -->
     
    7072            </div>
    7173   
    72             <!-- <div class="audio-slider__container">
    73                 <button type="button" class="btn-fab">
    74                     <span class="material-icons mdi-xl">&#xE037;</span>
    75                 </button>
    76                 <input type="range" min="0" value="0" class="audio-slider__range" />
    77                 <span class="audio-slider__value">1:23</span>
    78             </div> -->
    79    
    8074            <!-- Contains the audio element and transcription list -->
    8175            <div id="transcriptionsDisplayContainer">
     
    8478                    <source id="transcriptionAudioSource" />
    8579                </audio>
     80
     81                <ul class="transcription__list">
     82                    <li v-for="transcription in transcriptions" class="transcription__container">
     83                        {{ transcription.transcription }}
     84                    </li>
     85                    <li v-for="failure in failures" class="transcription__error-container">
     86                        Failed to transcribe <i v-if="failure.file">{{ failure.file }}</i><br/>
     87                        <span v-if="failure.message">Reason:    {{ failure.message }}</span>
     88                    </li>
     89                </ul>
     90
     91                <ul class="transcription__list">
     92                   
     93                </ul>
    8694   
    87                 <ul id="transcriptionsList" class="transcription__list"></ul>
     95                <!-- <ul id="transcriptionsList" class="transcription__list"></ul> -->
    8896   
    8997                <template id="transcriptionTemplate">
     
    117125                    </li>
    118126                </template>
    119    
    120                 <template id="errorTemplate">
    121                     <li class="error-list-item">
    122                         <div>
    123                             <div class="spaced-block">
    124                                 <b>Transcription Failed: </b><span></span>
    125                             </div>
    126                             <div class="spaced-block">
    127                                 <b>File: </b><span></span>
    128                             </div>
    129                         </div>
    130                     </li>
    131                 </template>
    132127            </div>
     128
     129            <!-- <div class="audio-slider__container">
     130                <button type="button" class="btn-fab">
     131                    <span class="material-icons mdi-xl">&#xE037;</span>
     132                </button>
     133                <input type="range" min="0" value="0" class="audio-slider__range" />
     134                <span class="audio-slider__value">1:23</span>
     135            </div> -->
    133136        </section>
    134137       
    135138        <!-- TODO: Switch to production version for release builds -->
    136139        <gsf:script src="https://unpkg.com/vue@next"></gsf:script>
    137         <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js"></gsf:script>
     140        <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js" type="module"></gsf:script>
     141        <!-- <script type="module" src="interfaces/{$interface_name}/js/asr/asr-controller.js">
     142            <xsl:comment>Filler</xsl:comment>>
     143        </script> -->
    138144    </xsl:template>
    139145
Note: See TracChangeset for help on using the changeset viewer.