dizquetv/web/public/templates/channel-config.html

<div>
    <div class="modal" tabindex="-1" role="dialog" style="display: block; background-color: rgba(0, 0, 0, .5);">
        <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        Channel Editor
                    </h5>
                </div>
                <div class="modal-body">
                    <div>
                        <div>
                            <span class="pull-right text-danger">{{error.number}}</span>
                            <label id="channelNumber" class="small">Ch. #</label>
                            <input for="channelNumber" class="form-control form-control-sm" type="number"
                                ng-model="channel.number"/>
                        </div>
                        <div>
                            <span class="pull-right text-danger">{{error.name}}</span>
                            <label id="channelName" class="small">Channel Name</label>
                            <input for="channelName" class="form-control form-control-sm" type="text"
                                ng-model="channel.name"/>
                        </div>
                        <div>
                            <span class="pull-right text-danger">{{error.icon}}</span>
                            <label id="channelIcon" class="small">Channel Icon</label>
                            <input for="channelIcon" class="form-control form-control-sm" type="url"
                                ng-model="channel.icon" />
                        </div>
                        <div>
                            <span class="pull-right text-danger">{{error.startTime}}</span>
                            <label id="channelStartTime" class="small">Channel Timeline Start {{maxDate}}</label>
                            <input for="channelStartTime" class="form-control form-control-sm" type="datetime-local" ng-model="channel.startTime"/>
                        </div>
                    </div>
                    <hr />
                    <div>
                        
                        <h6>Programs
                            <span class="small">Total: {{channel.programs.length}}</span>
                            <span class="badge badge-dark" style="margin-left: 15px;" ng-show="channel.programs.length !== 0">Commercials</span>
                            <button class="btn btn-sm btn-secondary" style="margin-left: 10px" ng-click="showShuffleOptions = !showShuffleOptions"  ng-show="channel.programs.length !== 0">
                                Shuffle / Sort&nbsp;&nbsp;<span class="fa {{ showShuffleOptions ? 'fa-chevron-down' : 'fa-chevron-right'}}"></span>
                            </button>
                            <span class="pull-right">
                                <span class="text-danger small">{{error.programs}}</span>
                                <button class="btn btn-sm btn-primary" ng-click="displayPlexLibrary = true">
                                    <span class="fa fa-plus"></span>
                                </button>
                            </span>
                        </h6>
                        <div ng-init="blockCount = 1; showShuffleOptions = false" ng-show="showShuffleOptions">
                            <p class="text-center text-info small">"Block Shuffle" and "Sort TV Shows" will push any movies to the end of the channel.</p>
                            <div class="input-group mb-1">
                                <div class="input-group-prepend">
                                    <button class="btn btn-sm btn-warning" type="button" ng-click="blockShuffle(blockCount, randomizeBlockShuffle)">Block Shuffle</button>
                                </div>
                                <input type="number" class="form-control form-control-sm" placeholder="Desired number of consecutive TV shows." min="1" max="10" ng-model="blockCount">
                                
                                <div class="input-group-append">
                                    <div class="input-group-text" style="padding: 0">
                                        <label class="small" for="randomizeBlockShuffle" style="margin-bottom: 4px;">&nbsp;Randomize&nbsp;&nbsp;</label>
                                        <input id="randomizeBlockShuffle" type="checkbox" ng-model="randomizeBlockShuffle">&nbsp;
                                    </div>
                                </div>
                            </div>
                            <div class="input-group mb-1">
                                <button class="btn btn-sm btn-warning form-control form-control-sm" type="button" ng-click="randomShuffle()">Random Shuffle</button>
                            </div>
                            <div class="input-group mb-1">
                                <button class="btn btn-sm btn-warning form-control form-control-sm" type="button" ng-click="sortShows()">Sort TV Shows</button>
                            </div>
                            <div class="input-group mb-1">
                                <button class="btn btn-sm btn-warning form-control form-control-sm" type="button" ng-click="removeDuplicates()">Remove Duplicates</button>
                            </div>
                        </div>
                        <div ng-if="channel.programs.length === 0">
                            <div class="small">Add programs to this channel by selecting media from your Plex library
                            </div>
                            <br />
                            <h5 class="text-center text-danger">No programs are currently scheduled</h5>
                        </div>
                        <div class="list-group list-group-root" dnd-list="channel.programs">
                            <li class="list-group-item flex-container" ng-repeat="x in channel.programs"
                                ng-click="selectProgram($index)" dnd-draggable="x" dnd-moved="channel.programs.splice($index, 1)"
                                dnd-effect-allowed="move">
                                <div class="small" style="width: 150px; margin-right: 5px;">
                                    <div class="text-success">{{x.start.toLocaleString()}}</div>
                                    <div class="text-danger">{{x.stop.toLocaleString()}}</div>
                                </div>
                                <div style="margin-right: 15px; text-align: center">
                                    <span class="badge badge-dark">{{x.commercials.length}}</span>
                                </div>
                                <div style="margin-right: 5px;">
                                    {{ x.type === 'episode' ? x.showTitle + ' - S' + x.season.toString().padStart(2, '0') + 'E' + x.episode.toString().padStart(2, '0') : x.title}}
                                </div>
                                <span class="flex-pull-right btn fa fa-trash"
                                    ng-click="removeItem($index);  $event.stopPropagation()"></span>
                            </li>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="text-right">
                        <button class="btn btn-sm btn-link" ng-click="_onDone()">
                            Cancel
                        </button>
                        <button class="btn btn-sm btn-primary" ng-click="_onDone(channel)">
                            {{ isNewChannel ? 'Add Channel' : 'Update Channel' }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <program-config program="_selectedProgram" on-done="finshedProgramEdit"></program-config>
    <plex-library height="300" visible="displayPlexLibrary" on-finish="importPrograms"></plex-library>
</div>