MaterialDeck/templates/soundboardConfig.html

<form autocomplete="off" onsubmit="event.preventDefault()">

    <div class="materialDeck_sbConfig_navigationDiv">
        <button type="button" class="materialDeck_sbConfig_navigation" name="navPrev" {{prevDisabled}}>
            <i class="fas fa-arrow-left"></i>
        </button>
        <p class="materialDeck_sbConfig_p"><b>
            {{localize "MaterialDeck.Sounds"}}: {{soundRange}} {{localize "MaterialDeck.Of"}} {{totalSounds}}
        </b></p>
        <button type="button" class="materialDeck_sbConfig_navigation" name="navNext">
            <i class="fas fa-arrow-right"></i>
        </button>
    </div>
    <hr>
    
    {{#each soundData}}
        <div class="form-group" style="width:100%">
            {{#each this.dataThis}}
                <div class="materialDeck_sbConfig_boxed">
                    <div style="text-align:center;">                    
                        {{localize "MaterialDeck.Sound"}} {{this.iteration}}
                    </div>
                    <div style="text-align:center;">                    
                        {{localize "MaterialDeck.Name"}}
                    </div>
                    <input type="text" name="namebox" value="{{this.name}}" id="materialDeck_sbConfig_name{{this.iteration}}" style="width:100%;" >

                    <div style="text-align:center;">                    
                        {{localize "MaterialDeck.Playlist"}}
                    </div>
                    <div>
                        <select name="playlist" class="playlist-select" default="" style="width:100%;" id="materialDeck_sbConfig_playlists{{this.iteration}}">
                            {{#select this.selectedPlaylist}}
                                {{#each ../../playlists}}
                                <option value="{{this.id}}">{{this.name}}</option>
                                {{/each}}
                            {{/select}}
                        </select>
                    </div>

                    <div style="text-align:center;">                    
                        {{localize "MaterialDeck.Sound"}}
                    </div>
                    <div class="form-fields" id="materialDeck_sbConfig_ss{{this.iteration}}" style="{{this.styleSS}}">
                        <select name="sounds" class="sounds-select" default="" style="width:100%;" id="materialDeck_sbConfig_soundSelect{{this.iteration}}">
                            {{#select this.sound}}
                                <option value="">{{localize "MaterialDeck.None"}}</option>
                                {{#each sounds}}
                                <option value="{{this.id}}">{{this.name}}</option>
                                {{/each}}
                            {{/select}}
                        </select>
                    </div>
                    <div class="form-fields" id="materialDeck_sbConfig_fp{{this.iteration}}" style="{{this.styleFP}}">
                        <button type="button" class="file-picker" data-type="audio" data-target="src{{this.iteration}}" title="Browse Files" tabindex="-1">
                            <i class="fas fa-file-import fa-fw"></i>
                        </button>
                        <input class="image" type="text" name="src{{this.iteration}}" name2="soundSrc" id="materialDeck_sbConfig_srcPath{{this.iteration}}" placeholder="path/audio.mp3" value={{this.srcPath}}>
                    </div>
                    <div style="text-align:center;">                    
                        {{localize "MaterialDeck.Icon"}}
                    </div>
                    <div class="form-fields">
                        <button type="button" class="file-picker" data-type="image" data-target="img{{this.iteration}}" title="Browse Files" tabindex="-1">
                            <i class="fas fa-file-import fa-fw"></i>
                        </button>
                        <input class="image" type="text" name="img{{this.iteration}}" name2="imgSrc"  id="materialDeck_sbConfig_imgPath{{this.iteration}}" placeholder="path/image.png" value={{this.imgPath}}>
                    </div>
                    <div class="flex-container" style="display:flex;flex-direction:row;padding-top:5px">  
                        <label style="flex:1">{{localize "MaterialDeck.On"}}&nbsp;&nbsp;&nbsp;</label>
                        <input style="flex:1" type="color" id="materialDeck_sbConfig_colorOn{{this.iteration}}" name="colorOn" style="flex:4" data-dtype="String" value="{{this.colorOn}}">
                        <label style="flex:1">&nbsp;{{localize "MaterialDeck.Off"}}&nbsp;&nbsp;</label>
                        <input style="flex:1" type="color" id="materialDeck_sbConfig_colorOff{{this.iteration}}" name="colorOff" style="flex:4" data-dtype="String" value="{{this.colorOff}}"> 
                    </div>
                    
                    <div class="form-group options">
                        <label>{{localize "MaterialDeck.Playback"}}</label>
                        <select name="mode" id="materialDeck_sbConfig_playmode{{this.iteration}}" style="flex:1">
                            {{#select this.mode}}
                            <option value="0">{{localize "MaterialDeck.Once"}}</option>
                            <option value="1">{{localize "MaterialDeck.Repeat"}}</option>
                            <option value="2">{{localize "MaterialDeck.Hold"}}</option>
                            {{/select}}
                        </select>  
                    </div>
                    <div class="form-group options">
                    <label>{{localize "MaterialDeck.Volume"}}</label>
                        <input type="range" min="0" max="100" value={{this.volume}} class="slider" name="volume" id="materialDeck_sbConfig_volume{{this.iteration}}">
                    </div>

                </div>
            {{/each}}
        </div>
    {{/each}}
    <hr>
    <div class="materialDeck_sbConfig_navigationDiv">
        <button type="button" class="materialDeck_sbConfig_navigation" name="clearPage">
            <i></i>{{localize "MaterialDeck.ClearPage"}}
        </button>
        <button type="button" class="materialDeck_sbConfig_navigation" name="clearAll">
            <i></i>{{localize "MaterialDeck.ClearAll"}}
        </button>
        <p style="flex:15;"></p>
        <button type="button" class="materialDeck_sbConfig_navigation" name="import">
            <i></i>{{localize "MaterialDeck.Import"}}
        </button>
        <button type="button" class="materialDeck_sbConfig_navigation" name="export">
            <i></i>{{localize "MaterialDeck.Export"}}
        </button>
    </div>
</form>