Issue28

Extension/App/Options.tsx

@@ -0,0 +1,126 @@
+// Copyright AStartup; license at https://github.com/AStarStartup/AStartupMCC
+
+import React, { useEffect, useReducer, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ClockIcon, GearIcon } from '../View/Icons'
+import { Tooltip } from '../View/Primitives'
+
+import {
+  CommandStructureInit, ModelConfigSync,
+  ModelConfigSyncGet,
+  ModelConfigSyncInit
+} from '../Model'
+import TimesheetsView from '../View/Timesheets'
+import SettingsEditor from '../View/SettingsView'
+
+export function OptionsView () {
+  console.log('[OptionsView].Begin')
+
+  enum Modes {
+    CentralCommand,
+    Estuary,
+    Init,
+    Intake,
+    Loading,
+    MissionControl,
+    Post,
+    Settings,
+    Timesheets
+  }
+
+  const SettingsDispatcher = (state, action) => {
+    let type = action.type
+    console.log('[OptionsView.ReduceState]: ' + type)
+    switch (type) {
+      case null: return state
+      case 'Options':
+        return state.map((state_prior) => {
+          ///if (state_prior.id === action.id) {
+          ///  return { ...state_prior, complete: !state_prior.complete };
+          ///} else {
+          ///  return state_prior;
+          ///}
+          return state_prior
+        })
+        case 'OptionsUsernameSet':
+          return state.map((state_prior) => {
+
+          })
+      default: return state
+    }
+  };
+
+  const [CommandStructure, CommandStructureSet] = 
+    useState(CommandStructureInit)
+  //const [Visible, VisibleSet] = useState(false) //???
+  const [State, StateSet] = useState(0)
+  const [IsSaving, IsSavingSet] = useState(false)
+  const [Mode, ModeSet] = useState(Modes.Settings)
+  const [Config, ConfigSet] = 
+    useState<ModelConfigSync | null>(ModelConfigSyncInit)
+
+  const SaveButtonStyles = 'block mt-10 border-none outline-none'
+                         + 'rounded-md p-4 bg-violet-500 font-bold'
+                         + 'cursor-pointer';
+
+  useEffect(() => {
+    console.log('[useEffect]')
+    ModelConfigSyncGet().then(options_new => ConfigSet(options_new))
+  }, [])
+
+  const SettingsReducer = (action) => {
+    return SettingsDispatcher(Config, action)
+  }
+  const [AppState, Dispatch] = useReducer(SettingsReducer, { prop1: null, prop2: null})
+
+  if (Config == null || Config == undefined) return null
+
+  return (
+    <div id='Root'>
+      <div id='RootMidground' />
+      <div id='RootForeground' />
+      <div id='RootBackground'>
+        <div id='SPAHeader'>
+          <img id='PageImage' src='./Icon128.png' />
+          <div>
+        </div>
+        <div id='SPAToolbar' className='flex flex-row inline'>
+          { Mode == Modes.Timesheets &&
+            <Tooltip title="Timesheets">
+              <button><ClockIcon />Timesheets</button>
+            </Tooltip>
+          }{ Mode != Modes.Timesheets &&
+            <Tooltip title="Timesheets">
+              <button onClick={() => ModeSet(Modes.Timesheets)}>
+                <ClockIcon />Timesheets</button>
+            </Tooltip>
+          }{ Mode == Modes.Settings &&
+            <Tooltip title="Settings">
+              <button><GearIcon />Settings</button>
+            </Tooltip>
+          }{ Mode != Modes.Settings &&
+            <Tooltip title="Settings">
+              <button onClick={() => ModeSet(Modes.Settings)}>
+                <GearIcon />Settings</button>
+            </Tooltip>
+          }
+        </div>
+        <div id='SPAMain' className=''>
+          { Mode == Modes.Timesheets &&
+              <TimesheetsView />
+          }{ Mode == Modes.Settings &&
+            <SettingsEditor dispatch={SettingsReducer} 
+              is_saving={IsSaving} 
+            />
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+  )
+}
+
+const container = document.createElement('div')
+document.body.appendChild(container)
+const root = createRoot(container)
+root.render(<OptionsView />)

Extension/App/Popup.tsx

@@ -0,0 +1,131 @@
+// Copyright AStartup; license at https://github.com/AStarStartup/AStartupMCC
+
+import React, { useEffect, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import {
+  ModelConfigSync, ModelConfigSyncGet,
+  ModelConfigSyncInit,
+  ModelConfigSyncSet,
+  ModelSyndicateGet
+} from '../Model'
+import MissionSelector from '../View/MissionSelector'
+const { TimestampSeconds } = require('linearid')
+
+function SessionNumberChange(session_number: number, config: ModelConfigSync) {
+  if(session_number < 0) return
+  ModelConfigSyncSet({ ...config, session: session_number })
+}
+
+// Browser extension popup widget.
+const Popup = () => {
+  console.log('>Popup')
+  // Live Coding AStartupMCC #39.F Add: Can clock and off to dummy...
+  const [Config, ConfigSet] = useState<ModelConfigSync | null>(ModelConfigSyncInit)
+  const [MissionHeading, MissionHeadingSet] = useState('')
+  const [SessionHeading, SessionHeadingSet] = useState('')
+  const [Syndicate, SyndicateSet ] = useState({})
+
+  const [IsSaving, IsSavingSet] = useState(false)
+  useEffect(() => {
+    console.log('[useEffect]')
+    ModelConfigSyncGet().then(options_new => ConfigSet(options_new))
+    ModelSyndicateGet().then(syndicate_new => SyndicateSet(syndicate_new))
+  }, [])
+  if (Config == null) return <div>Config == null</div>
+  let { account, mission, mission_ids, repo, session, session_ids } = Config
+  if (session == undefined) return <div>Config members undefined</div>
+  const [SessionNumber, SessionNumberSet] = useState(0)
+
+  function MissionHeadingUpdate (focus_headline: string) {
+    MissionHeadingSet(focus_headline)
+  }
+
+  function SessionHeadingUpdate (focus_headline: string) {
+    SessionHeadingSet(focus_headline)
+  }
+
+  function TimesheetPunchHandle () {
+    if (session == undefined) return
+    const Time = TimestampSeconds()
+    const TimeText = new Date(Time * 1000)
+    if(session == 0) { // End Session
+      console.log('Clocking on to Session #' + SessionNumber + ' at ' + TimeText)
+      //@todo Integrate with GitHub to create Session Tickets.
+      const ConfigNew = {...(Config as ModelConfigSync), session: SessionNumber}
+      ModelConfigSyncSet(ConfigNew)
+      ConfigSet(ConfigNew)
+    } else if (session < 0) { // Stop Break
+      const S = -session
+      console.log('Stopping break from Session #' + S + ' at ' + TimeText)
+      const ConfigNew = {...(Config as ModelConfigSync), session: S}
+      ModelConfigSyncSet(ConfigNew)
+      ConfigSet(ConfigNew)
+    } else { // -> Session > 0
+      console.log('Clocking off from Session #' + session + ' at ' + TimeText)
+      const ConfigNew = {...(Config as ModelConfigSync), session: 0}
+      ModelConfigSyncSet(ConfigNew)
+      ConfigSet(ConfigNew)
+    }
+  }
+
+  function TimesheetBreakStartHandle () {
+    if (session == undefined) return
+    let time = TimestampSeconds()
+    console.log('Starting break from Session #' + session + ' at ' + new Date(time * 1000))
+    const ConfigNew = {...(Config as ModelConfigSync), session: -session}
+    ModelConfigSyncSet(ConfigNew)
+    ConfigSet(ConfigNew)
+  }
+
+  return <div className="flex flex-col w-full">
+    <MissionSelector Config={Config} ConfigSet={ConfigSet} 
+      Syndicate={Syndicate} />
+    <br/>
+    <h1>Account: {account} #{Math.abs(session)}</h1>
+    <h2>Repo: {repo}</h2>
+    <h3>Mission: #{Math.abs(mission)}</h3>
+    <h4>Heading: {session_ids ?? '' + mission_ids}</h4>
+    <div className='flex flex-row m-4'>
+      { session == 0 && <>
+        <input id='ClockOnOffButton' type="button" value="Begin Session" onClick={TimesheetPunchHandle} />
+        <input
+          id='SessionNumberInput'
+          type='number'
+          value={SessionNumber}
+          onChange={ event => SessionNumberSet(event.target.valueAsNumber) }
+          disabled={ IsSaving }
+        />
+        </>
+      }
+      { session > 0 && <>
+        <input id='ClockBreakOnOffButton' type="button" value="End Session" onClick={TimesheetPunchHandle} />
+        <input id='TimesheetBreakButton' type="button" value="Start Break" onClick={TimesheetBreakStartHandle} />
+      </>}
+      { session < 0 &&
+        <input id='ClockBreakOnOffButton' type="button" value="Stop break" onClick={TimesheetPunchHandle} />
+      }
+      { session == 0 &&  <div>
+        <span>Session and Mission Heading:</span>
+        <input type='text' placeholder=
+            "Enter #SID and heading..."
+          value={ SessionHeading }
+          onChange={ (event) => SessionHeadingUpdate(event.target.value) }
+          disabled={ IsSaving }
+        />
+        <span>Mission heading:</span>
+        <input type='text' placeholder=
+            "Enter mission heading..."
+          value={ MissionHeading }
+          onChange={ (event) => MissionHeadingUpdate(event.target.value) }
+          disabled={ IsSaving }
+        />
+      </div>
+      }
+    </div>
+  </div>
+}
+
+const container = document.createElement('div')
+document.body.appendChild(container)
+const root = createRoot(container)
+root.render(<Popup />)

Extension/Ctlr/Background.ts

@@ -1,7 +1,7 @@
 // Copyright AStartup; license at https://github.com/AStarStartup/AStartupMCC
 
-import { CommandStructureInit, CommandStructureSet, ModelConfigInit, 
-ModelConfigGet, ModelConfigSet, ModelIssueInit, ModelIssueSet, 
+import { CommandStructureInit, CommandStructureSet, ModelConfigSyncInit, 
+ModelConfigSyncGet, ModelConfigSyncSet, ModelIssueInit, ModelIssueSet, 
 ModelMissionInit, ModelMissionSet, ModelSessionInit, ModelSessionSet,
 ModelSyndicateInit, ModelSyndicateSet } from '../Model'
 
@@ -25,7 +25,7 @@ chrome.alarms.onAlarm.addListener((alarm) => {
 // @todo Inspect video timestamp 3:38:30 for spooky shit.
 
 chrome.runtime.onInstalled.addListener(() => {
-  ModelConfigSet(ModelConfigInit)
+  ModelConfigSyncSet(ModelConfigSyncInit)
   CommandStructureSet(CommandStructureInit)
   ModelIssueSet(ModelIssueInit)
   ModelMissionSet(ModelMissionInit)

Extension/Model/Chrome.ts

@@ -0,0 +1 @@
+// Copyright AStartup; license at https://github.com/AStartupMCC

Extension/Model/Firefox.ts

@@ -0,0 +1,2 @@
+// Copyright AStartup; license at https://github.com/AStartupMCC
+