\n \n \n \n {\n setStationSearch(e.target.value);\n } }\n placeholder=\"Filter station list…\" />\n
\n \n \n Loading…\n
\n );\n}\n","import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\n\n// this is used within the Date Picker component;\n// as the trigger to open the Date Picker;\n\n// even though this doesn't make use of state, it shouldn't be a stateless component;\n// if it's stateless, a React error will be thrown in the console about adding a ref to a stateless component;\n// the ref is added by the Date Picker;\n\nexport default class ScheduleByWeekTitle extends Component {\n render() {\n return (\n\n
\n );\n}\n\nScheduleByWeek.propTypes = {\n loaded: PropTypes.bool, // show the loading indicator or not;\n sunday: PropTypes.string // used to calc title and link values and content;\n};\n\n// return text for the title and buttons;\nfunction returnWeekRange(sunday, weekOffset, dateFormat) {\n const date = moment(sunday).day(weekOffset * 7);\n const startDate = date.format(dateFormat);\n const endDate = date.day(6).format(dateFormat);\n\n return `${startDate} - ${endDate}`;\n}\n","import React, { Component } from \"react\";\nimport { browserHistory } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport util from \"../util/util\";\nimport InaccessibleLink from \"../shim/inaccessible-link\";\n\nconst jQuery = window.jQuery;\n\nconst returnInitialState = props => {\n return {\n pod: props.pod,\n rule: props.rule\n };\n};\n\nexport default class TimeslotPopover extends Component {\n constructor(props) {\n super(props);\n\n // create a unique ID so when the popover JS is applied;\n // this is the only target to init;\n this.id = `id-${(Math.random() * 1e64).toString(36)}`;\n\n this.state = returnInitialState(props);\n }\n\n componentDidMount() {\n this.mounted = true;\n\n this.initPopover();\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n componentWillReceiveProps(nextProps) {\n this.setState(returnInitialState(nextProps), this.initPopover);\n }\n\n render() {\n return (\n \n {props.loaded === false ? (\n
\n\n \n
\n )}\n \n
\n\n \n
\n
\n \n
\n \n {this.state.pod.name}\n \n\n
\n );\n }\n\n initPopover() {\n const insertedEvent = `inserted.bs.popover`;\n const shownEvent = `shown.bs.popover`;\n const hideEvent = `hide.bs.popover`;\n const clickEvent = `click.popover`;\n const $body = jQuery(`body`);\n\n // define the link to trigger the popover;\n const $popoverTrigger = jQuery(`#${this.id}`);\n\n // init the Bootstrap popover for just this one instance;\n // the contents of the popover come from a hidden DIV;\n // then attach Bootstrap popover events to change the content once it is shown;\n $popoverTrigger\n .popover({\n container: `body`,\n content: () => $popoverTrigger.next().html(),\n html: true,\n placement: `auto`\n })\n .off(hideEvent)\n .on(hideEvent, () => {\n // remove the event bound to the body on show;\n $body.off(clickEvent);\n })\n .off(insertedEvent)\n .on(insertedEvent, () => {\n // once shown, change the links to be interactive;\n // it must be done this way (after the popover is created);\n // Bootstrap does not clone the events attached to the popover content, just the raw HTML;\n jQuery(`.popover a`).on(clickEvent, e => {\n const $a = jQuery(e.target);\n const to = $a.attr(`href`);\n\n e.preventDefault();\n\n browserHistory.push(to);\n });\n })\n .off(shownEvent)\n .on(shownEvent, () => {\n // add event to body to close this popover on click elsewhere;\n // but we can't have clicks from within the popover to trigger the closing;\n $body.off(clickEvent).on(clickEvent, e => {\n if (\n jQuery(e.target)\n .parents(`.popover`)\n .size() === 0\n ) {\n $popoverTrigger.trigger(clickEvent);\n }\n });\n });\n }\n}\n\nTimeslotPopover.propTypes = {\n pod: PropTypes.object,\n rule: PropTypes.object\n};\n","import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\n\n// this is used within the Date Picker component;\n// as the trigger to open the Date Picker;\n\n// even though this doesn't make use of state, it shouldn't be a stateless component;\n// if it's stateless, a React error will be thrown in the console about adding a ref to a stateless component;\n// the ref is added by the Date Picker;\n\nexport default class ReportsSearchDate extends Component {\n render() {\n return (\n \n );\n }\n}\n\nReportsSearchDate.propTypes = {\n onClick: PropTypes.func, // event to fire onClick (open the Date Picker);\n dateDisplay: PropTypes.string // value to show;\n};\n","import React, { useEffect, useState } from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport TimeslotPopover from \"../timeslot-popover/timeslot-popover\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\nimport DatePicker from \"react-datepicker\";\nimport ReportsSearchDate from \"../reports/reports-search-date\";\n\nexport default function ScheduleByWeekSchedule(props) {\n const [showScheduleForm, setShowScheduleForm] = useState(false);\n const [startDate, setStartDate] = useState(moment(props.sunday));\n const [endDate, setEndDate] = useState(moment(props.sunday).add(6, \"days\"));\n\n useEffect(() => {\n setStartDate(moment(props.sunday));\n setEndDate(moment(props.sunday).add(6, \"days\"));\n }, [props.sunday]);\n\n return (\n \n
\n \n
\n \n
\n \n
\n Rule
\n\n {this.state.rule ? (\n \n {this.state.rule.name}\n \n ) : null}\n
\n\n
\n Source Pod
\n\n {this.state.pod ? (\n \n {this.state.pod.name}\n \n ) : null}\n
\n\n
\n );\n\n function renderScheduleByIndex(startIndex, endIndex) {\n const schedule = props.schedule.slice(startIndex, endIndex);\n const returnRowSpan = duration => {\n const durationArray = duration.split(`:`);\n const hours = Number(durationArray[0]);\n const minutes = Number(durationArray[1]);\n let rowspan = hours * 3; // first half hour slot, first half hour slot's interstital slot, second half hour slot;\n\n // if the show is only X hours long, then no need to add any additional rows;\n // if if the show is 1:30 long, we need 5 rows, not 3;\n if (minutes) {\n rowspan = rowspan + 2;\n }\n\n return rowspan;\n };\n\n // before we render the partial schedule, we need to adjust the object to account for rowspans;\n // we do not account for rowspans across tabs (a show running from 7:30 - 8:30 has a rowspan of 1, not 3);\n schedule.map(\n (row, rowIndex) =>\n row.days &&\n row.days.forEach((day, dayIndex) => {\n if (day.content.duration && day.content.duration !== `00:30:00`) {\n const rowSpan = returnRowSpan(day.content.duration);\n\n day.content.rowSpan = rowSpan;\n\n // now that we know the rowspan for this show, we need to remove the timeslots from the next X rows so the table lays out properly;\n // start at one row past the current row - otherwise we'd skip the show we want to display;\n for (let i = 1; i < rowSpan; i++) {\n const target = schedule[rowIndex + i];\n if (target) {\n target.days[dayIndex].skip = true;\n }\n }\n }\n })\n );\n\n return (\n \n setShowScheduleForm(!showScheduleForm)}\n >\n \n Export schedule\n \n
\n\n \n
\n\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n
- \n
- \n \n 00:00 - 7:30\n \n \n
- \n \n 08:00 - 15:30\n \n \n
- \n \n 16:00 - 23:30\n \n \n
\n
\n \n {renderScheduleByIndex(0, 32)}\n
\n \n {renderScheduleByIndex(32, 64)}\n
\n \n {renderScheduleByIndex(64, 96)}\n
\n \n \n
\n
\n );\n }\n}\n\nScheduleByWeekSchedule.propTypes = {\n schedule: PropTypes.array, // array used to build the TABLE;\n sunday: PropTypes.string // used to calc the THs;\n};\n","import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\nimport ScheduleByWeekButtons from \"./schedule-by-week-buttons\";\nimport ScheduleByWeekSchedule from \"./schedule-by-week-schedule\";\n\nexport default class ScheduleByWeek extends Component {\n constructor(props) {\n super(props);\n\n this.state = this.returnInitialState(props);\n }\n\n componentDidMount() {\n this.mounted = true;\n\n this.getScheduleByWeek();\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n componentWillReceiveProps(nextProps) {\n this.setState(this.returnInitialState(nextProps), this.getScheduleByWeek);\n }\n\n render() {\n return (\n | \n {util.days.map((day, i) => {\n const date = moment(props.sunday).add(i, `days`);\n const dateForLink = date.format(util.dateFormatComputer);\n const dateForDisplay = date.format(util.dateFormatHumanShort);\n\n return (\n | \n \n {dateForDisplay}\n \n | \n );\n })}\n|||
|---|---|---|---|---|
| \n | \n ) : (\n {row.timeslot} | \n )}\n {row.days &&\n row.days.map((day, k) => {\n // determine what kind of content (if any) to show;\n\n // skip (meaning a previous show is taking up this timeslot);\n // this is first because a pod may be assigned to a slot we should skip;\n // the back-end allows pods to be assigned to invalid slots;\n if (day.skip) {\n return null;\n }\n // pod;\n else if (day.content.pod) {\n return (\n\n | \n );\n }\n // show;\n else if (day.content.show) {\n return (\n \n {day.content.show}\n | \n );\n }\n // undefined;\n else {\n return;\n }\n })}\n |
\n
\n\n
\n\n
\n );\n }\n\n // use the same logic to set state (on load, on prop change);\n returnInitialState(props = {}) {\n const sunday = util.returnSunday(\n (props.params && props.params.day) || new Date()\n );\n\n return {\n loaded: false, // indicates that the content is ready for display (even when schedule is empty);\n schedule: this.returnEmptySchedule(sunday), // main content to display;\n sunday: sunday // used to start the calc of the THs, and the title;\n };\n }\n\n // returns an empty schedule we can now use;\n // insert Ajax content into it, or display as-is (on prop change);\n returnEmptySchedule(sunday) {\n const schedule = [];\n\n const createRow = (timeslot, date) => {\n const days = [];\n\n // create empty day values for each time slot;\n for (let i = 0; i < 7; i = i + 1) {\n days.push({\n date: moment(date)\n .add(i, `days`)\n .format(util.dateFormatComputer),\n content: ``\n });\n }\n\n // create the `table row` for each time slot;\n return {\n days: days,\n timeslot: timeslot\n };\n };\n\n // loop through the 24 hours of the day;\n for (let hour = 0; hour < 24; hour = hour + 1) {\n const hourFormatted = hour < 10 ? `0${hour}` : hour;\n\n // loop through the hour and half hour slot;\n // the 28 and 58 are placeholders for the associated pods (as interstitials);\n [`00`, `28`, `30`, `58`].forEach(time => {\n // create the `table row` for each time slot;\n schedule.push(createRow(`${hourFormatted}:${time}`, sunday));\n });\n }\n\n return schedule;\n }\n\n // get the schedule data to display (one week at a time);\n getScheduleByWeek() {\n const schedule = this.state.schedule;\n const processData = data => {\n data.forEach(show => {\n const airtime = moment(show.airtime);\n const timeslot = airtime.format(`HH:mm`);\n const date = airtime.format(util.dateFormatComputer);\n\n // find the timeslot (if it exists);\n schedule.forEach((slot, i) => {\n if (slot.timeslot === timeslot) {\n // loop through the days and find a match (if it exists);\n slot.days.forEach((day, j) => {\n if (day.date === date) {\n // add the show or interstitial to the timeslot;\n schedule[i].days[j].content = show.title\n ? {\n show: show.title,\n duration: show.duration\n }\n : {\n pod: show.pod,\n rule: show.rule\n };\n }\n });\n }\n });\n });\n };\n\n // get this weeks show data;\n util\n .getScheduleByWeek(this.state.sunday)\n .then(data => {\n processData(data);\n\n // then this weeks interstitial data;\n return util.getInterstitialsByWeek(this.state.sunday);\n })\n .then(data => {\n processData(data);\n\n setTimeout(() => {\n this.mounted &&\n this.setState({\n loaded: true,\n schedule: schedule\n });\n }, util.delayList);\n });\n }\n}\n\nScheduleByWeek.propTypes = {\n params: PropTypes.object\n};\n","import React, { useEffect, useState } from \"react\";\nimport { browserHistory } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport PageHeader from \"../page-header/page-header\";\nimport ScheduleByWeek from \"../schedule-by-week/schedule-by-week\";\nimport util from \"../util/util\";\nimport _ from \"lodash\";\n\nexport default function App(props) {\n // data about a user;\n const [userData, setUserData] = useState({});\n // using this to preserve the user data on Station change\n const [stationChanged, setStationChanged] = useState(false);\n // indicator for when the page has loaded\n const [userSignedOut, setUserSignedOut] = useState(false);\n\n // !!! Note, for the future, on how the flow works:\n // 1. when a function component is loaded, it will read all its variables\n // and functions, and will execute the 'return' part.\n // 2. if the 'return' part also contains loading some sub-components, it will\n // parse all the 'return' part (so all those sub-components), and at the end,\n // it will start to load them, one by one.\n // 3. first sub-component is loaded (it will do all the parts from #1.), and:\n // 3.1. if that has any sub-components itself, it will do #2., #3. and so on...\n // 3.2. if it doesn't have, that sub-component it's considered 'mounted' and\n // it will enter the useEffect function.\n // 4. useEffect of the first sub-component, (after reading all its variables and\n // functions) it will do the logic in there, and:\n // 4.1. if that logic involves updating the 'state', it will parce all\n // the 'setData, set...' statements, and at the end, it will re-render\n // that sub-component entirely (read all v&f + the code from the 'return' part),\n // Notes: - the re-rendering only runs IF any of the state variables changed\n // (no matter if they are used somewhere in the 'return' part or not)\n // - the useEffect ONLY gets triggered IF any of the state variables changed\n // AND IF the variable that changed is included in the dependencyArray\n // 4.2. if that logic contains some async methods (fetch from backend,...)\n // it will finish here\n // 5. useEffect of the initial component, (after reading all its variables and\n // functions) it will do the logic in there, and:\n // 5.1. & 5.2. same as #4.1. and #4.2.\n // Note: if it's #5.1., then all the #1.-#4. parts will be run again\n // (so, each time a parent component is re-rendered (and it re-runs\n // the 'return' part), its sub-components get re-run from scratch !!!).\n // 6. the async functions get executed (in some order), which could trigger\n // any combinations of re-rendering (#2.-#5.), for few/multiple times.\n // Note: in contrast with #4.1. and #5.1. (where all the 'set\n
\n\n \n
\n Weekly Schedule
\n\n\n
\n\n
\n setCurrentStation(id)}\n />\n\n {renderChildren()}\n
\n );\n }\n}\n\nApp.propTypes = {\n children: PropTypes.node,\n location: PropTypes.object\n};\n","import React from \"react\";\nimport ReactTooltip from \"react-tooltip\";\n\nexport default function Tooltip(props) {\n return (\n Are you sure you want to delete the campaign: ${campaign.name}?
`;\n const buttonTextDefault = `Delete Campaign`;\n const buttonTextLoading = `Deleting Campaign`;\n const iconClass = `fa-trash-o`;\n const $modal = util.renderModal(\n title,\n body,\n buttonTextDefault,\n buttonTextLoading,\n iconClass\n );\n const $confirmButton = $modal.find(`.btn-danger`);\n $confirmButton.one(`click`, () => {\n $confirmButton.button(`loading`);\n\n util\n .deleteCampaign(campaign.id)\n .fail(() => {\n setTimeout(() => {\n // reset the button on fail so it can be clicked again;\n $confirmButton.button(`reset`);\n }, util.delayForm);\n })\n .then(d => {\n // once done, go back to the list of campaigns\n $modal.modal(`hide`);\n browserHistory.push(`/campaigns/`);\n });\n });\n\n // attach the modal to the DOM, and then show it;\n jQuery(`body`).append($modal);\n $modal.modal(`show`);\n };\n\n return (\n\n
\n
\n );\n}\n\nCampaignDetailCampaign.propTypes = {\n campaign: PropTypes.object\n};\n","import React from \"react\";\n\nexport default function LoadingIndicatorText() {\n return (\n \n \n Loading…\n \n );\n}\n","import React from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport LoadingIndicatorText from \"../loading-indicator/loading-indicator-text\";\nimport InaccessibleLink from \"../shim/inaccessible-link\";\nimport util from \"../util/util\";\n\nexport default function CampaignDetailPods(props) {\n return (\n \n
\n \n
\n {campaign.name}
\n\n
\n \n
\n
\n
\n \n \n
\n Campaign Name
\n{campaign.name}
\n\n
\n Created
\n{moment(campaign.created).format(util.dateFormatHumanLong)}
\n\n
\n \n
\n Last Changed By
\n\n Not available in the API (yet).\n
\n\n
\n Change Log
\n\n
\n
\n\n
\n );\n\n // three options (loading, zero pods, pods);\n function renderPodRows(pods = false) {\n if (pods.length === 0) {\n return (\n \n
\n\n \n
\n Pods
\n\n
\n \n \n \n Create New Pod\n \n
\n\n\n
\n \n
\n
\n | # | \nPod | \nUploaded | \nRemove Pod | \n
|---|
\n
\n\n
\n );\n}\n\nCampaignDetailRules.propTypes = {\n campaignId: PropTypes.number,\n expired: PropTypes.bool,\n rules: PropTypes.array,\n onLoadExpired: PropTypes.func\n};\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport CampaignDetailCampaign from \"./campaign-detail-campaign\";\nimport CampaignDetailPods from \"./campaign-detail-pods\";\nimport CampaignDetailRules from \"./campaign-detail-rules\";\nimport LoadingIndicatorHeader from \"../loading-indicator/loading-indicator-header\";\nimport util from \"../util/util\";\n\nconst jQuery = window.jQuery;\n\nexport default function CampaignDetail(props) {\n // id of the campaign we are editing\n const [id, setId] = useState(0);\n // indicator for when the page has loaded\n const [loaded, setLoaded] = useState(false);\n // the Campaign data from the backend\n const [campaign, setCampaign] = useState({});\n // the associated Pods for this campaign\n const [pods, setPods] = useState([]);\n // the Rules, that are still valid, where this Campaign is used on\n const [rules, setRules] = useState([]);\n // all the Rules, even the Expired ones, where this Campaign is/was used on\n const [rulesAll, setRulesAll] = useState([]);\n // toggle to display the Expired Rules or not\n const [showExpiredRules, setShowExpiredRules] = useState(false);\n\n useEffect(() => {\n const id = props.params ? Number(props.params.id) : 0;\n\n const getCampaign = () => {\n // fire off both Ajax requests needed for this page\n // (the campaign data and the associated pods for this campaign);\n // once both have resolved, save the data and set loaded to true;\n jQuery\n .when(util.getCampaign(id), util.getPodsForCampaign(id))\n .then((campaignData, podsData) => {\n setTimeout(() => {\n const allRules = campaignData[0].rules;\n const nonExpiredRules = [];\n\n // split the rules into two groups based on their state;\n allRules.forEach(rule => {\n if (rule.state.toLowerCase() !== `expired`) {\n nonExpiredRules.push(rule);\n }\n });\n\n // setting the Campaign and the Rules data\n setId(id);\n setCampaign(campaignData[0]);\n setRules(nonExpiredRules);\n setRulesAll(allRules);\n setShowExpiredRules(nonExpiredRules.length === allRules.length);\n\n // setting the Pods to display, or false which indicates zero pods\n setPods(podsData[0].results.length ? podsData[0].results : false);\n }, util.delayDetail);\n });\n };\n\n getCampaign();\n setLoaded(true);\n }, [props.params]);\n\n // delete the link between a campaign and a pod;\n const deletePodAssociation = pod => {\n const title = `Remove Pod from Campaign`;\n const body =\n `\n
\n\n \n
\n Rules
\n\n
\n \n
\n\n
\n \n
\n
\n\n {props.expired === false ? (\n | # | \nRule | \nStart Date | \nEnd Date | \nTime Slots / Shows | \nRule Created | \n
|---|---|---|---|---|---|
| \n 0\n | \n{util.zeroRulesMessage} | \n||||
| \n {index + 1}\n | \n\n \n {rule.name}\n \n | \n\n {moment(rule.start_date).format(util.dateFormatHumanLong)}\n | \n\n {moment(rule.end_date).format(util.dateFormatHumanLong)}\n | \n\n {rule.timeslots && rule.timeslots.length > 0 ? (\n | \n \n {moment(rule.created).format(util.dateFormatHumanLong)}\n | \n
\n
Are you sure you want to remove the association between:` +\n `
${pod.name} and ` +\n `${campaign.name}?
\n
\n\n deletePodAssociation(id)}\n />\n\n
\n\n loadExpiredRules()}\n />\n
\n );\n }\n}\n\nCampaignDetail.propTypes = {\n params: PropTypes.object\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport default function CampaignFormButtons(props) {\n return (\n \n\n
\n\n
\n
can be scheduled.\";\n return (\n \n );\n }\n}\n\nCampaignForm.propTypes = {\n params: PropTypes.object\n};\n","export default function campaignFormValidation(report) {\n // returned, defines if we have errors or not;\n let hasErrors = false;\n\n // returned, used to setState to inform the users of the errors;\n const errors = {};\n\n // campaign name is required;\n if (report.name === ``) {\n errors.name = \"Campaign Name is a required field.\";\n hasErrors = true;\n }\n\n return {\n errors: errors, // return for setState to tell the user what went wrong;\n hasErrors: hasErrors // return true/false so the submit works/doesn't;\n };\n}\n","import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport util from \"../util/util\";\n\nexport default function CampaignListSearchForm(props) {\n const [search, setSearch] = useState(props.search || ``); // search string value;\n\n useEffect(() => {\n setSearch(props.search);\n }, [props]);\n\n // go to a new URL with the selected form values;\n const onSearchSubmit = () => {\n let url = `${util.returnCampaignListUrl()}?sort=${props.sort}`;\n\n if (search.length) {\n url = `${url}&search=${search}`;\n }\n\n const params = {\n url: url,\n search: search\n };\n\n props.searchSubmit(params);\n };\n\n // reset search form values to their default state;\n const onSearchReset = () => {\n setSearch(``);\n };\n\n // if the key pressed is `enter` then submit the search form;\n const onKeyPress = e => {\n if (e.key === `Enter`) {\n onSearchSubmit();\n }\n };\n\n return (\n
\n
\n );\n}\n\nCampaignListSearchForm.propTypes = {\n search: PropTypes.string,\n sort: PropTypes.string, // not editable from this component, but needs to be passed in the form;\n searchSubmit: PropTypes.func\n};\n","import React from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\nimport LoadingIndicatorText from \"../loading-indicator/loading-indicator-text\";\n\nconst jQuery = window.jQuery;\n\nexport default function CampaignListTable(props) {\n return (\n \n \n setSearch(e.target.value.trim())}\n onKeyPress={e => onKeyPress(e)}\n />\n
\n\n \n \n\n \n
\n \n \n
\n
\n );\n\n // three options for display (loading, no results, results);\n function renderCampaignRows(campaigns = false) {\n if (campaigns.length === 0) {\n return (\n | # | \n{renderSortLink(`name`, `Campaign`)} | \nTotal Pods | \n{renderSortLink(`-created`, `Date Created`)} | \n
|---|
\n searchSubmit(params)}\n />\n\n
\n );\n}\n\nCampaignList.propTypes = {\n location: PropTypes.object,\n params: PropTypes.object\n};\n","import React, { useEffect, useState } from \"react\";\nimport { browserHistory } from \"react-router\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport _ from \"lodash\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\nimport LoadingIndicatorText from \"../loading-indicator/loading-indicator-text\";\nimport Pagination from \"../pagination/pagination\";\n\nconst jQuery = window.jQuery;\n\nexport default function ChangeLogByObj(props) {\n // id used to go get the object data;\n const [id, setId] = useState(0);\n // change log to display (will be populated by an Ajax call);\n const [log, setLog] = useState([]);\n // the type of object to view (rule, pod, campaign);\n const [objType, setObjType] = useState(null);\n // the object name\n const [objName, setObjName] = useState(``);\n // the object url\n const [objUrl, setObjUrl] = useState(``);\n // page of object results;\n const [page, setPage] = useState(1);\n // number of pages to display in the pagination links;\n const [pageCount, setPageCount] = useState(0);\n // pass to sort and pagination links to maintain search state;\n const [queryString, setQueryString] = useState(null);\n // list sort value;\n const [sort, setSort] = useState(`-date_created`);\n\n useEffect(() => {\n const objectId = Number(_.get(props, `params.id`, 0));\n const objectType = _.get(props, `params.obj`, null);\n const pageNo = Number(_.get(props, `params.page`, 1));\n const sortBy = _.get(props, `location.query.sort`, `-date_created`);\n\n const getChangeLog = () => {\n // if this is an exception, stop right here;\n // need to convert the exception id into the rule id;\n if (objectType === `exception`) {\n return util.getException(objectId).then(data => {\n browserHistory.replace(\n util.returnChangeLogDetailUrl(`rules.rule`, data.rule)\n );\n });\n }\n\n let getObj = null;\n let returnObjUrl = null;\n\n // determine what the functions will be (diff based on object type);\n if (objectType === `rule`) {\n getObj = util.getRule;\n returnObjUrl = util.returnRuleDetailUrl;\n } else if (objectType === `campaign`) {\n getObj = util.getCampaign;\n returnObjUrl = util.returnCampaignDetailUrl;\n } else if (objectType === `pod`) {\n getObj = util.getPod;\n returnObjUrl = util.returnPodDetailUrl;\n }\n\n // not sure what the scenario would be where a user gets to this page\n // and it's not one of the above types;\n // but in case the obj isn't found, don't throw an error;\n if (getObj) {\n // now we know what type of object it is;\n // get the object name, and set the `back to detail page` url;\n getObj(objectId).then(data => {\n setTimeout(() => {\n setObjName(data.name);\n setObjUrl(returnObjUrl(objectId));\n }, util.delayList);\n });\n } else {\n setObjName(`Unknown Object`);\n }\n\n // get the change log content;\n util\n .getChangeLog({\n contentType: util.returnChangeLogPath(objectType).key,\n id: objectId,\n page: pageNo,\n sort: sortBy\n })\n .then(data => {\n setTimeout(() => {\n setId(objectId);\n setObjType(objectType);\n setLog(data.results.length ? data.results : []);\n setPage(pageNo);\n setPageCount(Math.ceil(data.count / util.changeLogResultsPerPage));\n setQueryString(_.get(props, `location.search`, null));\n setSort(sortBy);\n }, util.delayList);\n });\n };\n\n getChangeLog();\n }, [props]);\n\n // three options for display (loading, no results, results);\n const renderRows = (logs = false) => {\n if (logs.length === 0) {\n return (\n \n
\n\n \n
\n Campaigns
\n\n
\n \n \n \n Create New Campaign\n \n
\n\n
\n\n
\n );\n}\n\nChangeLogByObj.propTypes = {\n location: PropTypes.object,\n params: PropTypes.object\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport default function ChangeLogByUser(props) {\n return (\n \n
\n\n \n
\n \n {objUrl && objType ? (\n \n \n Return to {objType.split(`.`).slice(-1)} detail\n \n ) : null}\n
\n\n \n Change Log: {objName ? objName :
\n
\n \n Change Log: {objName ? objName :
\n \n\n
\n \n
\n
\n\n | # | \nUser | \nChange | \n{renderSortLink(`-date_created`, `Date`)} | \n
|---|
\n
\n );\n}\n\nChangeLogByUser.propTypes = {\n params: PropTypes.object\n};\n","import React, { useEffect, useState } from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport _ from \"lodash\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\nimport LoadingIndicatorText from \"../loading-indicator/loading-indicator-text\";\nimport Pagination from \"../pagination/pagination\";\n\nconst jQuery = window.jQuery;\n\nexport default function ChangeLogList(props) {\n // change log to display (will be populated by an Ajax call);\n const [log, setLog] = useState([]);\n // page of rule results;\n const [page, setPage] = useState(1);\n // number of pages to display in the pagination links;\n const [pageCount, setPageCount] = useState(0);\n // pass to sort and pagination links to maintain search state;\n const [queryString, setQueryString] = useState(null);\n // list sort value;\n const [sort, setSort] = useState(`-date_created`);\n\n useEffect(() => {\n const pageNo = Number(_.get(props, `params.page`, 1));\n const sortBy = _.get(props, `location.query.sort`, `-date_created`);\n\n const getChangeLog = () => {\n // get the change log content;\n util\n .getStationChangeLog({\n page: pageNo,\n sort: sortBy\n })\n .then(data => {\n setTimeout(() => {\n setPage(pageNo);\n setPageCount(Math.ceil(data.count / util.changeLogResultsPerPage));\n setQueryString(_.get(props, `location.search`, null));\n setSort(sortBy);\n setLog(data.results.length ? data.results : false);\n }, util.delayList);\n });\n };\n\n getChangeLog();\n }, [props]);\n\n // three options for display (loading, no results, results);\n const renderRows = (logs = false) => {\n if (logs.length === 0) {\n return (\n \n
\n \n
\n Change Log
\n\n
\n \n \n
\nNo API available.
\n\n
\n\n
\n );\n}\n\nChangeLogList.propTypes = {\n params: PropTypes.object\n};\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Link } from \"react-router\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\n\nexport default function ConflictFormRule(props) {\n // rule content to display;\n const [rule, setRule] = useState({});\n\n useEffect(() => {\n setRule(props.rule);\n }, [props.rule]);\n\n return (\n \n
\n\n \n
\n Change Log
\n\n\n
\n \n
\n
\n\n | # | \nUser | \nObject | \nChange | \n{renderSortLink(`-date_created`, `Date`)} | \n
|---|
\n
\n );\n}\n\nConflictFormRule.propTypes = {\n rule: PropTypes.object\n};\n","import React, { useEffect, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\nimport LoadingIndicatorHeader from \"../loading-indicator/loading-indicator-header\";\n\nexport default function ConflictFormSchedule(props) {\n // indicator for when the component has loaded\n const [loaded, setLoaded] = useState(false);\n // the Schedule to display (includes Days, Timeslots, Shows, Interstitials and\n // the Day/Timeslot/Interstitial in Conflict)\n const [schedule, setSchedule] = useState([]);\n // this Component renders only when the 'schedule' or the 'sunday' changes (but they\n // are coupled together, so it's enough if we re-render it based on the 'schedule')\n // the other tricky part is that we want to re-render it only in some cases, and not\n // in others - so using some variables to store in memory values we need to compare;\n // on the case when the week and the timeslot don't change, but only the day changes\n // there's no need to do the 2 backend calls (Schedule+Interstitials) as we already\n // have the data, so we only need to update the 'timeslot in conflict', but for this\n // we also need a copy of the 'schedule' (as using it directly, because it's an array,\n // and because we re-evaluate (re-write) the 'timeslot in conflict' part every time,\n // react sees it as modified and keeps re-rendering the component, infinitely)\n // so, we use the 'schedule' hook to render the component, and the below refs to\n // compare old to new values, and re-render the component only in some cases\n // !!! important - as we cannot update the 'oldSchedules' and the 'schedules' hooks\n // directly, as doing this 'let updatedSchedule = oldSchedule.current;' and then\n // 'setSchedule(updatedSchedule);' would only copy the references, and the component\n // won't get re-rendered, we need a new array (with spread, map,..) to copy the values\n // from 'oldSchedule.current' ('let updatedSchedule = [...oldSchedule.current];'), and\n // then update the state with the newly copied array ('setSchedule(updatedSchedule);')\n // in order for the Component to get re-rendered\n let sunday = useRef(``);\n let timeslot = useRef(``);\n let oldSchedule = useRef([]);\n\n // Note on why/when we need to include the called function ('getScheduleByWeek()' in\n // this case), inside the 'useEffect' function:\n // - when the called function ('getScheduleByWeek') uses any of the 'deps' of\n // 'useEffect' ('props.day' or 'props.timeslot' in this case)\n // - when the called function ('getScheduleByWeek') calls some other external\n // functions ('setEmptySchedule', 'processData' and 'findTheConflict' in our case)\n // - the second case could be bypassed by adding this external functions inside the\n // called function ('getScheduleByWeek')\n // - the first case can be bypassed by extracting the 'deps' into separate variables\n // and supply them ar parameters to the called function\n useEffect(() => {\n // get the schedule data to display (one week at a time);\n const getScheduleByWeek = () => {\n // new/current day of the Conflict\n const newDay = props.day;\n // new/current timeslot of the Conflict\n const newTimeslot = props.timeslot;\n // starting day for the schedule (convert whatever day was passed into the Sunday\n // for that week)\n const newSunday = util.returnSunday(\n newDay.format(util.dateFormatComputer)\n );\n // initially empty array of day/timeslots, later to be populated with show/pods\n let updatedSchedule = [...oldSchedule.current];\n\n // only updating the state, if the week or the timeslot changes\n if (newSunday !== sunday.current || newTimeslot !== timeslot.current) {\n // the Empty Schedule that is going to be filled with Schedules\n // and Interstitials by the 'getScheduleByWeek' method\n updatedSchedule = setEmptySchedule(newSunday, newTimeslot);\n\n // get this week's show data;\n util\n .getScheduleByWeek(newSunday)\n .then(data => {\n updatedSchedule = processData(data, updatedSchedule);\n\n // then this week's interstitial data;\n return util.getInterstitialsByWeek(newSunday);\n })\n .then(data => {\n updatedSchedule = processData(data, updatedSchedule);\n\n // now that the schedule is ready to display, find the conflict\n updatedSchedule = findTheConflict(\n updatedSchedule,\n newDay,\n newTimeslot\n );\n\n // updating the refs, for future comparisons\n sunday.current = newSunday;\n timeslot.current = newTimeslot;\n oldSchedule.current = updatedSchedule;\n\n // updating the 'schedule' in the state, for re-rendering\n setSchedule(updatedSchedule);\n\n // now the final updated schedule can be shown\n setLoaded(true);\n });\n } else {\n // if only the 'day' changes, no need to redo the backend calls\n // only update the 'conflict' timeslot and update the state with the 'schedule'\n updatedSchedule = findTheConflict(updatedSchedule, newDay, newTimeslot);\n oldSchedule.current = updatedSchedule;\n setSchedule(updatedSchedule);\n }\n };\n\n getScheduleByWeek();\n }, [props.day, props.timeslot]);\n\n const setEmptySchedule = (newSunday, newTimeslot) => {\n const emptySchedule = [];\n\n const createRow = (newTimeslot, newSunday) => {\n const days = [];\n\n // create empty day values for each time slot;\n for (let i = 0; i < 7; i = i + 1) {\n days.push({\n date: moment(newSunday)\n .add(i, `days`)\n .format(util.dateFormatComputer),\n content: null,\n selected: false\n });\n }\n\n // create the `table row` for each time slot;\n return {\n days: days,\n timeslot: newTimeslot\n };\n };\n\n // loop through the 24 hours of the day;\n for (let hour = 0; hour <= 23; hour = hour + 1) {\n const hourFormatted = hour < 10 ? `0${hour}` : hour;\n\n // loop through the hour and half hour slot;\n // the 28 and 58 are placeholders for the associated pods (as interstitials);\n [`00`, `28`, `30`, `58`].forEach(time => {\n // create the `table row` for each time slot;\n emptySchedule.push(createRow(`${hourFormatted}:${time}`, newSunday));\n });\n }\n\n // find the timeslot we care about;\n // we only want to show the conflict timeslot and the timeslow before and after it;\n let index = 1;\n\n emptySchedule.forEach((timeslot, i) => {\n if (timeslot.timeslot === newTimeslot) {\n index = i;\n }\n });\n\n // setting the Schedule as an empty array to later be populated with show/pod data;\n // the schedule is trimmed down to the timeslot specified;\n return emptySchedule.splice(index - 1, 3);\n };\n\n const processData = (data, schedule) => {\n data.forEach(showOrInterstitial => {\n const showOrIntAirtime = moment(showOrInterstitial.airtime);\n const showOrIntTimeslot = showOrIntAirtime.format(`HH:mm`);\n const showOrIntDate = showOrIntAirtime.format(util.dateFormatComputer);\n\n // find the timeslot (if it exists);\n schedule.forEach((slot, i) => {\n if (slot.timeslot === showOrIntTimeslot) {\n // loop through the days and find a match (if it exists);\n slot.days.forEach((day, j) => {\n if (day.date === showOrIntDate) {\n // add the show or interstitial to the timeslot;\n schedule[i].days[j].content = showOrInterstitial.title\n ? showOrInterstitial.title\n : showOrInterstitial.pod.name;\n }\n });\n }\n });\n });\n\n return schedule;\n };\n\n const findTheConflict = (schedule, day, timeslot) => {\n schedule.forEach(slot => {\n // set the flag to 'false', on all the non-matching timeslots, on the existing\n // schedule (reusing the schedule, if only the day has changed (but not the\n // week and the timeslot), in order to avoid a non-necessary backend call)\n slot.days.forEach(day => {\n day.selected = false;\n });\n\n if (slot.timeslot === timeslot) {\n const index = Number(moment(day).format(`d`));\n\n // set the flag to 'true', to turn the highlight class on\n slot.days[index].selected = true;\n }\n });\n\n return schedule;\n };\n\n if (loaded === false) {\n return Selected Rule
\n\n\n
\n \n
\n\n \n
\n Rule Name:
\n{rule.name}
\n\n
\n Start Date:
\n{moment(rule.dateStart).format(util.dateFormatHumanLong)}
\n\n
\n Time Slots / Shows:
\n {rule.timeslots && rule.timeslots.length > 0 ? (\n{util.returnCleanTimeSlots(rule.timeslots).join(`, `)}
\n ) : null}\n {rule.shows && rule.shows.length > 0\n ? util.renderShowsNames(rule.shows)\n : null}\n\n {rule.pod ? (\n
\n \n
\n ) : null}\n {rule.campaign ? (\n Source Pod
\n\n \n {rule.pod.name}\n \n
\n\n
\n ) : null}\n Source Campaign
\n\n \n {rule.campaign.name}\n \n
\n\n
\n End Date:
\n{moment(rule.dateEnd).format(util.dateFormatHumanLong)}
\n\n
\n Repeats:
\n{util.returnRepeatValue(rule.repeats)}
\n\n
\n );\n }\n}\n\nConflictFormSchedule.propTypes = {\n day: PropTypes.object,\n timeslot: PropTypes.string\n};\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { browserHistory } from \"react-router\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport ConflictFormRule from \"./conflict-form-rule\";\nimport ConflictFormSchedule from \"./conflict-form-schedule\";\nimport LoadingIndicatorHeader from \"../loading-indicator/loading-indicator-header\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\n\nconst jQuery = window.jQuery;\n\nexport default function ConflictForm(props) {\n const [formData, setFormData] = useState({ loaded: false });\n const [selectedRuleIndex, setSelectedRuleIndex] = useState(0);\n const checkboxRef = useRef(null);\n\n useEffect(() => {\n getConflicts();\n }, [props.location]);\n\n // get the conflict to resolve (one at a time);\n const getConflicts = () => {\n util.getConflicts().then(data => {\n const result = data.results[0];\n const conflicts = result ? result.conflicting_rules : []; // default empty array so we can display `no results`;\n\n // create an array of all rules in the conflict;\n const rules = [];\n\n // why convert this data?\n // to convert the fields into Numbers where needed;\n // to convert param names with underscores to camelCase for consistency;\n conflicts.forEach(conflictingRule => {\n rules.push({\n id: Number(conflictingRule.id),\n name: conflictingRule.name,\n pod: conflictingRule.pod,\n campaign: conflictingRule.campaign,\n dateEnd: conflictingRule.end_date,\n dateStart: conflictingRule.start_date,\n timeslots: conflictingRule.timeslots,\n shows: conflictingRule.shows,\n repeats: Number(conflictingRule.frequency),\n conflictOccurrences: conflictingRule.conflicting_rules_occurrences\n });\n });\n\n // wait a little bit (so the user can track what’s going on);\n setTimeout(() => {\n // put the button back into the ready state;\n // it may be in the loading state if we’re dealing with lots of conflicts;\n jQuery(`.btn-primary`).button(`reset`);\n\n const conflict = result ? result.conflict : null;\n const date = moment.utc(conflict);\n\n // set state data so the user can interact with the form;\n setFormData({\n count: data.count,\n id: conflict,\n dateMoment: date,\n timeslot: date.format(`HH:mm`),\n date: date.format(`ddd MM/DD/YYYY`),\n rules: rules,\n loaded: true,\n selectedRuleIndex: 0\n });\n\n // update page-header conflict count;\n window.updateConflictCount();\n }, util.delayDetail);\n });\n };\n\n // resolve the conflict by creating an exception;\n const onSubmit = () => {\n const id = formData.id;\n const rule = formData.rules[selectedRuleIndex].id;\n const report = {\n selected_rule: rule,\n apply_all: checkboxRef.current.checked\n };\n\n // put the button into a processing state;\n const $button = jQuery(`.btn-primary`).button(`loading`);\n\n // create the exception;\n util\n .saveException(id, report)\n .fail(() => {\n setTimeout(() => {\n // reset the button on fail so it can be clicked again;\n $button.button(`reset`);\n }, util.delayForm);\n })\n .then(() => {\n // now get the new conflict (if any);\n util.getConflicts().then(data => {\n const newURL =\n data && data.count\n ? util.returnConflictFormUrl(data.count)\n : util.returnRuleListUrl();\n\n // wait a little bit (so the user can track what’s going on);\n setTimeout(() => {\n // load the next page (rule list or conflict form);\n browserHistory.push(newURL);\n\n // tell the header to update the conflict count;\n window.updateConflictCount();\n }, util.delayForm);\n });\n });\n };\n\n if (formData.loaded === false) {\n return Current Schedule
\n\n\n \n
\n
\n | \n {util.days.map((day, i) => {\n const date = moment(sunday.current).add(i, `days`);\n\n return (\n | {date.format(util.dateFormatHumanShort)} | \n );\n })}\n
|---|---|
| {row.timeslot} | \n {row.days.map((day, j) => (\n\n {day.content}\n | \n ))}\n
No Conflicts to Resolve
;\n } else {\n const conflictOccurrences =\n formData.rules[selectedRuleIndex].conflictOccurrences;\n\n return (\n \n );\n }\n}\n\nConflictForm.propTypes = {\n params: PropTypes.object\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport default function InviteFormButtons(props) {\n return (\n\n
\n \n
\n
\n );\n\n // display table header sort links;\n function renderSortLink(sortValue, sortDisplay) {\n const className = util.returnSortClass(sortValue, props.sort);\n const newSortValue = util.returnSortValue(sortValue, props.sort);\n const queryStringObject = props.queryString\n ? jQuery.deparam(props.queryString.replace(`?`, ``))\n : {};\n\n // add the new sort value to the querystring object;\n queryStringObject.sort = newSortValue;\n\n return (\n | # | \nRole | \n{renderSortLink(`has_accepted`, `Accepted`)} | \nRemove Invite | \n|
|---|---|---|---|---|
| \n 0\n | \n{util.zeroInvitesMessage} | \n|||
| \n | \n ||||
| \n \n {util.returnLineNumber(\n props.currentPage,\n util.inviteResultsPerPage,\n index\n )}\n \n | \n{invite.email || N/A} | \n{invite.group ? invite.group.name : N/A} | \n\n {invite.has_accepted ? (\n `Yes`\n ) : (\n \n No -{\" \"}\n \n Resend\n \n \n )}\n | \n \n | \n
Are you sure you want to delete the invitation for ${\n invite.group ? invite.group.name : ``\n }: ${invite.email}?
`;\n const buttonTextDefault = `Delete the Invite`;\n const buttonTextLoading = `Deleting the Invite`;\n const iconClass = `fa-trash-o`;\n const $modal = util.renderModal(\n title,\n body,\n buttonTextDefault,\n buttonTextLoading,\n iconClass\n );\n const $confirmButton = $modal.find(`.btn-danger`);\n\n // remove the invite on confirmation of the modal;\n $confirmButton.one(`click`, () => {\n $confirmButton.button(`loading`);\n\n util\n .deleteInviteFromStation(invite.id)\n .fail(() => {\n setTimeout(() => {\n // reset the button on fail so it can be clicked again;\n $confirmButton.button(`reset`);\n }, util.delayForm);\n })\n .then(() => {\n // hiding the Modal\n $modal.modal(`hide`);\n // going to the first page of the Invites,\n // and get the updated Invites list from the backend\n browserHistory.push(`/invites/1/`);\n });\n });\n\n // attach the modal to the DOM, and then show it;\n jQuery(`body`).append($modal);\n $modal.modal(`show`);\n };\n\n return (\n\n
\n\n deleteInvite(invite)}\n invites={invites}\n />\n\n
\n );\n}\n\nInviteList.propTypes = {\n params: PropTypes.object\n};\n","import React from \"react\";\nimport videojs from \"video.js\";\nimport \"video.js/dist/video-js.css\";\n\nexport default function VideoJS(props) {\n const videoRef = React.useRef(null);\n const playerRef = React.useRef(null);\n const { options, onReady } = props;\n\n React.useEffect(() => {\n // Make sure Video.js player is only initialized once\n if (!playerRef.current) {\n const videoElement = videoRef.current;\n\n if (!videoElement) return;\n\n const player = (playerRef.current = videojs(videoElement, options, () => {\n // videojs.log(\"player is ready\");\n onReady && onReady(player);\n }));\n\n // You could update an existing player in the `else` block here\n // on prop change, for example:\n } else {\n // const player = playerRef.current;\n // player.autoplay(options.autoplay);\n // player.src(options.sources);\n }\n }, [options, videoRef, onReady]);\n\n // Dispose the Video.js player when the functional component unmounts\n React.useEffect(() => {\n const player = playerRef.current;\n\n return () => {\n if (player) {\n player.dispose();\n playerRef.current = null;\n }\n };\n }, [playerRef]);\n\n return (\n \n
\n\n \n
\n Invites
\n\n
\n \n \n \n Invite Users\n \n
\n\n\n
\n \n
\n );\n}\n","import React, { useEffect, useState } from \"react\";\n// import videojs from \"video.js\";\nimport VideoJS from \"./videoJS\";\nimport LoadingIndicatorHeader from \"../loading-indicator/loading-indicator-header\";\nimport util from \"../util/util\";\n\nexport default function Livestream() {\n // player Ref\n const playerRef = React.useRef(null);\n // indicator for when the backend has responded with the source url, so we can load the player\n const [loaded, setLoaded] = useState(false);\n // player Options\n const [videoJsOptions, setVideoJsOptions] = useState({\n autoplay: false,\n controls: true,\n responsive: true,\n fluid: true,\n liveui: true,\n controlBar: {\n pictureInPictureToggle: false\n },\n sources: [\n {\n src: \"\",\n type: \"application/x-mpegURL\"\n }\n ]\n });\n\n useEffect(() => {\n const getLivestreamData = () => {\n // getting the 'src' (and in future possibly other data ?) from the backend\n util.getLivestreamData().then(data => {\n setVideoJsOptions(videoJsOptions => ({\n ...videoJsOptions,\n sources: [\n {\n ...videoJsOptions.sources[0],\n src: data.source_url\n }\n ]\n }));\n setLoaded(true);\n });\n };\n\n getLivestreamData();\n }, []);\n\n const handlePlayerReady = player => {\n playerRef.current = player;\n\n // You can handle player events here, for example:\n // player.on(\"waiting\", () => {\n // videojs.log(\"player is waiting\");\n // });\n //\n // player.on(\"dispose\", () => {\n // videojs.log(\"player will dispose\");\n // });\n };\n\n if (loaded === false) {\n return \n
\n );\n }\n}\n","import moment from \"moment\";\nimport React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport Tooltip from \"../tooltip/tooltip\";\nimport util from \"../util/util\";\n\nimport { Link } from \"react-router\";\n\nexport default function PodDetailPod(props) {\n const [pod, setPod] = useState({});\n const [podStatus, setPodStatus] = useState(0);\n const [displayErrors, setDisplayErrors] = useState(\"\");\n const [url, setUrl] = useState(\"\");\n const [filename, setFilename] = useState(\"\");\n const [podStatusLabel, setPodStatusLabel] = useState(\"\");\n const [tooltipMessage, setTooltipMessage] = useState(\"\");\n\n useEffect(() => {\n const pod = props.pod;\n const url = pod.source_file || pod.source_url || \"\";\n let filename = url ? url.split(`/`).slice(-1) : \"\";\n if (filename && filename[0].length > 44) {\n filename = filename[0].substring(0, 44);\n }\n const podStatusLabel = util.returnPodStatus(props.podStatus) || \"\";\n\n setPod(pod);\n setPodStatus(props.podStatus);\n setDisplayErrors(util.formatVideoError(props.podStatusMessage));\n setUrl(url);\n setFilename(filename);\n setPodStatusLabel(podStatusLabel);\n setTooltipMessage(getTooltipMessage(podStatusLabel));\n }, [props]);\n\n const getTooltipMessage = podStatusLabel => {\n let tooltipMessage = null;\n\n if (podStatusLabel === \"Processing\") {\n tooltipMessage =\n \"Pod must complete ingestion\n
\n\n \n
\n \n Your Station's KIDS 24/7 Localized Livestream\n
\n\n
\n\n \n \n
\n \n Use this embedded player for pre-launch testing and post-launch\n monitoring of your livestream and localized pods.\n
\nbefore it can be scheduled.\";\n } else if (podStatusLabel === \"Ready\") {\n tooltipMessage = \"Successfully ingested.
This pod can be scheduled.\";\n } else if (podStatusLabel === \"Failed\") {\n tooltipMessage =\n \"Failed ingestion due to the
source not meeting requirements.\";\n }\n\n return tooltipMessage;\n };\n\n return (\n
\n
\n
\n
\n );\n}\n\nPodDetailPod.propTypes = {\n pod: PropTypes.object,\n podStatus: PropTypes.number,\n podStatusMessage: PropTypes.string,\n deletePod: PropTypes.func\n};\n","import React, { useEffect, useState } from 'react';\nimport {browserHistory, Link} from 'react-router';\nimport PropTypes from \"prop-types\";\nimport moment from 'moment';\nimport util from '../util/util';\nimport Tooltip from \"../tooltip/tooltip\";\n\nexport default function PodDetailRules (props) {\n const tooltipMessage = \"Only successfully ingested pods\n
\n \n
\n {pod.name}
\n\n {podStatus !== 4 ? ( // 4 == Deleted\n
\n \n
\n
\n
\n \n \n
\n\n \n
\n Pod Name
\n{pod.name}
\n\nFile Name
\n\n \n {filename}\n \n
\n\n\n
\n\n \n \n Status \n
\n \n {podStatusLabel}\n \n
\n \n Status \n \n
\n \n
\n Uploaded
\n{moment(pod.created).format(util.dateFormatHumanLong)}
\n\n
\n {displayErrors.length ? (\n To Expire
\n\n {pod.expiration_date === null\n ? `Not Set`\n : moment(pod.expiration_date).format(\n util.dateFormatHumanLong\n )}\n
\n\n
\n ) : null}\n \n
\n - \n {displayErrors.map((errorMessage, i) => (\n
- {errorMessage} \n ))}\n
Description
\n{pod.description || None}
\n\n
\n
\n \n \n
\n \n \n
\n
\n | Element ID | \nProtrack ID | \nClient Name | \nSpot Name | \nTape | \nOrder | \nDuration | \n
|---|---|---|---|---|---|---|
| \n No element metadata.\n | \n||||||
| \n {element.element_id}\n | \n{element.protrack_id} | \n{element.client_name} | \n{element.spot_name} | \n{element.tape} | \n{element.order} | \n{element.duration} | \n
\n
\n \n
\n Last Changed By
\n\n Not available in the API (yet).\n
\n\n
\n Change Log
\n\n \n View Change Log\n \n
\ncan be added to a rule.\";\n\n const [podId, setPodId] = useState(0);\n const [podStatus, setPodStatus] = useState(1);\n const [rules, setRules] = useState([]);\n\n useEffect( ()=>{\n setPodId(props.podId);\n setPodStatus(props.podStatus);\n setRules(props.rules.slice(0, 5))\n }, [props.podId, props.podStatus, props.rules]);\n\n // set the rules to display equal to the full list of rules;\n const showAll = () => {\n setRules(props.rules)\n }\n\n return (\n
\n
\n\n
\n );\n}\n\nPodDetailRules.propTypes = {\n podId: PropTypes.number,\n podStatus: PropTypes.number,\n rules: PropTypes.array\n};\n","import React, { useEffect, useState } from \"react\";\nimport { browserHistory, Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\nimport Tooltip from \"../tooltip/tooltip\";\n\nexport default function PodDetailCampaigns(props) {\n const tooltipMessage =\n \"Only successfully ingested pods\n
\n\n \n
\n Rules
\n\n
\n \n
\n\n
\n \n
\n
\n {\n rules && props.rules && rules.length !== props.rules.length ? (\n | # | \nRule | \nStart Date | \nEnd Date | \nTime Slots / Shows | \nRepeats | \n
|---|---|---|---|---|---|
| 0 | \nNone | \n||||
| { index + 1 } | \n{ rule.name } | \n{ moment(rule.start_date).format(util.dateFormatHumanLong) } | \n{ moment(rule.end_date).format(util.dateFormatHumanLong) } | \n\n {rule.timeslots && rule.timeslots.length > 0 ? (\n | \n { util.returnRepeatValue(rule.frequency) } | \n
\n
can be added to a campaign.\";\n\n const [podId, setPodId] = useState(0);\n const [podStatus, setPodStatus] = useState(1);\n const [campaigns, setCampaigns] = useState([]);\n\n useEffect(() => {\n setPodId(props.podId);\n setPodStatus(props.podStatus);\n setCampaigns(props.campaigns.slice(0, 5));\n }, [props.podId, props.podStatus, props.campaigns]);\n\n const showAll = () => {\n setCampaigns(props.campaigns);\n };\n\n return (\n
\n
\n\n
\n );\n}\n\nPodDetailCampaigns.propTypes = {\n campaigns: PropTypes.array,\n podId: PropTypes.number,\n podStatus: PropTypes.number\n};\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { browserHistory } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport LoadingIndicatorHeader from \"../loading-indicator/loading-indicator-header\";\nimport PodDetailPod from \"./pod-detail-pod\";\nimport PodDetailRules from \"./pod-detail-rules\";\nimport PodDetailCampaigns from \"./pod-detail-campaigns\";\nimport util from \"../util/util\";\n\nconst jQuery = window.jQuery;\n\nexport default function PodDetail(props) {\n const [pod, setPod] = useState({});\n const [id, setId] = useState(0);\n const [status, setStatus] = useState(0);\n const [statusMessage, setStatusMessage] = useState(\"\");\n const [rules, setRules] = useState([]);\n const [campaigns, setCampaigns] = useState([]);\n const [loaded, setLoaded] = useState(false);\n const timeout = useRef(0);\n // using this time to stop making extra calls to the backend after a Pod Save\n const saveTime = useRef(new Date());\n\n useEffect(() => {\n const podId = Number(props.params.id);\n // because 'status' doesn't get updated until everything from 'useEffect' is\n // finished, using a different variable 'podStatus' to have the value returned from\n // 'getPod' to be used in 'getPodStatus'\n let podStatus = 0;\n\n // get the updated pod status;\n const getPodStatus = () => {\n // clear any existing timeout;\n clearTimeout(timeout.current);\n\n util.getPodStatus(podId).then(data => {\n const awsStatus = data.aws_status;\n\n // changing the state if there is any Pod status change\n if (podStatus !== awsStatus) {\n setStatus(awsStatus);\n setStatusMessage(data.aws_status_message);\n }\n\n // no need to send the Notification in the below cases, so marking it as 'seen'\n // as the user is already on the Pod page and sees the Pod status:\n // 1. the Pod is not re-transcoded in AWS - this can happen in 2 cases:\n // a. the Source File/Url/Spots haven't changed\n // b. the Source has changed but has Failed directly,\n // due to a File error (incorrect format, length, video type,...)\n // *extra optimization - if the Status is Ready or Failed only poll the backend\n // for a few initial minutes after the page loads, as the Status cannot change\n // 2. Source changed and Pod is re-transcoded in AWS, and the status changes from\n // 'Processing' -> 'Ready' of 'Failed', while the user is still on the Pod page\n const withinTwoMins = (new Date() - saveTime) / 1000 / 60 < 2;\n const readyOrFailed = podStatus === 2 || podStatus === 3;\n const statusChanged =\n podStatus === 1 && (awsStatus === 2 || awsStatus === 3);\n\n if ((withinTwoMins && readyOrFailed) || statusChanged) {\n util.getPodsNotifications(podId).then(data => {\n data.results.forEach(result => {\n // toggle the 'Notification seen' in the DB, if it isn't\n if (result.aws_transcode_notification_seen === false) {\n util.savePodNotification(podId, true, result.id);\n }\n });\n });\n }\n\n // updating 'podStatus' to the new value\n if (podStatus !== awsStatus) {\n podStatus = awsStatus;\n }\n });\n\n // check again in 30 seconds;\n const delay = 30;\n\n // start a new timeout;\n timeout.current = setTimeout(() => {\n getPodStatus(podId);\n }, delay * 1000);\n };\n\n // get the pod data to display;\n const getPod = () => {\n util.getPod(podId).then(data => {\n podStatus = data.aws_status;\n\n setTimeout(() => {\n setPod(data);\n setId(podId);\n setStatus(podStatus);\n setStatusMessage(data.aws_status_message);\n setRules(data.rules);\n setCampaigns(data.campaigns);\n setLoaded(true);\n\n // updating the Pod Status (by polling the DB Status)\n getPodStatus();\n }, util.delayDetail);\n });\n };\n\n getPod();\n }, [props.params.id]);\n\n useEffect(() => {\n return () => {\n // clear the timeout set by getPodStatus;\n clearTimeout(timeout.current);\n };\n }, []);\n\n // call the delete pod endpoint\n const deletePod = pod => {\n const title = `Delete Pod`;\n const body = `\n
\n\n \n
\n Campaigns
\n\n
\n \n
\n\n
\n \n
\n
\n {campaigns &&\n props.campaigns &&\n campaigns.length !== props.campaigns.length ? (\n | # | \nCampaign | \nTotal Pods | \nDate Created | \n
|---|---|---|---|
| \n 0\n | \n\n None\n | \n||
| \n {index + 1}\n | \n\n \n {campaign.name}\n \n | \n{campaign.pod_count} | \n\n {moment(campaign.created).format(\n util.dateFormatHumanLong\n )}\n | \n
\n
Are you sure you want to delete the pod: ${pod.name}?
`;\n const buttonTextDefault = `Delete Pod`;\n const buttonTextLoading = `Deleting Pod`;\n const iconClass = `fa-trash-o`;\n const $modal = util.renderModal(\n title,\n body,\n buttonTextDefault,\n buttonTextLoading,\n iconClass\n );\n const $confirmButton = $modal.find(`.btn-danger`);\n\n // attach temporary event to remove the pod on confirmation of the modal;\n // remove any previous events first;\n // dont namespace the event because we want to remove everything;\n $confirmButton.one(`click`, () => {\n $confirmButton.button(`loading`);\n\n util\n .deletePod(pod.id)\n .fail(() => {\n setTimeout(() => {\n // reset the button on fail so it can be clicked again;\n $confirmButton.button(`reset`);\n }, util.delayForm);\n })\n .then(() => {\n // once done, go back to the list of pods\n $modal.modal(`hide`);\n browserHistory.push(`/pods/`);\n });\n });\n\n // attach the modal to the DOM, and then show it;\n jQuery(`body`).append($modal);\n $modal.modal(`show`);\n };\n\n if (loaded === false) {\n return\n deletePod(pod)}\n />\n\n
\n\n
\n\n
\n );\n }\n}\n\nPodDetail.propTypes = {\n params: PropTypes.object\n};\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport util from \"../util/util\";\n\nexport default function PodListSearchForm(props) {\n const usageStatuses = [\n {\n label: `All`,\n value: ``\n },\n {\n label: `Unused`,\n value: `true`\n },\n {\n label: `Used`,\n value: `false`\n }\n ];\n\n const [search, setSearch] = useState(\"\");\n const [status, setStatus] = useState(util.podStatuses[0].value);\n const [usage, setUsage] = useState(usageStatuses[0].value);\n const [sort, setSort] = useState(`-created`);\n\n useEffect(() => {\n setSearch(props.search);\n setStatus(Number(props.status));\n setUsage(props.unused);\n setSort(props.sort);\n }, [props]);\n\n // if the key pressed is `enter` then submit the search form;\n const onKeyPress = e => {\n if (e.key === `Enter`) {\n onSearchSubmit();\n }\n };\n\n // reset search form values to their default state;\n const onSearchReset = () => {\n setSearch(\"\");\n setStatus(util.podStatuses[0].value);\n setUsage(usageStatuses[0].value);\n setSort(`-created`);\n };\n\n // go to a new URL with the selected form values;\n const onSearchSubmit = () => {\n let url = `${util.returnPodListUrl()}?sort=${sort}`;\n\n if (search.length) {\n url = `${url}&search=${search}`;\n }\n\n if (status !== util.podStatuses[0].value) {\n url = `${url}&status=${status}`;\n }\n\n if (usage !== usageStatuses[0].value) {\n url = `${url}&unused=${usage}`;\n }\n\n const params = {\n url: url,\n search: search,\n status: status,\n usage: usage,\n sort: sort\n };\n\n props.searchSubmit(params);\n };\n\n return (\n \n\n
\n\n
\n
\n );\n}\n\nPodListSearchForm.propTypes = {\n search: PropTypes.string,\n sort: PropTypes.string, // not editable from this component, but needs to be passed in the form;\n status: PropTypes.number,\n unused: PropTypes.string,\n searchSubmit: PropTypes.func\n};\n","import React from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\nimport LoadingIndicatorText from \"../loading-indicator/loading-indicator-text\";\n\nconst jQuery = window.jQuery;\n\nexport default function PodListTable(props) {\n // three options for display (loading, no results, results);\n const renderPodRows = (pods = false) => {\n if (pods.length === 0) {\n return (\n \n \n setSearch(e.target.value.trim())}\n onKeyPress={e => onKeyPress(e)}\n />\n
\n\n \n \n setStatus(Number(e.target.value))}\n >\n {util.podStatuses.map(option => (\n \n ))}\n \n
\n\n \n \n setUsage(e.target.value)}\n >\n {usageStatuses.map(option => (\n \n ))}\n \n
\n\n \n
\n \n \n\n \n
\n \n \n {campaign.name}\n \n
\n ));\n\n // no campaigns to display;\n } else {\n return None;\n }\n };\n\n // display table header sort links;\n function renderSortLink(sortValue, sortDisplay) {\n const className = util.returnSortClass(sortValue, props.sort);\n const newSortValue = util.returnSortValue(sortValue, props.sort);\n const queryStringObject = props.queryString\n ? jQuery.deparam(props.queryString.replace(`?`, ``))\n : {};\n\n // add the new sort value to the querystring object;\n queryStringObject.sort = newSortValue;\n\n return (\n \n \n
\n
\n );\n}\n\nPodListTable.propTypes = {\n currentPage: PropTypes.number, // used to calc the # in the TABLE;\n pods: PropTypes.oneOfType([\n // pod data to display;\n PropTypes.array,\n PropTypes.bool\n ]),\n queryString: PropTypes.string, // query string to add to sort links;\n sort: PropTypes.string // currently sorting pods by;\n};\n","import React, { useEffect, useState } from \"react\";\nimport { Link } from \"react-router\";\nimport { browserHistory } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport _ from \"lodash\";\nimport util from \"../util/util\";\nimport Pagination from \"../pagination/pagination\";\nimport PodListSearchForm from \"./pod-list-search-form\";\nimport PodListTable from \"./pod-list-table\";\n\nexport default function PodList(props) {\n // page of pod results;\n const [page, setPage] = useState(1);\n const [pageCount, setPageCount] = useState(0);\n // pods to display (will be populated by an Ajax call);\n const [pods, setPods] = useState([]);\n // search string;\n const [search, setSearch] = useState(``);\n // list sort value;\n const [sort, setSort] = useState(`-created`);\n // search status;\n const [status, setStatus] = useState(null);\n // list sort value;\n const [usage, setUsage] = useState(``);\n // pass to sort and pagination links to maintain search state;\n const [queryString, setQueryString] = useState(``);\n\n useEffect(() => {\n const pageNumber = Number(_.get(props, `params.page`, 1));\n const searchString = _.get(props, `location.query.search`, ``);\n const sortOrder = _.get(props, `location.query.sort`, `-created`);\n const awsStatus = Number(_.get(props, `location.query.status`, 0)) || null;\n const usageFilter = _.get(props, `location.query.unused`, ``);\n\n setPage(pageNumber);\n setSearch(searchString);\n setSort(sortOrder);\n setStatus(awsStatus);\n setUsage(usageFilter);\n setQueryString(_.get(props, `location.search`, null));\n\n // get the pod data to display (one page at a time);\n const getPods = () => {\n util\n .getPods({\n page: pageNumber,\n search: searchString,\n sort: sortOrder,\n aws_status: awsStatus,\n unused: usageFilter\n })\n .then(data => {\n setTimeout(() => {\n setPods(data.results.length ? data.results : false);\n setPageCount(Math.ceil(data.count / util.podResultsPerPage));\n }, util.delayList);\n });\n };\n\n getPods();\n }, [props]);\n\n const searchSubmit = params => {\n setSearch(params.search);\n setStatus(params.status);\n setUsage(params.usage);\n setSort(params.sort);\n\n browserHistory.push(params.url);\n };\n\n return (\n | # | \n{renderSortLink(`name`, `Pod`)} | \n{renderSortLink(`aws_status`, `Status`)} | \nCampaign | \n{renderSortLink(`-created`, `Date Created`)} | \n{renderSortLink(`-expiration_date`, `Expiration Date`)} | \n
|---|
\n searchSubmit(params)}\n />\n\n
\n );\n}\n\nPodList.propTypes = {\n location: PropTypes.object,\n params: PropTypes.object\n};\n","import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport Tooltip from \"../tooltip/tooltip\";\nimport util from \"../util/util\";\n\nimport { Link } from \"react-router\";\n\nexport default class SpotDetailSpot extends Component {\n constructor(props) {\n super(props);\n\n this.spotId = props.spot.id;\n this.url = props.spot.sourceFile || props.spot.sourceUrl || null;\n this.filename = this.url ? this.url.split(`/`).slice(-1) : null;\n if (this.filename && this.filename[0].length > 44) {\n this.filename = this.filename[0].substring(0, 44);\n }\n\n const spotStatusLabel = util.returnSpotStatus(props.spot.status);\n\n this.state = {\n spotStatus: props.spot.status,\n spotStatusLabel: spotStatusLabel || null,\n tooltipMessage: this.getTooltipMessage(spotStatusLabel),\n displayErrors: util.formatVideoError(props.spot.statusMessage)\n };\n }\n\n render() {\n return (\n \n
\n\n \n
\n Pods
\n\n
\n \n \n \n Create New Pod\n \n
\n\n
\n
\n
\n );\n }\n\n getTooltipMessage(spotStatusLabel) {\n let tooltipMessage = null;\n\n if (spotStatusLabel === \"Processing\") {\n tooltipMessage =\n \"Spot must complete ingestion\n
\n \n
\n {this.props.spot.name}
\n\n {this.state.spotStatus !== 4 ? ( // 4 == Deleted\n
\n \n
\n
\n
\n \n \n
\n\n \n
\n Spot Name
\n{this.props.spot.name}
\n\nFile Name
\n\n
\n
\n\n \n \n Status \n
\n \n {this.state.spotStatusLabel}\n \n
\n \n Status \n \n
\n \n
\n {this.state.displayErrors.length ? (\n Uploaded
\n\n {moment(this.props.spot.created).format(\n util.dateFormatHumanLong\n )}\n
\n\n
\n ) : null}\n \n
\n - \n {this.state.displayErrors.map((errorMessage, i) => (\n
- {errorMessage} \n ))}\n
Description
\n{this.props.spot.description || None}
\n\n
\n
\n \n \n
\n \n \n
\n
\n | Element ID | \nProtrack ID | \nClient Name | \nSpot Name | \nTape | \nDuration | \n
|---|---|---|---|---|---|
| \n {this.props.spot.elementId}\n | \n{this.props.spot.protrackId} | \n{this.props.spot.clientName} | \n{this.props.spot.name} | \n{this.props.spot.tape} | \n{this.props.spot.duration} | \n
\n
\n \n
\n Last Changed By
\n\n Not available in the API (yet).\n
\n\n
\n Change Log
\n\n
before it can be used.\";\n } else if (spotStatusLabel === \"Ready\") {\n tooltipMessage = \"Successfully ingested.
This spot can be used.\";\n } else if (spotStatusLabel === \"Failed\") {\n tooltipMessage =\n \"Failed ingestion due to the
source not meeting requirements.\";\n }\n\n return tooltipMessage;\n }\n}\n\nSpotDetailSpot.propTypes = {\n spot: PropTypes.object,\n deletePod: PropTypes.func\n};\n","import React, { Component } from \"react\";\nimport { browserHistory, Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\nimport Tooltip from \"../tooltip/tooltip\";\n\nexport default class SpotDetailPods extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n pods: props.pods ? props.pods.slice(0, 5) : [] // pods to display;\n };\n }\n\n // set the pods to display equal to the full list of rules;\n showAll() {\n this.setState({\n pods: this.props.pods\n });\n }\n\n render() {\n const spotNotReady = this.props.spotStatus !== 2;\n const tooltipMessage =\n \"Only successfully ingested spots
can be added to a pod.\";\n\n return (\n
\n
\n\n
\n );\n }\n}\n\nSpotDetailPods.propTypes = {\n spotId: PropTypes.number,\n spotStatus: PropTypes.number,\n pods: PropTypes.array\n};\n","import React, { Component } from \"react\";\nimport { browserHistory } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport LoadingIndicatorHeader from \"../loading-indicator/loading-indicator-header\";\nimport SpotDetailSpot from \"./spot-detail-spot\";\nimport SpotDetailPod from \"./spot-detail-pod\";\nimport util from \"../util/util\";\n\nconst jQuery = window.jQuery;\n\nexport default class SpotDetail extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n id: Number(this.props.params.id), // id of the spot displayed\n loaded: false // ready to display\n };\n }\n\n componentDidMount() {\n this.mounted = true;\n this.getSpot();\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n getSpot() {\n util.getSpot(this.state.id).then(data => {\n setTimeout(() => {\n this.mounted &&\n this.setState({\n id: data.id,\n description: data.description,\n loaded: true,\n name: data.name,\n sourceFile: data.source_file,\n sourceType: Number(data.source),\n sourceUrl: data.source_url,\n status: data.aws_status,\n statusMessage: data.aws_status_message,\n created: data.created,\n updated: data.updated,\n elementId: data.element_id,\n clientName: data.client_name,\n protrackId: data.protrack_id,\n tape: data.tape,\n duration: data.duration ? (data.duration / 1000).toFixed(2) : \"\",\n pods: data.pod_relations\n .filter(pr => pr.pod && pr.pod.id)\n .map((e, i) => {\n return e.pod;\n })\n });\n }, util.delayDetail);\n });\n }\n\n deleteSpot(spot) {\n const title = `Delete Spot`;\n let body = `\n
\n\n \n
\n Pods
\n\n
\n \n
\n\n
\n \n
\n
\n {this.props.pods &&\n this.state.pods.length !== this.props.pods.length ? (\n | # | \nPod | \nStatus | \nCampaigns | \nDate Created | \nExpiration Date | \n
|---|---|---|---|---|---|
| \n 0\n | \n\n None\n | \n||||
| \n {index + 1}\n | \n\n \n {pod.name}\n \n | \n{util.returnPodStatus(pod.aws_status)} | \n\n {pod.campaigns.length === 0 ? (\n None\n ) : (\n pod.campaigns.map((campaign, i) => {\n return (\n \n \n );\n })\n )}\n | \n \n {moment(pod.created).format(util.dateFormatHumanLong)}\n | \n\n {moment(pod.expirationDate).format(\n util.dateFormatHumanLong\n )}\n | \n
\n
Are you sure you want to delete the pod: ${spot.name}?
`;\n body += `Existing Pods that use this spot will not affected.
`;\n const buttonTextDefault = `Delete Spot`;\n const buttonTextLoading = `Deleting Spot`;\n const iconClass = `fa-trash-o`;\n const $modal = util.renderModal(\n title,\n body,\n buttonTextDefault,\n buttonTextLoading,\n iconClass\n );\n const $confirmButton = $modal.find(`.btn-danger`);\n\n // attach temporary event to remove the spot on confirmation of the modal;\n // remove any previous events first;\n // dont namespace the event because we want to remove everything;\n $confirmButton.one(`click`, () => {\n $confirmButton.button(`loading`);\n util\n .deleteSpot(spot.id)\n .fail(() => {\n setTimeout(() => {\n // reset the button on fail so it can be clicked again;\n $confirmButton.button(`reset`);\n }, util.delayForm);\n })\n .then(() => {\n // once done, go back to the list of pods\n $modal.modal(`hide`);\n browserHistory.push(`/spots/`);\n });\n });\n\n // attach the modal to the DOM, and then show it;\n jQuery(`body`).append($modal);\n $modal.modal(`show`);\n }\n\n render() {\n if (this.state.loaded === false) {\n return\n this.deleteSpot(spot)}\n />\n\n
\n\n
\n );\n }\n }\n}\n\nSpotDetail.propTypes = {\n params: PropTypes.object\n};\n","import React, { Component } from \"react\";\nimport { browserHistory } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport util from \"../util/util\";\n\nconst unused = [\n {\n label: `All`,\n value: ``\n },\n {\n label: `Unused`,\n value: `true`\n },\n {\n label: `Used`,\n value: `false`\n }\n];\n\n// use the same logic to set state (on load, on prop change);\nconst returnSearchState = (props = {}) => ({\n search: props.search || ``, // search string value;\n status: props.status ? Number(props.status) : util.spotStatuses[0].value, // status value;\n unused: props.unused || unused[0].value\n});\n\nexport default class SpotListSearchForm extends Component {\n constructor(props) {\n super(props);\n\n this.state = returnSearchState(props);\n }\n\n componentWillReceiveProps(nextProps) {\n this.setState(returnSearchState(nextProps));\n }\n\n render() {\n return (\n \n\n
\n
\n );\n }\n\n // if the key pressed is `enter` then submit the search form;\n onKeyPress(e) {\n if (e.key === `Enter`) {\n this.onSearchSubmit();\n }\n }\n\n // reset search form values to their default state;\n onSearchReset() {\n this.setState(returnSearchState());\n }\n\n // go to a new URL with the selected form values;\n onSearchSubmit() {\n let url = `${util.returnSpotListUrl()}?sort=${this.props.sort}`;\n\n if (this.state.search.length) {\n url = `${url}&search=${this.state.search}`;\n }\n\n if (this.state.status !== util.spotStatuses[0].value) {\n url = `${url}&status=${this.state.status}`;\n }\n\n if (this.state.unused !== unused[0].value) {\n url = `${url}&unused=${this.state.unused}`;\n }\n\n browserHistory.push(url);\n }\n}\n\nSpotListSearchForm.propTypes = {\n search: PropTypes.string,\n sort: PropTypes.string, // not editable from this component, but needs to be passed in the form;\n status: PropTypes.number,\n unused: PropTypes.string\n};\n","import React from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\nimport LoadingIndicatorText from \"../loading-indicator/loading-indicator-text\";\n\nconst jQuery = window.jQuery;\n\nexport default function SpotListTable(props) {\n return (\n \n \n this.setState({ search: e.target.value.trim() })}\n onKeyPress={e => this.onKeyPress(e)}\n />\n
\n\n \n \n this.setState({ status: Number(e.target.value) })}\n >\n {util.spotStatuses.map(option => (\n \n ))}\n \n
\n\n \n \n this.setState({ unused: e.target.value })}\n >\n {unused.map(option => (\n \n ))}\n \n
\n\n \n
\n \n this.onSearchSubmit()}\n >\n \n Apply Filters\n \n\n this.onSearchReset()}\n >\n Reset Filters\n \n
\n \n \n
\n
\n );\n\n // three options for display (loading, no results, results);\n function renderSpotRows(spots = false) {\n if (spots.length === 0) {\n return (\n | # | \n{renderSortLink(`name`, `Spot`)} | \n{renderSortLink(`aws_status`, `Status`)} | \nPods | \n{renderSortLink(`-created`, `Date Created`)} | \nDuration | \n
|---|
\n {pod.name}\n
\n ));\n // adding an ellipsis at the end, if there were more than 5 pods\n if (spotPodsLength > 5) {\n spotPodsArray.push(\n \n ...\n
\n );\n }\n return spotPodsArray;\n\n // no pods to display;\n } else {\n return None;\n }\n }\n\n // display table header sort links;\n function renderSortLink(sortValue, sortDisplay) {\n const className = util.returnSortClass(sortValue, props.sort);\n const newSortValue = util.returnSortValue(sortValue, props.sort);\n const queryStringObject = props.queryString\n ? jQuery.deparam(props.queryString.replace(`?`, ``))\n : {};\n\n // add the new sort value to the querystring object;\n queryStringObject.sort = newSortValue;\n\n return (\n \n
\n );\n }\n\n // get the spot data to display (one page at a time);\n getSpots() {\n util\n .getSpots({\n page: this.state.page,\n search: this.state.search,\n sort: this.state.sort,\n aws_status: this.state.status,\n unused: this.state.unused\n })\n .then(data => {\n setTimeout(() => {\n if (!this.mounted) {\n return;\n }\n let spots = [];\n if (data.results.length) {\n spots = data.results;\n for (let i = 0; i < spots.length; i++) {\n spots[i].pods = spots[i].pod_relations\n .filter(pr => pr.pod && pr.pod.id)\n .map((e, i) => {\n return e.pod;\n });\n }\n } else {\n spots = false;\n }\n\n this.setState({\n pageCount: Math.ceil(data.count / util.spotResultsPerPage),\n spots: spots\n });\n }, util.delayList);\n });\n }\n}\n\nSpotList.propTypes = {\n location: PropTypes.object,\n params: PropTypes.object\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport default function PodFormButtons(props) {\n return (\n \n
\n\n \n
\n Spots
\n\n
\n \n \n \n Create New Spot\n \n
\n\n
\n
\n
\n );\n}\n\nReportsSearchForm.propTypes = {\n search: PropTypes.string,\n field: PropTypes.string,\n searchSubmit: PropTypes.func\n};\n","import React from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\nimport LoadingIndicatorText from \"../loading-indicator/loading-indicator-text\";\n\nexport default function ReportsTable(props) {\n return (\n \n
\n\n \n \n setField(e.target.value)}\n >\n \n {util.podElementFields.map(option => (\n \n ))}\n \n
\n\n \n setSearch(e.target.value)}\n onKeyPress={e => onKeyPress(e)}\n />\n
\n\n \n \n
\n\n \n
\n \n \n
\n\n \n
\n \n
\n \n 1 && search.length < 1}\n onClick={() => onSearchSubmit()}\n >\n \n Generate Report\n \n
\n \n
\n\n \n
\n\n \n
\n 1 && search.length < 1}\n onClick={() => setShowPdfForm(!showPdfForm)}\n >\n \n Create PDF Invoice\n \n
\n \n
\n\n
\n\n
\n\n
\n Invoice Details
\n\n
\n\n \n
\n \n \n setInvoiceNumber(e.target.value)}\n maxLength=\"50\"\n placeholder=\"\"\n />\n
\n \n
\n \n \n
\n \n
\n \n
\n \n \n setInvoiceDescription(e.target.value)}\n maxLength=\"300\"\n placeholder=\"Pods, Campaigns\"\n />\n
\n \n\n
Sponsor Details
\n\n
\n \n \n
\n \n \n setCustomerName(e.target.value)}\n maxLength=\"100\"\n placeholder=\"\"\n />\n
\n \n
\n \n \n setCompanyName(e.target.value)}\n maxLength=\"100\"\n placeholder=\"\"\n />\n
\n \n
\n\n \n
\n \n \n setCompanyAddress(e.target.value)}\n maxLength=\"150\"\n placeholder=\"Street\"\n />\n
\n \n
\n \n \n setCompanyCity(e.target.value)}\n maxLength=\"150\"\n placeholder=\"City, State, Zipcode\"\n />\n
\n \n\n
Additional Details
\n\n
\n\n \n
\n \n
\n \n \n
\n \n \n setCostPerView(e.target.value)}\n maxLength=\"10\"\n placeholder=\"$\"\n />\n
\n \n
\n \n \n Pods Ordered By:\n
\n \n
\n \n \n
\n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n \n Columns To Include:\n
\n \n
\n \n \n
\n \n \n \n
\n \n
\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n\n
\n
\n \n
\n \n
\n \n
\n
\n );\n\n // three options for display (loading, no results, results);\n function renderReportRows(reports = false) {\n if (reports.length === 0) {\n return (\n | # | \nDate | \nTime | \nPod | \nShown After | \nShown Before | \nImpressions | \n
|---|
\n searchSubmit(params)}\n />\n\n {reports && reports.length ? (\n
\n );\n}\n\nReportList.propTypes = {\n location: PropTypes.object,\n params: PropTypes.object\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport InaccessibleLink from \"../shim/inaccessible-link\";\nimport util from \"../util/util\";\n\nexport default function RuleDetailExceptions(props) {\n const exceptions = props.hasOwnProperty(`exceptions`) ? props.exceptions : [];\n\n return (\n Reporting
\n\n\n
\n ) : null}\n \n
\n\n
\n );\n}\n\nRuleDetailExceptions.propTypes = {\n onClickDeleteException: PropTypes.func,\n exceptions: PropTypes.oneOfType([PropTypes.array, PropTypes.bool])\n};\n","import React from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport util from \"../util/util\";\n\nexport default function RuleDetailExceptions(props) {\n return props.pod || props.campaign ? (\n \n
\n\n \n
\n Exceptions
\n\n\n
\n \n
\n
\n | # | \nTime Slot | \nStart Date | \nEnd Date | \nCreated | \nDelete Exception | \n
|---|---|---|---|---|---|
| \n 0\n | \n{util.zeroExceptionsMessage} | \n||||
| \n {index + 1}\n | \n{util.returnCleanTimeSlot(exception.timeslot)} | \n\n {moment(exception.start_date).format(\n util.dateFormatHumanLong\n )}\n | \n\n {moment(exception.end_date).format(\n util.dateFormatHumanLong\n )}\n | \n\n {moment(exception.created).format(util.dateFormatHumanLong)}\n | \n\n | \n
\n
\n ) : null;\n}\n\nRuleDetailExceptions.propTypes = {\n pod: PropTypes.object,\n campaign: PropTypes.object\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\n\nexport default function RuleDetailSchedule(props) {\n const timeslots = props.timeslots || [];\n const shows = props.shows || [];\n\n return (\n Source {props.pod ? `Pod` : `Campaign`}
\n\n {props.pod ? (\n \n {props.pod.name}\n \n ) : (\n \n {props.campaign.name}\n \n )}\n
\n\n
\n );\n}\n\nRuleDetailSchedule.propTypes = {\n endDate: PropTypes.string, // schedule end date;\n frequency: PropTypes.number, // rule repeats value;\n rule: PropTypes.object, // rule details;\n startDate: PropTypes.string, // schedule start date;\n timeslots: PropTypes.array // timeslots for this rule;\n};\n\n// transform array of day ids into text;\nfunction renderDays(values) {\n const labels = [];\n\n // daysArray contains the text values;\n util.days.forEach(day => {\n if (values.indexOf(day.value) > -1) {\n labels.push(day.label);\n }\n });\n\n // return array of text from an array of ids;\n return labels;\n}\n\n// render content for monthly schedule;\nfunction renderRepeatsMonthly(rule) {\n return (\n Schedule
\n\n\n
\n \n
\n \n
\n\n Start Date
\n{moment(props.startDate).format(util.dateFormatHumanLong)}
\n\n
\n\n End Date
\n{moment(props.endDate).format(util.dateFormatHumanLong)}
\n\n {props.timeslots && timeslots.length > 0 ? (\n
\n\n \n
\n ) : (\n \n Time Slot{timeslots.length > 1 ? `s` : ``}\n
\n {util.returnCleanTimeSlots(timeslots).map((timeslot, index) => (\n{timeslot}
\n ))}\n\n
\n )}\n \n Show{shows.length > 1 ? `s` : ``}\n
\n {util.returnShowNames(shows).map((show, index) => (\n{show}
\n ))}\n\n
\n Repeats
\n {props.frequency === 1 && renderRepeatsMonthly(props.rule)}\n\n {props.frequency === 2 && renderRepeatsWeekly(props.rule)}\n\n {props.frequency === 3 && renderRepeatsDaily(props.frequency)}\n\n On the {returnOrdinal(rule.bymonthday)} day, every {rule.interval}{\" \"}\n {rule.interval > 1 ? `months` : `month`}.\n
\n );\n}\n\n// render content for weekly schedule;\nfunction renderRepeatsWeekly(rule) {\n const weekLabel = rule.interval > 1 ? `weeks` : `week`;\n\n return (\n\n Every {rule.interval} {weekLabel} on:\n
\n );\n}\n\n// render content for daily schedule;\nfunction renderRepeatsDaily(frequency) {\n return (\n - \n {renderDays(rule.byweekday).map(day => {\n return
- {day} ;\n })}\n
\n {util.returnRepeatValue(frequency)}\n
\n );\n}\n\n// transform number into number-string (1st, 2nd, etc);\nfunction returnOrdinal(i) {\n const j = i % 10;\n const k = i % 100;\n\n if (j === 1 && k !== 11) {\n return i + `st`;\n }\n\n if (j === 2 && k !== 12) {\n return i + `nd`;\n }\n\n if (j === 3 && k !== 13) {\n return i + `rd`;\n }\n\n return i + `th`;\n}\n","import React, { Component } from \"react\";\nimport { browserHistory, Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport LoadingIndicatorHeader from \"../loading-indicator/loading-indicator-header\";\nimport RuleDetailExceptions from \"./rule-detail-exceptions\";\nimport RuleDetailSource from \"./rule-detail-source\";\nimport RuleDetailSchedule from \"./rule-detail-schedule\";\nimport InaccessibleLink from \"../shim/inaccessible-link\";\nimport Tooltip from \"../tooltip/tooltip\";\nimport util from \"../util/util\";\n\nconst jQuery = window.jQuery;\n\nexport default class RuleDetail extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n id: Number(this.props.params.id), // id used to go get rule data;\n loaded: false // has Ajax data loaded yet;\n };\n }\n\n componentDidMount() {\n this.mounted = true;\n\n this.getRule();\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n render() {\n if (this.state.loaded === false) {\n return\" +\n \"Click the 'Expire Rule Now' button
\" +\n \"to expire this rule.\";\n return (\n
\n
\n
\n
\n
\n this.deleteException(id)}\n />\n
\n );\n }\n }\n\n // get the rule data to display;\n getRule(callback = null) {\n util.getRule(this.state.id).then(data => {\n setTimeout(() => {\n this.mounted &&\n this.setState(\n {\n campaign: data.campaign,\n created: data.created,\n endDate: data.end_date,\n exceptions: data.exceptions.length ? data.exceptions : false,\n frequency: data.frequency,\n loaded: true,\n name: data.name,\n pod: data.pod,\n rule: {\n bymonthday: data.rule.bymonthday,\n byweekday: data.rule.byweekday,\n interval: data.rule.interval\n },\n sourceType: data.pod ? `pod` : `campaign`,\n startDate: data.start_date,\n state: data.state.toLowerCase(),\n timeslots: data.timeslots,\n shows: data.shows\n },\n () => {\n // if a callback exists (hide modal), fire it;\n if (callback) {\n callback();\n }\n }\n );\n }, util.delayDetail);\n });\n }\n\n // call the delete rule endpoint\n deleteRule() {\n const title = `Delete Rule`;\n const body = `\n
\n \n
\n {this.state.name}
\n\n
\n \n
\n
\n
\n \n \n
\n Rule Name
\n{this.state.name}
\n\n
\n Rule Created
\n\n {moment(this.state.created).format(util.dateFormatHumanLong)}\n
\n\n
\n \n
\n Last Changed By
\n\n Not available in the API (yet).\n
\n\n
\n Change Log
\n\n
\n
\n
\n
\n
Are you sure you want to delete the rule: ${this.state.name}?
`;\n const buttonTextDefault = `Delete Rule`;\n const buttonTextLoading = `Deleting Rule`;\n const iconClass = `fa-trash-o`;\n const $modal = util.renderModal(\n title,\n body,\n buttonTextDefault,\n buttonTextLoading,\n iconClass\n );\n const $confirmButton = $modal.find(`.btn-danger`);\n\n // attach temporary event to remove the rule on confirmation of the modal;\n // remove any previous events first;\n // dont namespace the event because we want to remove everything;\n $confirmButton.one(`click`, () => {\n $confirmButton.button(`loading`);\n\n util\n .deleteRule(this.state.id)\n .fail(() => {\n setTimeout(() => {\n // reset the button on fail so it can be clicked again;\n $confirmButton.button(`reset`);\n }, util.delayForm);\n })\n .then(() => {\n // once done, go back to the list of rules\n $modal.modal(`hide`);\n browserHistory.push(`/rules/`);\n });\n });\n\n // attach the modal to the DOM, and then show it;\n jQuery(`body`).append($modal);\n $modal.modal(`show`);\n }\n\n // delete the exception associated with this rule;\n deleteException(exception) {\n const title = `Delete Exception to the Rule`;\n const body = `Are you sure you want to delete the ${moment(\n exception.start_date\n ).format(\n util.dateFormatHumanLong\n )} @ ${util.returnCleanTimeSlot(\n exception.timeslot\n )} exception?
`;\n const buttonTextDefault = `Delete the Exception`;\n const buttonTextLoading = `Deleting the Exception`;\n const iconClass = `fa-trash-o`;\n const $modal = util.renderModal(\n title,\n body,\n buttonTextDefault,\n buttonTextLoading,\n iconClass\n );\n const $confirmButton = $modal.find(`.btn-danger`);\n\n // remove the exception on confirmation of the modal;\n $confirmButton.one(`click`, () => {\n $confirmButton.button(`loading`);\n\n util\n .deleteExceptionFromRule(exception.id)\n .fail(() => {\n setTimeout(() => {\n // reset the button on fail so it can be clicked again;\n $confirmButton.button(`reset`);\n }, util.delayForm);\n })\n .then(() => {\n // then load the rule again (to update state);\n this.getRule(() => {\n $modal.modal(`hide`);\n });\n\n // and update the conflict count;\n window.updateConflictCount();\n });\n });\n\n // attach the modal to the DOM, and then show it;\n jQuery(`body`).append($modal);\n $modal.modal(`show`);\n }\n\n // tell the back-end to change the end_date to yesterday;\n expireRule() {\n const title = `Expire Rule`;\n const body = `Are you sure you want to expire the rule?
`;\n const buttonTextDefault = `Expire the Rule`;\n const buttonTextLoading = `Expiring the Rule`;\n const iconClass = `fa-calendar-times-o`;\n const $modal = util.renderModal(\n title,\n body,\n buttonTextDefault,\n buttonTextLoading,\n iconClass\n );\n const $confirmButton = $modal.find(`.btn-danger`);\n\n // remove the exception on confirmation of the modal;\n $confirmButton.one(`click`, () => {\n $confirmButton.button(`loading`);\n\n util\n .saveRuleAsExpired(this.state.id)\n .fail(() => {\n setTimeout(() => {\n // reset the button on fail so it can be clicked again;\n $confirmButton.button(`reset`);\n }, util.delayForm);\n })\n .then(() => {\n // then load the rule again (to update state);\n this.getRule(() => {\n $modal.modal(`hide`);\n });\n\n // and update the conflict count;\n window.updateConflictCount();\n });\n });\n\n // attach the modal to the DOM, and then show it;\n jQuery(`body`).append($modal);\n $modal.modal(`show`);\n }\n}\n\nRuleDetail.propTypes = {\n params: PropTypes.object\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport default function RuleFormButtons(props) {\n return (\n\n
\n
\n );\n}\n\nRuleFormTimeSlots.propTypes = {\n error: PropTypes.bool, // show the error or not (only one error possible);\n value: PropTypes.array, // selected time slots (all - selected = available);\n onChange: PropTypes.func // run when changing the selected time slots;\n};\n","import React, {useCallback, useEffect, useState} from 'react';\nimport { browserHistory } from 'react-router';\nimport PropTypes from \"prop-types\";\nimport Select from 'react-select';\nimport LoadingIndicatorHeader from '../loading-indicator/loading-indicator-header';\nimport RuleFormButtons from './rule-form-buttons';\nimport RuleFormTimeSlots from './rule-form-timeslots';\nimport DatePicker from 'react-datepicker';\nimport moment from 'moment';\nimport ruleFormValidation from './rule-form-validation';\nimport Tooltip from \"../tooltip/tooltip\";\nimport ajax from '../util/util-ajax';\nimport util from '../util/util';\nimport _ from \"lodash\";\nimport { v4 } from 'uuid';\n\nconst jQuery = window.jQuery;\n\nexport default function RuleForm (props) {\n const [id, setId] = useState(0); // id of the rule we are editing (0 means new rule to create)\n const [name, setName] = useState(``); // the Rule name\n const [sourceType, setSourceType] = useState(`pod`); // the Rule Source type\n const [pod, setPod] = useState(null); // the corresponding Pod, if the Rule is made from a Pod\n const [campaign, setCampaign] = useState(null); // the corresponding Campaign, if the Rule is made from a Campaign\n const [frequency, setFrequency] = useState(3); // the Rule repeats: Daily(3), Weekly(2) or Monthly(1)\n const [startDate, setStartDate] = useState(moment(new Date())); // Rule start date\n const [endDate, setEndDate] = useState(moment(new Date())); // Rule end date\n const [ruleInterval, setRuleInterval] = useState(1); // Rule interval\n const [ruleByweekday, setRuleByweekday] = useState([]); // Rule week interval\n const [ruleBymonthday, setRuleBymonthday] = useState(1); // Rule month interval\n const [airtimeType, setAirtimeType] = useState(`timeSlots`); // The type of Ad airtime, time based or show based\n const [timeslots, setTimeslots] = useState([]); // the selected Timeslots (every 30 mins, from 00:28 up to 23:58)\n const [shows, setShows] = useState([]); // array used to control the SELECT fields for Shows\n const [loaded, setLoaded] = useState(false); // indicator for when the form has loaded\n const [errors, setErrors] = useState({}); // prop names determine which errors to show\n const [podOptions, setPodOptions] = useState([]); // the Options for the Pod SELECT\n const [campaignOptions, setCampaignOptions] = useState([]); // the Options for the Campaign SELECT\n const [showOptions, setShowOptions] = useState([]); // the Options for the Show SELECT\n const [searchingForPods, setSearchingForPods] = useState(false); // used to control the message displayed on the SELECT while searching for Pods\n const [searchingForCampaigns, setSearchingForCampaigns] = useState(false); // used to control the message displayed on the SELECT while searching for Campaigns\n const [searchingForShows, setSearchingForShows] = useState(false); // used to control the message displayed on the SELECT while searching for Shows\n const [positionBeforeShow, setPositionBeforeShow] = useState(false); //if the Ad is set to play before the selected Show(s)\n const [positionAfterShow, setPositionAfterShow] = useState(false); //if the Ad is set to play after the selected Show(s)\n\n\n useEffect(() => {\n // id of the rule we are editing (0 means new rule to create)\n const id = props.params ? Number(props.params.id) : 0;\n\n // get the rule data to display in the form;\n const getRule = () => {\n // on a new Rule, no need to set up all the values as the default ones are used\n if (id === 0) {\n // if a pod was pre-selected, go get the data and set it as the value of the SELECT\n if (props.params && props.params.podId) {\n util.getPod(props.params.podId)\n .then((data) => {\n setPod({\n label: data.name,\n value: data.id,\n id: data.id.toString()\n });\n setLoaded(true);\n });\n // if a campaign was pre-selected, go get the data amd set it as the value of the SELECT\n } else if (props.params && props.params.campaignId) {\n util.getCampaign(props.params.campaignId)\n .then((data) => {\n setCampaign({\n label: data.name,\n value: data.id,\n id: data.id.toString()\n });\n setSourceType(`campaign`);\n setLoaded(true);\n });\n // otherwise we're done, use the empty value and show the form\n } else {\n setPod(getDefaultPodValue());\n setShows(getDefaultShowsValue());\n setLoaded(true);\n }\n\n // on an existing Rule\n } else {\n util.getRule(id)\n .then((data) => {\n setTimeout(() => {\n setId(id);\n setName(data.name);\n if (data.pod) {\n setPod({\n label: data.pod.name,\n value: data.pod.id,\n id: data.pod.id.toString()\n });\n } else {\n setCampaign({\n label: data.campaign.name,\n value: data.campaign.id,\n id: data.campaign.id.toString()\n });\n setSourceType(`campaign`);\n }\n setFrequency(data.frequency);\n setStartDate(moment(data.start_date));\n setEndDate(moment(data.end_date));\n data.rule.interval && setRuleInterval(data.rule.interval); // rule values may not be defined even for existing rules\n data.rule.byweekday && setRuleByweekday(data.rule.byweekday); // same as above\n data.rule.bymonthday && setRuleBymonthday(data.rule.bymonthday); // same as above\n if (data.timeslots.length > 0) {\n setTimeslots(util.returnCleanTimeSlots(data.timeslots));\n } else {\n setShows(data.shows);\n setAirtimeType(`showBased`);\n setPositionBeforeShow(data.position_before_show);\n setPositionAfterShow(data.position_after_show);\n }\n setLoaded(true);\n });\n }, util.delayDetail);\n }\n }\n\n getRule();\n setLoaded(true);\n }, [props.params]);\n\n // default value of the Pod SELECT\n const getDefaultPodValue = () => {\n return {\n label: `Select a pod`,\n value: 0,\n id: v4()\n };\n }\n\n // default value of the Campaign SELECT\n const getDefaultCampaignValue = () => {\n return {\n label: `Select a campaign`,\n value: 0,\n id: v4()\n };\n }\n\n // default value of the SELECT;\n const getDefaultShowsValue = () => {\n return [{\n label: `Select a show`,\n value: 0,\n id: v4()\n }]\n };\n\n // add another form field to the page so the user can select another show;\n const addShow = () => {\n const showsArray = [...shows];\n showsArray.push(getDefaultShowsValue()[0]);\n setShows(showsArray);\n }\n\n const getShowsInUse = () => {\n const showIds = [];\n\n shows && shows.forEach((show) => {\n // selecting only the not empty ('Select a show') shows\n show.value > 0 && showIds.push(show.value);\n });\n\n return showIds;\n }\n\n const getSelectSearchStatus = (searchTerm, sourceType) => {\n if (searchTerm.inputValue.length === 0) {\n return `Please type a few characters to kick off remote search.`\n }\n\n if (sourceType === \"pod\") {\n if (searchingForPods === true) {\n return `Searching...`\n }\n if (podOptions.length === 0) {\n return `No results found.`\n }\n } else if (sourceType === \"campaign\") {\n if (searchingForCampaigns === true) {\n return `Searching...`\n }\n if (campaignOptions.length === 0) {\n return `No results found.`\n }\n } else if (sourceType === \"show\") {\n if (searchingForShows === true) {\n return `Searching...`\n }\n if (showOptions.length === 0) {\n return `No results found.`\n }\n }\n\n return `Something went wrong.`\n }\n\n const getPodSearchResults = (searchTerm) => {\n if (searchTerm.length <= 0) {\n setSearchingForPods(false);\n setPodOptions([]);\n } else {\n setSearchingForPods(true);\n util\n .getPods({\n sort: `name`,\n page: 1,\n search: searchTerm,\n aws_status: 2,\n })\n .then((data) => {\n setSearchingForPods(false);\n setPodOptions(util.returnSimpleSelectOptions(data.results));\n });\n }\n }\n\n const getCampaignSearchResults = (searchTerm) => {\n if (searchTerm.length <= 0) {\n setSearchingForCampaigns(false);\n setCampaignOptions([]);\n } else {\n setSearchingForCampaigns(true);\n util.getSearchResults(searchTerm, `campaigns`)\n .then((data) => {\n setSearchingForCampaigns(false);\n setCampaignOptions(util.returnSimpleSelectOptions(data.results));\n });\n }\n }\n\n const getShowSearchResults = (searchTerm) => {\n if (searchTerm.length <= 0) {\n setSearchingForShows(false);\n setShowOptions([]);\n } else {\n setSearchingForShows(true);\n util\n .getShows({\n searchTerm: searchTerm,\n excludeShows: getShowsInUse().join(\",\"),\n })\n .then((data) => {\n setSearchingForShows(false);\n setShowOptions(util.returnSimpleSelectOptionsForShows(data.results));\n });\n }\n }\n\n const getPodSearchResultsDelayed = useCallback(\n _.debounce(getPodSearchResults, 250),\n []\n )\n\n const getCampaignSearchResultsDelayed = useCallback(\n _.debounce(getCampaignSearchResults, 250),\n []\n )\n\n const getShowSearchResultsDelayed = useCallback(\n _.debounce(getShowSearchResults, 250),\n [shows]\n )\n\n const handleSelectOnValueChange = (selectedValue, action, sourceType, index) => {\n const showsArray = [...shows];\n if (action.action === \"select-option\") {\n if (sourceType === \"pod\") {\n setPod(selectedValue);\n } else if (sourceType === \"campaign\") {\n setCampaign(selectedValue);\n } else if (sourceType === \"show\") {\n showsArray[index] = {\n \"label\": selectedValue.label,\n \"value\": selectedValue.value,\n \"id\": selectedValue.value.toString()\n };\n setShows(showsArray);\n }\n } else if (action.action === \"clear\") {\n if (sourceType === \"pod\") {\n setPod(getDefaultPodValue());\n } else if (sourceType === \"campaign\") {\n setCampaign(getDefaultCampaignValue());\n } else if (sourceType === \"show\") {\n if (showsArray.length === 1) {\n showsArray[0] = getDefaultShowsValue()[0];\n } else {\n showsArray.splice(index, 1);\n }\n setShows(showsArray);\n }\n }\n }\n\n // update the ruleByWeekday value;\n const changeRuleByweekday = (e) => {\n // current array of options\n // !!! important - as you cannot update the hook directly\n // and doing 'const options = ruleByweekday;' would only copy the reference\n // so you need a new array (spread, map,...) to copy the values from ruleByweekday\n // also, this is a shallow copy (1st level, not nested), which suffice in our case\n // the other solution would be to provide a function to setRuleByweekday\n const options = [...ruleByweekday];\n const value = Number(e.target.value);\n\n // check if the check box is checked or unchecked\n if (e.target.checked) {\n // add the numerical value of the checkbox to options array\n options.push(value);\n } else {\n // or remove the value from the unchecked checkbox from the array\n options.splice(options.indexOf(value), 1);\n }\n\n // update the state with the new array of options\n setRuleByweekday(options);\n }\n\n // save the data;\n const onSubmit = () => {\n // build the object to send to the server;\n // can only submit a campaign or a pod, not both;\n const report = {\n id: id,\n name: name.trim(),\n sourceType: sourceType,\n pod: null,\n campaign: null,\n frequency: frequency,\n startDateValidate: startDate,\n endDateValidate: endDate,\n airtimeType: airtimeType,\n timeslots: [],\n shows: [],\n position_before_show: positionBeforeShow,\n position_after_show: positionAfterShow,\n };\n\n // do it this way so eslint doesn't yell at us for using underscores in var names;\n report[`end_date`] = report.endDateValidate.format(util.dateFormatComputer);\n report[`start_date`] = report.startDateValidate.format(util.dateFormatComputer);\n\n // depending on what the sourceType value is, record the appropriate SELECT value;\n if (report.sourceType === `campaign`) {\n if (campaign && campaign.value) {\n report.campaign = campaign.value;\n }\n } else {\n if (pod && pod.value) {\n report.pod = pod.value;\n }\n }\n\n // same for airtimeType\n if (report.airtimeType === `timeSlots`) {\n if (timeslots && timeslots.length > 0) {\n report.timeslots = timeslots;\n }\n } else {\n // insert only valid shows into the obj to send;\n shows && shows.forEach((show) => {\n show.value > 0 && report.shows.push(show);\n });\n }\n\n // determine the reoccurrence rules;\n // not all values can be sent with each request;\n switch (report.frequency.toString()) {\n case `3`:\n report.rule = {};\n break;\n case `2`:\n report.rule = {\n interval: ruleInterval,\n byweekday: ruleByweekday\n };\n break;\n case `1`:\n report.rule = {\n interval: ruleInterval,\n bymonthday: ruleBymonthday\n };\n break;\n default:\n break;\n }\n\n // see if there are any errors before proceeding;\n const validationResult = ruleFormValidation(report);\n\n // danger will robinson, we have errors;\n if (validationResult.hasErrors) {\n setErrors(validationResult.errors);\n util.putFoucsOnError();\n\n // stop any further processing;\n return false;\n\n // good to go, clear any existing errors;\n } else {\n setErrors({})\n }\n\n // put the button into a processing state;\n const $button = jQuery(`.btn-primary`).button(`loading`);\n\n // save (POST or PUT) the form data;\n util.saveRule(id, report)\n .fail((error) => {\n const serializerNameExistsError = \"A Rule with this name already exists.\";\n const api_error = _.get(error, \"responseJSON.Validation_Error[0]\")\n\n // if the name already exists\n if (serializerNameExistsError === api_error) {\n setErrors(_.merge({}, errors, { name: api_error}));\n util.putFoucsOnError();\n // if there is a different backend (4xx, 5xx) error\n } else {\n ajax.onFail(error);\n }\n\n setTimeout(() => {\n // reset the button on fail so it can be clicked again;\n $button.button(`reset`);\n }, util.delayForm);\n\n // stop any further processing, as the Rule was not saved in the DB\n return false;\n })\n .then((data) => {\n // after the rule has been saved, check to see if we have any conflicts;\n util.getConflicts()\n .then((conflictData) => {\n const newUrl = (conflictData.count > 0) ? util.returnConflictFormUrl() : util.returnRuleDetailUrl(data.id);\n\n // wait a little bit (so the user can track what’s going on);\n setTimeout(() => {\n // load the next page (rule detail or conflict form);\n browserHistory.push(newUrl);\n }, util.delayForm);\n });\n });\n }\n\n // cancel this action (do nothing and go somewhere else);\n const onCancel = () => {\n const newUrl = (id === 0) ? util.returnRuleListUrl() : util.returnRuleDetailUrl(id);\n\n browserHistory.push(newUrl);\n }\n\n if (loaded === false) {\n return (\n \n
\n \n
\n\n \n \n \n {_.difference(util.timeSlots, props.value).map(\n (timeSlot, index) => {\n return (\n \n );\n }\n )}\n \n
\n \n
\n\n \n
\n
\n
\n \n \n \n {props.value.map((timeSlot, index) => {\n return (\n \n );\n })}\n \n
\n \n Time Slots is a required field.\n
\ncan be scheduled.\";\n const tooltipMessageShows = \"Show-based scheduling
can only apply to the next 60 days.\";\n\n return (\n \n );\n }\n}\n\nRuleForm.propTypes = {\n params: PropTypes.object\n};\n","import moment from \"moment\";\n\nexport default function ruleFormValidation(report) {\n // returned, defines if we have errors or not;\n let hasErrors = false;\n\n // returned, used to setState to inform the users of the errors;\n const errors = {};\n\n // rule name is required;\n if (report.name === ``) {\n errors.name = \"Rule Name is a required field.\";\n hasErrors = true;\n }\n\n // if pod, make sure a pod is required;\n if (report.sourceType === `pod`) {\n if (report.pod === null) {\n errors.pod = true;\n hasErrors = true;\n }\n\n // if campaign, make sure a campaign is required;\n } else {\n if (report.campaign === null) {\n errors.campaign = true;\n hasErrors = true;\n }\n }\n\n // show and/or timeslots are required:\n if (report.airtimeType === `timeSlots`) {\n if (report.timeslots && report.timeslots.length === 0) {\n errors.timeslots = true;\n hasErrors = true;\n }\n } else {\n if (report.shows && report.shows.length === 0) {\n errors.shows = true;\n hasErrors = true;\n }\n }\n\n // for Show-based, at least one position is also required\n if (report.airtimeType === `showBased`) {\n if (\n report.position_before_show === false &&\n report.position_after_show === false\n ) {\n errors.position = true;\n hasErrors = true;\n }\n }\n\n // if the dates are defined (always should be...);\n if (report.startDateValidate && report.endDateValidate) {\n // and they dates are the same, they're good to go;\n if (report.startDateValidate.isSame(report.endDateValidate) === false) {\n // if the start date is after the end date we have a problem;\n if (report.startDateValidate.isAfter(report.endDateValidate)) {\n errors.startDate = true;\n errors.endDate = true;\n hasErrors = true;\n }\n }\n }\n\n // for Show-based, the end date cannot be longer than 2 months\n if (report.airtimeType === `showBased`) {\n const afterTwoMonths = moment().add(60, `days`);\n if (report.endDateValidate.isAfter(afterTwoMonths)) {\n errors.showBasedEndDate =\n \"For Show-based Rules the last possible day is: \" +\n afterTwoMonths.format(`MM/DD/YYYY`);\n hasErrors = true;\n }\n }\n\n return {\n errors: errors, // return for setState to tell the user what went wrong;\n hasErrors: hasErrors // return true/false so the submit works/doesn't;\n };\n}\n","import React, { Component } from \"react\";\nimport { browserHistory } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport util from \"../util/util\";\n\n// generate arry of rule statuses;\nconst ruleStatuses = () => {\n const statuses = [];\n\n [`All`, `Live`, `Expired`, `Future`].forEach(key => {\n statuses.push({\n label: key,\n value: key.toLowerCase()\n });\n });\n\n return statuses;\n};\n\n// default values in case nothing is supplied in the URL;\nconst defaultStatusValue = ruleStatuses()[1].value;\nconst defaultTimeSlotValue = `All`;\n\n// use the same logic to set state (on load, on prop change);\nconst returnSearchState = (props = {}) => ({\n search: props.search || ``, // search string value;\n status: props.status || defaultStatusValue, // status value;\n timeslot: props.timeslot || defaultTimeSlotValue // timeslot value;\n});\n\nexport default class RuleListSearchForm extends Component {\n constructor(props) {\n super(props);\n\n this.state = returnSearchState(props);\n }\n\n componentWillReceiveProps(nextProps) {\n this.setState(returnSearchState(nextProps));\n }\n\n render() {\n return (\n
\n
\n );\n }\n\n // if the key pressed is `enter` then submit the search form;\n onKeyPress(e) {\n if (e.key === `Enter`) {\n this.onSearchSubmit();\n }\n }\n\n // reset search form values to their default state;\n onSearchReset() {\n this.setState(returnSearchState());\n }\n\n // go to a new URL with the selected form values;\n onSearchSubmit() {\n let url = `${util.returnRuleListUrl()}?sort=${this.props.sort}`;\n\n if (this.state.search.length) {\n url = `${url}&search=${this.state.search}`;\n }\n\n if (this.state.status) {\n url = `${url}&status=${this.state.status}`;\n }\n\n if (this.state.timeslot) {\n url = `${url}×lot=${this.state.timeslot}`;\n }\n\n browserHistory.push(url);\n }\n}\n\nRuleListSearchForm.propTypes = {\n search: PropTypes.string,\n sort: PropTypes.string, // not editable from this component, but needs to be passed in the form;\n status: PropTypes.string,\n timeslot: PropTypes.string\n};\n","import React from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\nimport LoadingIndicatorText from \"../loading-indicator/loading-indicator-text\";\n\nconst jQuery = window.jQuery;\n\nexport default function RuleListTable(props) {\n return (\n \n \n this.setState({ search: e.target.value.trim() })}\n onKeyPress={e => this.onKeyPress(e)}\n />\n
\n\n \n \n this.setState({ status: e.target.value })}\n >\n {ruleStatuses().map(obj => (\n \n ))}\n \n
\n\n \n \n {\n this.setState({\n timeslot: [].slice\n .call(e.target.selectedOptions)\n .map(option => option.value)\n });\n }}\n >\n \n {util.timeSlots.map((timeSlot, index) => {\n return (\n \n );\n })}\n \n
\n\n \n this.onSearchSubmit()}\n >\n \n Apply Filters\n \n\n \n
\n \n \n
\n
\n );\n\n // three options for display (loading, no results, results);\n function renderRuleRows(rules = false) {\n if (rules.length === 0) {\n return (\n | # | \n{renderSortLink(`name`, `Rule`, props.sort)} | \nPod / Campaign | \n{renderSortLink(`-start_date`, `Start Date`)} | \n{renderSortLink(`-end_date`, `End Date`)} | \nTime Slots / Shows | \nRepeats | \n
|---|
\n
\n );\n }\n\n // get the rule data to display (one page at a time);\n getRules() {\n util\n .getRules({\n page: this.state.page,\n search: this.state.search,\n sort: this.state.sort,\n status: this.state.status,\n timeslot: this.state.timeslot\n })\n .then(data => {\n setTimeout(() => {\n this.mounted &&\n this.setState({\n pageCount: Math.ceil(data.count / util.ruleResultsPerPage),\n rules: data.results.length ? data.results : false\n });\n }, util.delayList);\n });\n }\n}\n\nRuleList.propTypes = {\n location: PropTypes.object,\n params: PropTypes.object\n};\n","import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\n\n// this is used within the Date Picker component;\n// as the trigger to open the Date Picker;\n\n// even though this doesn't make use of state, it shouldn't be a stateless component;\n// if it's stateless, a React error will be thrown in the console about adding a ref to a stateless component;\n// the ref is added by the Date Picker;\n\nexport default class ScheduleByDayTitle extends Component {\n render() {\n return (\n \n
\n\n \n
\n Rules
\n\n
\n \n \n \n Create New Rule\n \n
\n\n
\n );\n\n // convert one date (string) into another date (string);\n function returnDay(day, dayOffset, dateFormat) {\n const date = moment(day);\n\n return date.add(dayOffset, `days`).format(dateFormat);\n }\n}\n\nScheduleByDayButtons.propTypes = {\n day: PropTypes.string, // used to generate title and links;\n loaded: PropTypes.bool // has the schedule data loaded or not;\n};\n","import React from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport TimeslotPopover from \"../timeslot-popover/timeslot-popover\";\nimport util from \"../util/util\";\n\nexport default function ScheduleByDaySchedule(props) {\n return (\n \n {props.loaded === false ? (\n
\n\n \n
\n )}\n \n
\n\n \n
\n
\n \n
\n
\n );\n\n // render a TABLE of some of the schedule data;\n function renderScheduleByIndex(startIndex, endIndex) {\n const schedule = props.schedule.slice(startIndex, endIndex);\n\n return (\n - \n
- \n \n 00:00 - 7:30\n \n \n
- \n \n 08:00 - 15:30\n \n \n
- \n \n 16:00 - 23:30\n \n \n
\n
\n \n {renderScheduleByIndex(0, 32)}\n
\n \n {renderScheduleByIndex(32, 64)}\n
\n \n {renderScheduleByIndex(64, 96)}\n
\n \n \n
\n
\n );\n }\n}\n\nScheduleByDaySchedule.propTypes = {\n day: PropTypes.string, // used to generate links to a timeslot view;\n schedule: PropTypes.array // daily schedule data to display (one array to be broken into three tabs);\n};\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport ScheduleByDayButtons from \"./schedule-by-day-buttons\";\nimport ScheduleByDaySchedule from \"./schedule-by-day-schedule\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\n\nexport default class ScheduleByDay extends Component {\n constructor(props) {\n super(props);\n\n this.state = this.returnInitialState(props);\n }\n\n componentDidMount() {\n this.mounted = true;\n\n this.getScheduleByDay();\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n componentWillReceiveProps(nextProps) {\n this.setState(this.returnInitialState(nextProps), this.getScheduleByDay);\n }\n\n render() {\n return (\n | Time Slot | \nPod | \n||
|---|---|---|---|
| \n | \n ) : (\n {row.timeslot} | \n )}\n {typeof row.show !== `string` ? (\n\n {row.show && row.show.pod ? (\n | \n ) : (\n {row.show} | \n )}\n
\n
\n\n
\n\n
\n );\n }\n\n // use the same logic to set state (on load, on prop change);\n returnInitialState(props = {}) {\n return {\n day: this.returnFormattedDay(\n (props.params && props.params.day) || new Date()\n ), // the day everything is based on;\n loaded: false, // indicates that the content is ready for display (even when schedule is empty);\n schedule: this.returnEmptySchedule() // main content to display;\n };\n }\n\n // convert the date into a readable format;\n returnFormattedDay(date) {\n return moment(date).format(util.dateFormatComputer);\n }\n\n // returns an empty schedule we can now use;\n // insert Ajax content into it, or display as-is (on prop change);\n returnEmptySchedule() {\n const schedule = [];\n\n // loop through the 24 hours of the day;\n for (let hour = 0; hour <= 23; hour = hour + 1) {\n const hourFormatted = hour < 10 ? `0${hour}` : hour;\n\n // loop through the hour and half hour slot;\n // the 28 and 58 are FPO for the associated pods;\n [`00`, `28`, `30`, `58`].forEach(time => {\n // create the `table row` for each time slot;\n schedule.push({\n timeslot: `${hourFormatted}:${time}`,\n show: ``\n });\n });\n }\n\n return schedule;\n }\n\n // get the schedule data to display (one day at a time);\n getScheduleByDay() {\n const schedule = this.state.schedule;\n const processData = data => {\n data.forEach(show => {\n const airtime = moment(show.airtime);\n const timeslot = airtime.format(`HH:mm`);\n\n // find the timeslot (if it exists);\n schedule.forEach((slot, i) => {\n if (slot.timeslot === timeslot) {\n // add the show or interstitial to the timeslot;\n schedule[i].show = show.title\n ? show.title\n : { pod: show.pod, rule: show.rule };\n }\n });\n });\n };\n\n // get this days data;\n util\n .getScheduleByDay(this.state.day)\n .then(data => {\n processData(data);\n\n // then this weeks interstitial data;\n return util.getInterstitialsByDay(this.state.day);\n })\n .then(data => {\n processData(data);\n\n setTimeout(() => {\n this.mounted &&\n this.setState({\n loaded: true,\n schedule: schedule\n });\n }, util.delayList);\n });\n }\n}\n\nScheduleByDay.propTypes = {\n params: PropTypes.object\n};\n","import React from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport LoadingIndicatorHeader from \"../loading-indicator/loading-indicator-header\";\nimport util from \"../util/util\";\n\nexport default function ScheduleByTimeslotButtons(props) {\n return (\n \n
\n\n \n
\n \n
\n
\n Daily Schedule
\n\n\n
\n\n
\n
\n );\n\n // get the prev/next timeslot based on the one passed in;\n function returnTimeslot(timeslot, change) {\n const lastIndex = util.timeSlots.length - 1;\n const currentIndex = util.timeSlots.indexOf(props.timeslot);\n let newIndex = currentIndex + change;\n\n if (newIndex < 0) {\n newIndex = lastIndex;\n }\n\n if (newIndex > lastIndex) {\n newIndex = 0;\n }\n\n return util.timeSlots[newIndex];\n }\n}\n\nScheduleByTimeslotButtons.propTypes = {\n day: PropTypes.string, // used to generate prev/next timeslot links;\n loaded: PropTypes.bool, // has the schedule data been loaded;\n timeslot: PropTypes.string // used in title and link generation;\n};\n","import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\n\n// this is used within the Date Picker component;\n// as the trigger to open the Date Picker;\n\n// even though this doesn't make use of state, it shouldn't be a stateless component;\n// if it's stateless, a React error will be thrown in the console about adding a ref to a stateless component;\n// the ref is added by the Date Picker;\n\nexport default class ScheduleByTimeslotJump extends Component {\n render() {\n return (\n \n );\n }\n}\n\nScheduleByTimeslotJump.propTypes = {\n onClick: PropTypes.func // trigger the Date Picker;\n};\n","import React from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport TimeslotPopover from \"../timeslot-popover/timeslot-popover\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\n\nexport default function ScheduleByTimeslotSchedule(props) {\n return (\n \n {props.loaded === false ? (\n
\n\n \n
\n )}\n \n \n {props.timeslot}\n \n \n \n {util.timeSlots.map((timeslot, index) => (\n \n \n {timeslot}\n \n \n ))}\n \n
\n \n
\n\n \n
\n
\n \n
\n \n
\n
\n );\n}\n\nScheduleByTimeslotSchedule.propTypes = {\n schedule: PropTypes.array // array used to build the TABLE;\n};\n","import React, { Component } from \"react\";\nimport { browserHistory } from \"react-router\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport DatePicker from \"react-datepicker\";\nimport ScheduleByTimeslotButtons from \"./schedule-by-timeslot-buttons\";\nimport ScheduleByTimeslotJump from \"./schedule-by-timeslot-jump\";\nimport ScheduleByTimeslotSchedule from \"./schedule-by-timeslot-schedule\";\nimport moment from \"moment\";\nimport util from \"../util/util\";\n\nconst jQuery = window.jQuery;\n\nexport default class ScheduleByTimeslot extends Component {\n constructor(props) {\n super(props);\n\n this.state = this.returnInitialState(props);\n }\n\n componentDidMount() {\n this.mounted = true;\n\n this.getInterstitialsByTimeslot(this.state.dynamicDay, true);\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n componentWillReceiveProps(nextProps) {\n const callback = () => {\n this.getInterstitialsByTimeslot(this.state.dynamicDay, true);\n };\n\n this.setState(this.returnInitialState(nextProps), callback);\n }\n\n render() {\n return (\n | Day | \nPod | \n
|---|---|
| \n \n {moment(day.date).format(util.dateFormatHumanShort)}\n \n | \n\n {day.pod ? (\n | \n
\n
\n\n
\n\n
\n );\n }\n\n // use the same logic to set state (on load, on prop change);\n returnInitialState(props = {}) {\n const day = props.params.day || moment().format(util.dateFormatComputer);\n\n return {\n loaded: false, // is the schedule data ready to be displayed;\n schedule: this.generateEmptySchedule(day), // create an empty schedule array;\n urlDay: day, // record the original day for a link back to the daily schedule;\n dynamicDay: day, // display date for Date Picker;\n timeslot: props.params.timeslot || util.timeSlots[0] // timeslot to display schedule data for;\n };\n }\n\n // convert a date into a new date (and format);\n returnDay(date, daysToChange) {\n return moment(date)\n .add(daysToChange, `days`)\n .format(util.dateFormatComputer);\n }\n\n // returns an empty schedule we can now use;\n // insert Ajax content into it, or display as-is (on prop change);\n generateEmptySchedule(startDate) {\n const schedule = [];\n\n // loop through the next X days;\n for (let i = 0; i < util.daysPerTimeSlotPerPage; i = i + 1) {\n schedule.push({\n date: this.returnDay(startDate, i),\n pod: null,\n rule: null\n });\n }\n\n return schedule;\n }\n\n // get the schedule data to display;\n getInterstitialsByTimeslot(startDate, overwrite = false) {\n util\n .getInterstitialsByTimeslot(\n this.state.timeslot,\n startDate,\n util.daysPerTimeSlotPerPage\n )\n .then(data => {\n setTimeout(() => {\n const schedule = this.generateEmptySchedule(startDate);\n\n data.forEach(interstitial => {\n const date = moment(interstitial.airtime).format(\n util.dateFormatComputer\n );\n\n let index = null;\n\n // find the timeslot (if it exists);\n schedule.forEach((day, i) => {\n if (day.date === date) {\n index = i;\n }\n });\n\n // if a timeslot was found;\n if (index !== null) {\n // add the content to the timeslot;\n schedule[index].pod = interstitial.pod;\n schedule[index].rule = interstitial.rule;\n }\n });\n\n // only overwrite on init and propchage;\n const newSchedule = overwrite\n ? schedule\n : this.state.schedule.concat(schedule);\n\n this.mounted &&\n this.setState(\n {\n loaded: true,\n schedule: newSchedule\n },\n () => {\n // reset the button in case it's in a loading state;\n jQuery(`.btn--loadmore`).button(`reset`);\n }\n );\n }, util.delayList);\n });\n }\n\n // append more schedule data to the existing schedule;\n loadMore() {\n // put the button into a processing state;\n jQuery(`.btn--loadmore`).button(`loading`);\n\n this.setState(\n {\n dynamicDay: this.returnDay(\n this.state.dynamicDay,\n util.daysPerTimeSlotPerPage\n )\n },\n () => {\n this.getInterstitialsByTimeslot(this.state.dynamicDay);\n }\n );\n }\n}\n\nScheduleByTimeslot.propTypes = {\n params: PropTypes.object\n};\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport Dropzone from \"react-dropzone\";\nimport util from \"../util/util\";\nimport Tooltip from \"../tooltip/tooltip\";\n\nconst jQuery = window.jQuery;\n\nexport default function Settings(props) {\n const [dropbox, setDropbox] = useState(null);\n const [dropboxUrl, setDropboxUrl] = useState(\"\");\n const [stationId, setStationId] = useState(\"\");\n const [defaultStationLogo, setDefaultStationLogo] = useState(\"\");\n const [defaultStationAddress1, setDefaultStationAddress1] = useState(\"\");\n const [defaultStationAddress2, setDefaultStationAddress2] = useState(\"\");\n const [defaultStationTelephone, setDefaultStationTelephone] = useState(\"\");\n const [defaultStationWebsite, setDefaultStationWebsite] = useState(\"\");\n const [defaultCustomFooter, setDefaultCustomFooter] = useState(\"\");\n const [customizationsId, setCustomizationsId] = useState(0);\n const [customStationLogo, setCustomStationLogo] = useState(\"\");\n const [customStationAddress1, setCustomStationAddress1] = useState(\"\");\n const [customStationAddress2, setCustomStationAddress2] = useState(\"\");\n const [customStationTelephone, setCustomStationTelephone] = useState(\"\");\n const [customStationWebsite, setCustomStationWebsite] = useState(\"\");\n const [customCustomFooter, setCustomCustomFooter] = useState(\"\");\n const [showCustomizationsForm, setShowCustomizationsForm] = useState(false);\n const [uploadingStationLogo, setUploadingStationLogo] = useState(false);\n const [uploadingProgress, setUploadingProgress] = useState(0);\n const [savingCustomizations, setSavingCustomizations] = useState(false);\n const [deletingCustomizations, setDeletingCustomizations] = useState(false);\n\n useEffect(() => {\n getIntegrations();\n getInvoiceCustomizations();\n }, [props.params]);\n\n // get a list of the station integrations;\n // if a provider is supported, display it;\n const getIntegrations = () => {\n util\n .getIntegrations()\n .then(data => {\n data.forEach(integration => {\n if (integration.name === `dropbox`) {\n setDropboxUrl(integration.url);\n }\n });\n\n return util.getStationIntegrations();\n })\n .then(data => {\n data.results.forEach(integration => {\n if (integration.provider === `dropbox`) {\n setDropbox({\n id: integration.id,\n name: integration.provider_payload.account.display_name,\n email: integration.provider_payload.account.email,\n avatar: integration.provider_payload.account.photo_url\n });\n }\n });\n });\n };\n\n // get the Station data, from Station Manager or a custom inputted one:\n // making the call for the Custom data first, and if that doesn't exist,\n // making another call for the default Station data (easier in the backend like this)\n const getInvoiceCustomizations = () => {\n util.getInvoiceCustomizations().then(data => {\n const customizations = data.results[0];\n\n if (customizations) {\n setStationId(customizations.station);\n setDefaultStationLogo(customizations.station_logo);\n setDefaultStationAddress1(customizations.station_address_1);\n setDefaultStationAddress2(customizations.station_address_2);\n setDefaultStationTelephone(customizations.station_telephone);\n setDefaultStationWebsite(customizations.station_website);\n setDefaultCustomFooter(customizations.custom_footer);\n setCustomizationsId(customizations.id);\n setCustomStationLogo(\"\");\n setCustomStationAddress1(customizations.station_address_1);\n setCustomStationAddress2(customizations.station_address_2);\n setCustomStationTelephone(customizations.station_telephone);\n setCustomStationWebsite(customizations.station_website);\n setCustomCustomFooter(customizations.custom_footer);\n } else {\n util.getInvoiceDefaults().then(data => {\n setStationId(data.station);\n setDefaultStationLogo(data.station_logo);\n setDefaultStationAddress1(data.station_address_1);\n setDefaultStationAddress2(data.station_address_2);\n setDefaultStationTelephone(data.station_telephone);\n setDefaultStationWebsite(data.station_website);\n setDefaultCustomFooter(data.custom_footer);\n setCustomizationsId(0);\n setCustomStationLogo(\"\");\n setCustomStationAddress1(data.station_address_1);\n setCustomStationAddress2(data.station_address_2);\n setCustomStationTelephone(data.station_telephone);\n setCustomStationWebsite(data.station_website);\n setCustomCustomFooter(data.custom_footer);\n });\n }\n });\n };\n\n // remove the association between this station and a dropbox account;\n const deleteDropboxIntegration = id => {\n const title = `Remove Dropbox Integration`;\n const body = `\n
\n\n \n
\n \n
\n
\n Time Slot Schedule
\n\n\n
\n\n
\n Loading More Dates\"\n onClick={() => this.loadMore()}\n >\n \n Load More Dates\n \n\n
\n Are you sure you want to remove the Dropbox Integration for this station?
`;\n const buttonTextDefault = `Remove the Integration`;\n const buttonTextLoading = `Removing the Integration`;\n const iconClass = `fa-trash-o`;\n const $modal = util.renderModal(\n title,\n body,\n buttonTextDefault,\n buttonTextLoading,\n iconClass\n );\n const $confirmButton = $modal.find(`.btn-danger`);\n\n // remove the exception on confirmation of the modal;\n $confirmButton.one(`click`, () => {\n $confirmButton.button(`loading`);\n\n util\n .deleteDropboxIntegration(id)\n .fail(() => {\n setTimeout(() => {\n // reset the button on fail so it can be clicked again;\n $confirmButton.button(`reset`);\n }, util.delayForm);\n })\n .then(() => {\n setTimeout(() => {\n setDropbox(null);\n $modal.modal(`hide`);\n }, util.delayForm);\n });\n });\n\n // attach the modal to the DOM, and then show it;\n jQuery(`body`).append($modal);\n $modal.modal(`show`);\n };\n\n // removing the Invoice Customizations\n const deleteCustomizations = () => {\n // put the Delete button into a processing state;\n setDeletingCustomizations(true);\n\n // deleting the existing Customizations\n util.deleteInvoiceCustomizations(customizationsId).then(() => {\n // on success, put the button back and revert to the default values\n setDeletingCustomizations(false);\n getInvoiceCustomizations();\n });\n };\n\n // uploading a new Station Logo image\n const onStationLogoDrop = files => {\n const file = files[0];\n\n // fail safe\n if (!file) {\n return false;\n }\n\n // put the Save buttons into a disabled state until the upload is finished\n // and reset the progress indicator;\n setUploadingStationLogo(true);\n setUploadingProgress(0);\n\n // logoUrl isn't known yet, it will be determined in the response\n // from the Django server\n let logoUrl = ``;\n\n // getting the S3 pre-signed POST url\n const fileMetadata = {\n filename: file.name,\n filetype: file.type\n };\n util.getS3Url(fileMetadata).then(preSignedPost => {\n const s3Data = new FormData();\n const s3Url = preSignedPost.data.url;\n\n // saving the logoUrl (the s3 location created by Django,\n // where we'll then upload the image file)\n logoUrl = preSignedPost.url;\n\n // creating the data to be sent to s3 (Django pre-signed fields + image file)\n // - including all the 'pre-signed' fields\n for (const key in preSignedPost.data.fields) {\n s3Data.append(key, preSignedPost.data.fields[key]);\n }\n // - including the file\n s3Data.append(`file`, file);\n\n // add a progress callback;\n const progressCallback = () => {\n const xhr = new window.XMLHttpRequest();\n\n xhr.upload.addEventListener(\n `progress`,\n progressEvent => {\n if (progressEvent.lengthComputable) {\n const percentComplete = Math.ceil(\n (progressEvent.loaded / progressEvent.total) * 100\n );\n\n // update the progress indicator;\n setUploadingProgress(percentComplete);\n }\n },\n false\n );\n\n return xhr;\n };\n\n // uploading to s3\n util.saveFileToS3(s3Data, s3Url, progressCallback).then(() => {\n // on successful upload, saving the s3 url, and re-enabling the Save button\n setCustomStationLogo(logoUrl);\n setUploadingStationLogo(false);\n });\n });\n };\n\n // removing the custom customizations the user added\n const cancelCustomizations = () => {\n setShowCustomizationsForm(false);\n setCustomStationLogo(\"\");\n setCustomStationAddress1(defaultStationAddress1);\n setCustomStationAddress2(defaultStationAddress2);\n setCustomStationTelephone(defaultStationTelephone);\n setCustomStationWebsite(defaultStationWebsite);\n setCustomCustomFooter(defaultCustomFooter);\n };\n\n // saving the Invoice Customizations\n const saveCustomizations = () => {\n // put the Save buttons into a processing state;\n setSavingCustomizations(true);\n\n // preparing the data to sent to the backend\n const customizations = {\n id: customizationsId,\n station: stationId,\n station_logo: customStationLogo || defaultStationLogo,\n station_address_1: customStationAddress1,\n station_address_2: customStationAddress2,\n station_telephone: customStationTelephone,\n station_website: customStationWebsite,\n custom_footer: customCustomFooter\n };\n\n // saving the data (Post for Create or Put for Update)\n util\n .saveInvoiceCustomizations(customizations, customizationsId)\n .then(data => {\n // on successful Save updating the State with the inputted values\n // and clearing the form\n setStationId(data.station);\n setDefaultStationLogo(data.station_logo);\n setDefaultStationAddress1(data.station_address_1);\n setDefaultStationAddress2(data.station_address_2);\n setDefaultStationTelephone(data.station_telephone);\n setDefaultStationWebsite(data.station_website);\n setDefaultCustomFooter(data.custom_footer);\n setCustomizationsId(data.id);\n setCustomStationLogo(\"\");\n setCustomStationAddress1(data.station_address_1);\n setCustomStationAddress2(data.station_address_2);\n setCustomStationTelephone(data.station_telephone);\n setCustomStationWebsite(data.station_website);\n setCustomCustomFooter(data.custom_footer);\n setShowCustomizationsForm(false);\n setSavingCustomizations(false);\n });\n };\n\n return (\n\n
\n\n
\n\n
\n \n \n );\n}\n\nSettings.propTypes = {\n params: PropTypes.object\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport default function UserFormButtons(props) {\n return (\n \n
\n\n \n
\n Settings
\n\n\n
\n
\n\n \n {dropbox ? (\n
\n \n
\n ) : (\n Dropbox Integration
\n {dropbox.avatar ? (\n\n
\n ) : (\n \n
\n \n \n
\n
\n {dropbox.name}
\n{dropbox.email}
\n\n
\n )}\n\n {dropbox.name}
\n{dropbox.email}
\n\n
\n
\n )}\n {util.spotsAvailable() ? (\n Dropbox Integration
\n\n\n
\n
\n ) : (\n \n Integration with Dropbox will create a special folder in your\n Dropbox account, “PBS KIDS AIM”. This folder will\n contain two sub-folders called “pods” and\n “spots”.\n
\n\n Placing interstitial files in these folders will automatically\n upload them and create a pod or a spot with the same name as the\n file name. The file will then be moved to the\n “complete” or “failed” subfolder in your\n Dropbox folder.\n
\n\n Integration with Dropbox will create a special folder in your\n Dropbox account, “PBS KIDS AIM Pods”. Placing\n interstitial files in this folder will automatically upload them\n and create a pod with the same name as the file name. The file\n will then be removed from your Dropbox folder.\n
\n )}\n\n\n
\n
\n \n
\n\n \n
\n \n
\n Invoice Customizations
\n\n
\n \n {\n setShowCustomizationsForm(true);\n }}\n >\n \n Edit\n \n deleteCustomizations()}\n disabled={customizationsId === 0 ? true : \"\"}\n >\n {deletingCustomizations ? (\n \n \n \n Deleting\n \n ) : (\n \n \n Delete\n \n )}\n \n \n {customizationsId === 0 &&
\n \n
\n \n 
\n
\n \n Station Logo: \n
\n Station Address: \n
{defaultStationAddress1}
\n{defaultStationAddress2}
\n{defaultStationTelephone}
\n{defaultStationWebsite}
\n\n Custom Footer: \n
{defaultCustomFooter}
\n\n
\n \n
\n \n
\n Edit Invoice Customizations
\n\n
\n \n
\n
\n \n
\n ) : null}\n \n Station Logo: \n
\n onStationLogoDrop(files)}\n >\n
\n \n {uploadingStationLogo ? (\n \n \n {uploadingProgress}% Complete\n
\n \n
\n \n
\n \n Station Address: \n
\n \n {\n setCustomStationAddress1(event.target.value);\n }}\n >\n
\n \n \n {\n setCustomStationAddress2(event.target.value);\n }}\n >\n
\n \n \n {\n setCustomStationTelephone(event.target.value);\n }}\n >\n
\n \n \n {\n setCustomStationWebsite(event.target.value);\n }}\n >\n
\n \n
\n \n {\n setCustomCustomFooter(event.target.value);\n }}\n >\n
\n \n Custom Footer: \n
\n
\n \n
\n \n
\n
\n \n
\n
\n );\n}\n\nUserListTable.propTypes = {\n currentPage: PropTypes.number, // used to calc the # in the TABLE;\n onClickDeleteUser: PropTypes.func, // remove user from station;\n users: PropTypes.oneOfType([\n // user data to display;\n PropTypes.array,\n PropTypes.bool\n ])\n};\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router\";\nimport PropTypes from \"prop-types\";\nimport _ from \"lodash\";\nimport util from \"../util/util\";\nimport Pagination from \"../pagination/pagination\";\nimport UserListTable from \"./user-list-table\";\n\nconst jQuery = window.jQuery;\n\n// use the same logic to set state (on load, on prop change);\nconst returnInitialState = (props = {}) => ({\n page: Number(_.get(props, `params.page`, 1)), // page of users results;\n users: [] // users to display (will be populated by an Ajax call);\n});\n\nexport default class UserList extends Component {\n constructor(props) {\n super(props);\n\n this.state = returnInitialState(props);\n }\n\n componentDidMount() {\n this.mounted = true;\n\n this.getUsers();\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n componentWillReceiveProps(nextProps) {\n this.setState(returnInitialState(nextProps), this.getUsers);\n }\n\n render() {\n return (\n | # | \nName | \nRole | \nActivated | \nRemove User | \n|
|---|---|---|---|---|---|
| \n 0\n | \n{util.zeroUsersMessage} | \n||||
| \n | \n |||||
| \n \n {util.returnLineNumber(\n props.currentPage,\n util.userResultsPerPage,\n index\n )}\n \n | \n{user.user.name || N/A} | \n{user.user.email || N/A} | \n{user.group ? user.group.name : N/A} | \n{user.activated ? `Yes` : `No`} | \n\n | \n
\n
\n\n this.deleteUser(user)}\n users={this.state.users}\n />\n\n
\n );\n }\n\n // delete the user associated with this station;\n deleteUser(user) {\n const title = `Delete User from this Station`;\n const body = `\n
\n\n \n
\n Users
\n\n
\n \n
\n\n
Are you sure you want to delete the ${\n user.group ? user.group.name : `User`\n }: ${user.user.name}?
`;\n const buttonTextDefault = `Delete the User`;\n const buttonTextLoading = `Deleting the User`;\n const iconClass = `fa-trash-o`;\n const $modal = util.renderModal(\n title,\n body,\n buttonTextDefault,\n buttonTextLoading,\n iconClass\n );\n const $confirmButton = $modal.find(`.btn-danger`);\n\n // remove the user on confirmation of the modal;\n $confirmButton.one(`click`, () => {\n $confirmButton.button(`loading`);\n\n util\n .deleteUserFromStation(user.id)\n .fail(() => {\n setTimeout(() => {\n // reset the button on fail so it can be clicked again;\n $confirmButton.button(`reset`);\n }, util.delayForm);\n })\n .then(() => {\n // then load the users again (to update state);\n this.getUsers(() => {\n $modal.modal(`hide`);\n });\n });\n });\n\n // attach the modal to the DOM, and then show it;\n jQuery(`body`).append($modal);\n $modal.modal(`show`);\n }\n\n // get the users for this station;\n getUsers(callback = null) {\n util\n .getStationUsers({\n page: this.state.page\n })\n .then(data => {\n setTimeout(() => {\n this.mounted &&\n this.setState(\n {\n pageCount: Math.ceil(data.count / util.userResultsPerPage),\n users: data.results.length ? data.results : false\n },\n () => {\n // if a callback exists (hide modal), fire it;\n if (callback) {\n callback();\n }\n }\n );\n }, util.delayList);\n });\n }\n}\n\nUserList.propTypes = {\n params: PropTypes.object\n};\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Router, Route, browserHistory } from \"react-router\";\nimport * as Sentry from \"@sentry/browser\";\nimport util from \"../components/util/util\";\n\nimport \"./jquery-deparam\";\n\nimport FourOhFour from \"../components/404/404\";\nimport App from \"../components/app/app\";\nimport CampaignDetail from \"../components/campaign-detail/campaign-detail\";\nimport CampaignForm from \"../components/campaign-form/campaign-form\";\nimport CampaignList from \"../components/campaign-list/campaign-list\";\nimport ChangeLogByObj from \"../components/change-log-by-obj/change-log-by-obj\";\nimport ChangeLogByUser from \"../components/change-log-by-user/change-log-by-user\";\nimport ChangeLogList from \"../components/change-log-list/change-log-list\";\nimport ConflictForm from \"../components/conflict-form/conflict-form\";\nimport InviteForm from \"../components/invite-form/invite-form\";\nimport InviteList from \"../components/invite-list/invite-list\";\nimport Livestream from \"../components/livestream/livestream\";\nimport PodDetail from \"../components/pod-detail/pod-detail\";\nimport PodList from \"../components/pod-list/pod-list\";\nimport SpotDetail from \"../components/spot-detail/spot-detail\";\nimport SpotList from \"../components/spot-list/spot-list\";\nimport PodForm from \"../components/pod-form/pod-form\";\nimport SpotForm from \"../components/spot-form/spot-form\";\nimport Reports from \"../components/reports/reports\";\nimport RuleDetail from \"../components/rule-detail/rule-detail\";\nimport RuleForm from \"../components/rule-form/rule-form\";\nimport RuleList from \"../components/rule-list/rule-list\";\nimport ScheduleByDay from \"../components/schedule-by-day/schedule-by-day\";\nimport ScheduleByTimeslot from \"../components/schedule-by-timeslot/schedule-by-timeslot\";\nimport ScheduleByWeek from \"../components/schedule-by-week/schedule-by-week\";\nimport Settings from \"../components/settings/settings\";\nimport UserForm from \"../components/user-form/user-form\";\nimport UserList from \"../components/user-list/user-list\";\n\nconst jQuery = window.jQuery;\n\ndocument.addEventListener(`DOMContentLoaded`, () => {\n const onUpdate = () => {\n // do this immediately on route change;\n window.scrollTo(0, 0);\n jQuery(`.popover`).remove();\n\n // run these on a slight delay so the UX isn't jaring;\n setTimeout(() => {\n jQuery(`#page-header__collapse--account`).collapse(`hide`);\n jQuery(`#page-header__collapse--nav`).collapse(`hide`);\n }, util.delayList);\n };\n // initialize sentry\n const sentryDsns = {\n \"aim.console.pbs.org\":\n \"https://e0fe70ddef5e498ea05fa98664e11eac@o260369.ingest.sentry.io/5223056\",\n \"aim-staging.console.pbs.org\":\n \"https://5af4d0a5f0864d5fa6a1067f53e678ed@o260369.ingest.sentry.io/5223049\",\n defaults: \"\"\n };\n const sentry_dsn = sentryDsns[window.location.host] || sentryDsns.defaults;\n if (sentry_dsn) {\n Sentry.init({\n dsn: sentry_dsn\n });\n }\n\n ReactDOM.render(\n