add initial fully-featured building editor

Author: hawkrives

source/navigation.js

@@ -17,6 +17,8 @@ import JobDetailView from './views/sis/student-work/detail'
 import {
   BuildingHoursView,
   BuildingHoursDetailView,
+  BuildingHoursProblemReportView,
+  BuildingHoursScheduleEditorView,
 } from './views/building-hours'
 import TransportationView from './views/transportation'
 import SettingsView from './views/settings'
@@ -34,6 +36,8 @@ export const AppNavigator = StackNavigator(
     HomeView: {screen: HomeView},
     BuildingHoursDetailView: {screen: BuildingHoursDetailView},
     BuildingHoursView: {screen: BuildingHoursView},
+    BuildingHoursProblemReportView: {screen: BuildingHoursProblemReportView},
+    BuildingHoursScheduleEditorView: {screen: BuildingHoursScheduleEditorView},
     CalendarView: {screen: CalendarView},
     ContactsView: {screen: ContactsView},
     CreditsView: {screen: CreditsView},

source/views/building-hours/index.js

@@ -2,3 +2,7 @@
 
 export {BuildingHoursView} from './stateful-list'
 export {BuildingHoursDetailView} from './detail'
+export {
+  BuildingHoursProblemReportView,
+  BuildingHoursScheduleEditorView,
+} from './report'

source/views/building-hours/lib/blank-schedule.js

@@ -0,0 +1,3 @@
+// @flow
+
+export const blankSchedule = () => ({days: [], from: '9:00am', to: '5:00pm'})

source/views/building-hours/lib/index.js

@@ -7,3 +7,5 @@ export {formatBuildingTimes} from './format-times'
 export {summarizeDays} from './summarize-days'
 export {isScheduleOpenAtMoment} from './is-schedule-open'
 export {getDayOfWeek} from './get-day-of-week'
+export {parseHours} from './parse-hours'
+export {blankSchedule} from './blank-schedule'

source/views/building-hours/report/editor.js

@@ -0,0 +1,259 @@
+/**
+ * @flow
+ *
+ * An editor for individual building schedules.
+ */
+
+import React from 'react'
+import xor from 'lodash/xor'
+import fromPairs from 'lodash/fromPairs'
+import {ScrollView, Text, StyleSheet} from 'react-native'
+import moment from 'moment-timezone'
+import {TableView, Section, Cell} from 'react-native-tableview-simple'
+import type {SingleBuildingScheduleType, DayOfWeekEnumType} from '../types'
+import {Row} from '../../components/layout'
+import type {TopLevelViewPropsType} from '../../types'
+import {parseHours, blankSchedule} from '../lib'
+import * as c from '../../components/colors'
+import DatePicker from 'react-native-datepicker'
+import {Touchable} from '../../components/touchable'
+import {DeleteButtonCell} from '../../components/cells/delete-button'
+
+export class BuildingHoursScheduleEditorView extends React.PureComponent {
+  static navigationOptions = {
+    title: 'Edit Schedule',
+  }
+
+  state: {
+    set: ?SingleBuildingScheduleType,
+  } = {
+    set: this.props.navigation.state.params.initialSet,
+  }
+
+  props: TopLevelViewPropsType & {
+    navigation: {
+      state: {
+        params: {
+          set: SingleBuildingScheduleType,
+          onEditSet: (set: SingleBuildingScheduleType) => any,
+          onDeleteSet: () => any,
+        },
+      },
+    },
+  }
+
+  delete = () => {
+    this.props.navigation.state.params.onDeleteSet()
+  }
+
+  onChangeDays = (newDays: DayOfWeekEnumType[]) => {
+    this.setState(
+      state => ({...state, set: {...state.set, days: newDays}}),
+      () => this.props.navigation.state.params.onEditSet(this.state.set),
+    )
+  }
+
+  onChangeOpen = (newDate: moment) => {
+    this.setState(
+      state => ({...state, set: {...state.set, from: newDate.format('h:mma')}}),
+      () => this.props.navigation.state.params.onEditSet(this.state.set),
+    )
+  }
+
+  onChangeClose = (newDate: moment) => {
+    this.setState(
+      state => ({...state, set: {...state.set, to: newDate.format('h:mma')}}),
+      () => this.props.navigation.state.params.onEditSet(this.state.set),
+    )
+  }
+
+  render() {
+    const set = this.state.set || blankSchedule()
+
+    const {open, close} = parseHours(set, moment())
+
+    return (
+      <ScrollView>
+        <TableView>
+          <Section header="DAYS">
+            <WeekToggles days={set.days} onChangeDays={this.onChangeDays} />
+          </Section>
+
+          <Section header="TIMES">
+            <DatePickerCell
+              title="Open"
+              date={open}
+              onChange={this.onChangeOpen}
+            />
+            <DatePickerCell
+              title="Close"
+              date={close}
+              onChange={this.onChangeClose}
+            />
+          </Section>
+
+          <Section>
+            <DeleteButtonCell title="Delete Hours" onPress={this.delete} />
+          </Section>
+        </TableView>
+      </ScrollView>
+    )
+  }
+}
+
+class WeekToggles extends React.PureComponent {
+  props: {days: DayOfWeekEnumType[], onChangeDays: (DayOfWeekEnumType[]) => any}
+
+  toggleDay = day => {
+    this.props.onChangeDays(xor(this.props.days, [day]))
+  }
+
+  render() {
+    const allDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
+
+    return (
+      <Row justifyContent="center">
+        {allDays.map((day, i) =>
+          <ToggleButton
+            key={day}
+            text={day}
+            active={this.props.days.includes(day)}
+            onPress={this.toggleDay}
+            style={i === allDays.length - 1 && styles.finalCell}
+          />,
+        )}
+      </Row>
+    )
+  }
+}
+
+class ToggleButton extends React.PureComponent {
+  props: {
+    active: boolean,
+    text: string,
+    onPress: (newState: string) => any,
+    style?: any,
+  }
+
+  onPress = () => this.props.onPress(this.props.text)
+
+  render() {
+    const {text, style, active} = this.props
+    return (
+      <Touchable
+        highlight={false}
+        containerStyle={[style, styles.dayWrapper, active && styles.activeDay]}
+        onPress={this.onPress}
+      >
+        <Text style={[styles.dayText, active && styles.activeDayText]}>
+          {text}
+        </Text>
+      </Touchable>
+    )
+  }
+}
+
+class DatePickerCell extends React.PureComponent {
+  props: {
+    date: moment,
+    title: string,
+    onChange?: (date: moment) => any,
+    _ref?: (ref: any) => any,
+  }
+
+  _picker: any
+  openPicker = () => {} //this._picker.onPressDate()
+
+  setRef = (ref: any) => {
+    this._picker = ref
+    this.props._ref && this.props._ref(ref)
+  }
+
+  onChange = (newDate: moment) => {
+    console.log(newDate)
+    this.props.onChange && this.props.onChange(newDate)
+  }
+
+  render() {
+    const {date, title} = this.props
+    const accessory = (
+      <Date ref={this.setRef} date={date.toDate()} onChange={this.onChange} />
+    )
+
+    return (
+      <Cell
+        title={title}
+        cellStyle="RightDetail"
+        cellAccessoryView={accessory}
+        onPress={this.openPicker}
+      />
+    )
+  }
+}
+
+const Date = ({date, onChange}) => {
+  const format = 'h:mma'
+
+  const callback = (newDateString: string) => {
+    const oldMoment = moment(date)
+    const newMoment = moment(newDateString, format)
+
+    oldMoment.hours(newMoment.hours())
+    oldMoment.minutes(newMoment.minutes())
+
+    onChange(oldMoment)
+  }
+
+  return (
+    <DatePicker
+      date={date}
+      style={styles.datePicker}
+      mode="time"
+      format={format}
+      is24Hour={false}
+      confirmBtnText="Confirm"
+      cancelBtnText="Cancel"
+      showIcon={false}
+      onDateChange={callback}
+      customStyles={{
+        dateInput: styles.datePickerInput,
+        dateText: styles.datePickerText,
+      }}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  dayWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 2,
+    backgroundColor: c.white,
+    borderRightWidth: StyleSheet.hairlineWidth,
+    borderRightColor: c.iosSeparator,
+  },
+  finalCell: {
+    borderRightWidth: 0,
+  },
+  activeDay: {
+    backgroundColor: c.brickRed,
+  },
+  dayText: {
+    fontSize: 16,
+  },
+  activeDayText: {
+    color: c.white,
+  },
+  datePicker: {
+    width: null,
+  },
+  datePickerInput: {
+    flex: 0,
+    borderWidth: 0,
+  },
+  datePickerText: {
+    color: c.iosDisabledText,
+    fontSize: 16,
+  },
+})