From f719fc2a91092c165181b8e88536a16a9f444ff5 Mon Sep 17 00:00:00 2001 From: vexorian Date: Fri, 2 Oct 2020 23:16:55 -0400 Subject: [PATCH] Channel Editor Rework --- web/directives/channel-config.js | 76 ++- web/public/style.css | 45 ++ web/public/templates/channel-config.html | 680 +++++++++++------------ web/public/templates/filler-config.html | 2 +- web/public/views/channels.html | 2 +- web/public/views/filler.html | 2 +- 6 files changed, 448 insertions(+), 359 deletions(-) diff --git a/web/directives/channel-config.js b/web/directives/channel-config.js index 3c9fca1..a0a51d1 100644 --- a/web/directives/channel-config.js +++ b/web/directives/channel-config.js @@ -11,6 +11,9 @@ module.exports = function ($timeout, $location, dizquetv) { }, link: function (scope, element, attrs) { scope.maxSize = 50000; + + scope.blockCount = 1; + scope.showShuffleOptions = false; scope.hasFlex = false; scope.showHelp = false; @@ -18,6 +21,7 @@ module.exports = function ($timeout, $location, dizquetv) { scope._frequencyMessage = ""; scope.minProgramIndex = 0; scope.libraryLimit = 50000; + scope.displayPlexLibrary = false; scope.episodeMemory = { saved : false, }; @@ -98,6 +102,27 @@ module.exports = function ($timeout, $location, dizquetv) { updateChannelDuration(); setTimeout( () => { scope.showRotatedNote = true }, 1, 'funky'); } + if (scope.isNewChannel) { + scope.tab = "basic"; + } else { + scope.tab = "programming"; + } + + scope.getTitle = () => { + if (scope.isNewChannel) { + return "Create Channel"; + } else { + let x = "?"; + if ( (scope.channel.number != null) && ( typeof(scope.channel.number) !== 'undefined') && (! isNaN(scope.channel.number) ) ) { + x = "" + scope.channel.number; + } + let y = "Unnamed"; + if (typeof(scope.channel.name) !== 'undefined') { + y = scope.channel.name; + } + return `${x} - ${y}`; + } + } scope._selectedRedirect = { isOffline : true, @@ -1073,25 +1098,34 @@ module.exports = function ($timeout, $location, dizquetv) { // validate var now = new Date() scope.error.any = true; - if (typeof channel.number === "undefined" || channel.number === null || channel.number === "") + if (typeof channel.number === "undefined" || channel.number === null || channel.number === "") { scope.error.number = "Select a channel number" - else if (channelNumbers.indexOf(parseInt(channel.number, 10)) !== -1 && scope.isNewChannel) // we need the parseInt for indexOf to work properly + scope.error.tab = "basic"; + } else if (channelNumbers.indexOf(parseInt(channel.number, 10)) !== -1 && scope.isNewChannel) { // we need the parseInt for indexOf to work properly scope.error.number = "Channel number already in use." - else if (!scope.isNewChannel && channel.number !== scope.beforeEditChannelNumber && channelNumbers.indexOf(parseInt(channel.number, 10)) !== -1) + scope.error.tab = "basic"; + } else if (!scope.isNewChannel && channel.number !== scope.beforeEditChannelNumber && channelNumbers.indexOf(parseInt(channel.number, 10)) !== -1) { scope.error.number = "Channel number already in use." - else if (channel.number < 0 || channel.number > 9999) + scope.error.tab = "basic"; + } else if (channel.number < 0 || channel.number > 9999) { scope.error.name = "Enter a valid number (0-9999)" - else if (typeof channel.name === "undefined" || channel.name === null || channel.name === "") + scope.error.tab = "basic"; + } else if (typeof channel.name === "undefined" || channel.name === null || channel.name === "") { scope.error.name = "Enter a channel name." - else if (channel.icon !== "" && !validURL(channel.icon)) + scope.error.tab = "basic"; + } else if (channel.icon !== "" && !validURL(channel.icon)) { scope.error.icon = "Please enter a valid image URL. Or leave blank." - else if (channel.overlayIcon && !validURL(channel.icon)) + scope.error.tab = "basic"; + } else if (channel.overlayIcon && !validURL(channel.icon)) { scope.error.icon = "Please enter a valid image URL. Cant overlay an invalid image." - else if (now < channel.startTime) + scope.error.tab = "basic"; + } else if (now < channel.startTime) { scope.error.startTime = "Start time must not be set in the future." - else if (channel.programs.length === 0) + scope.error.tab = "programming"; + } else if (channel.programs.length === 0) { scope.error.programs = "No programs have been selected. Select at least one program." - else { + scope.error.tab = "programming"; + } else { scope.error.any = false; for (let i = 0; i < scope.channel.programs.length; i++) { delete scope.channel.programs[i].$index; @@ -1101,6 +1135,7 @@ module.exports = function ($timeout, $location, dizquetv) { if (s.length > 50*1000*1000) { scope.error.any = true; scope.error.programs = "Channel is too large, can't save."; + scope.error.tab = "programming"; } else { await scope.onDone(JSON.parse(s)) s = null; @@ -1110,6 +1145,7 @@ module.exports = function ($timeout, $location, dizquetv) { console.error(err); scope.error.any = true; scope.error.programs = "Unable to save channel." + scope.error.tab = "programming"; } } $timeout(() => { scope.error = {} }, 60000) @@ -1202,6 +1238,26 @@ module.exports = function ($timeout, $location, dizquetv) { }; scope.loadChannels(); + scope.setTool = (toolName) => { + scope.tool = toolName; + } + + scope.hasPrograms = () => { + return scope.channel.programs.length > 0; + } + + scope.showPlexLibrary = () => { + scope.displayPlexLibrary = true; + } + + scope.toggleTools = () => { + scope.showShuffleOptions = !scope.showShuffleOptions + } + + scope.toggleToolHelp = () => { + scope.showHelp= !scope.showHelp + } + scope.disablePadding = () => { return (scope.paddingOption.id==-1) || (2*scope.channel.programs.length > scope.maxSize); } diff --git a/web/public/style.css b/web/public/style.css index 266cd05..ae4e554 100644 --- a/web/public/style.css +++ b/web/public/style.css @@ -1,5 +1,10 @@ .pull-right { float: right; } +.modal-semi-body { + padding: 1rem; + flex: 1 1 auto; +} + .commercials-panel { background-color: rgb(70, 70, 70); border-top: 1px solid #daa104; @@ -249,6 +254,42 @@ table.tvguide { text-align: right; } +div.channel-tools { + max-height: 20em; + overflow-y: scroll; + overflow-x: hidden; + margin-bottom: 1.5rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + border-top: 1px solid #888; + border-bottom: 1px solid #888; +} +div.channel-tools p { + font-size: 0.5rem; + margin-top: 0.01rem; +} + +div.programming-panes { + padding-top: 0; + padding-bottom: 0; +} +div.programming-panes div.programming-pane { + max-height: 30rem; + overflow-y: auto; + padding-top: 0; + padding-bottom: 0; + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +div.programming-programs div.list-group-item { + height: 1.5rem; +} +.channel-editor-modal { + width:1200px; + min-width: 98%; +} + /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } @@ -260,3 +301,7 @@ table.tvguide { 100% { transform: rotate(360deg); } } + +.program-row:nth-child(odd), .filler-row:nth-child(odd), .channel-row:nth-child(odd) { + background-color: #eeeeee; +} \ No newline at end of file diff --git a/web/public/templates/channel-config.html b/web/public/templates/channel-config.html index f6fdc75..402814e 100644 --- a/web/public/templates/channel-config.html +++ b/web/public/templates/channel-config.html @@ -1,13 +1,35 @@