Abilities.Add: Can clock on and off to dummy log #29.A

Extension/App/Popup.tsx

@@ -13,29 +13,36 @@ import SessionPunchClockView from '../View/SessionPunchClockView'
 // Browser extension popup widget.
 const Popup = () => {
   console.log('>Popup')
+  // Example:
   // Live Coding AStartupMCC #39.F Add: Can clock and off to dummy...
-  const [ConfigSync, ConfigSyncSet] = useState<ModelConfigSync | null>(ModelConfigSyncInit)
-  const [ConfigLocal, ConfigLocalSet] = useState<ModelConfigLocal | null>(ModelConfigLocalInit)
+  const [ConfigSync, ConfigSyncSet] = 
+    useState<ModelConfigSync | null>(ModelConfigSyncInit)
+  const [ConfigLocal, ConfigLocalSet] = 
+    useState<ModelConfigLocal | null>(ModelConfigLocalInit)
   const [Syndicate, SyndicateSet ] = useState({})
-
   const [IsSaving, IsSavingSet] = useState(false)
+
   useEffect(() => {
     console.log('[useEffect]')
     ModelConfigSyncGet().then(state => ConfigSyncSet(state))
     ModelConfigLocalGet().then(state => ConfigLocalSet(state))
     ModelSyndicateGet().then(state => SyndicateSet(state))
   }, [])
-  if (ConfigSync == null) return <div>Config == null</div>
+  if (ConfigLocal == null || ConfigSync == null) return <div>null</div>
+
   let { account, mission_ids, repo, session, session_ids } = ConfigSync
   if (session == undefined) return <div>Config members undefined</div>
 
   return <div className="flex flex-col w-full">
     <h1>Account: {account} #{Math.abs(session)}</h1>
     <h2>Repo: {repo}</h2>
-    <h3>Mission: #{mission_ids}</h3>
+    <h3>Mission: {mission_ids}</h3>
     <h4>Heading: {session_ids}</h4>
     <br/>
-    <SessionPunchClockView ConfigSync={ConfigSync} ConfigSyncSet={ConfigSyncSet} 
+    <SessionPunchClockView ConfigSync={ConfigSync} ConfigSyncSet={ConfigSyncSet}
+      ConfigLocal={ConfigLocal} ConfigLocalSet={ConfigLocalSet}
+      ModelConfigLocalSet={ModelConfigLocalSet}
+      ModelConfigSyncSet={ModelConfigSyncSet}
       IsSaving={IsSaving} Syndicate={Syndicate} />
   </div>
 }

Extension/Model/index.ts

@@ -19,10 +19,11 @@ export type ModelConfigSync = {
 
 // Local model configuration settings.
 export type ModelConfigLocal = {
+  account?: string            //< Selected account.
+  mission_ids?: string        //< Selected mission.
   modal_state: number         //< State of the modal.
   // Options
   modal_visible: boolean      //< Modal is visible flag.
-  mission: number             //< Selected mission number.
   repo?: string               //< Selected repo.
   session?: number            //< Selected session number.
 }
@@ -119,9 +120,10 @@ export const ModelConfigSyncInit: ModelConfigSync = {
 }
 
 export const ModelConfigLocalInit: ModelConfigLocal = {
+  account: '',
+  mission_ids: '',
   modal_visible: false,
   modal_state: 0,
-  mission: 0,
   repo: '',
   session: 0,
 }

Extension/View/MissionSelector.tsx

@@ -1,7 +1,7 @@
 // Copyright AStartup; license at https://github.com/AStarStartup/AStartupMCC
 
 import React from 'react'
-import { RepoGitHub, ModelConfigSync, ModelConfigSyncSet 
+import { ModelConfigSync, ModelConfigLocal, ModelConfigLocalSet 
 } from '../Model'
 
 const { LLIDNextHex } = require('linearid')
@@ -69,24 +69,24 @@ export function IssueIsSelected(issue_num_title: string, mission_number_string:
 }
 
 export default function MissionSelector(props: { 
-    ConfigSync    : ModelConfigSync
-    ConfigSyncSet: (o: ModelConfigSync) => void
+    ConfigLocal    : ModelConfigLocal
+    ConfigLocalSet: (o: ModelConfigLocal) => void
+    ModelConfigSyncSet : (config: ModelConfigSync) => Promise<void>
     Syndicate: object
   }) {
-
-  const { ConfigSync, ConfigSyncSet, Syndicate } = props
-  let { account, mission_ids, repo } = ConfigSync
+  const { ConfigLocal, ConfigLocalSet, Syndicate } = props
+  let { account, mission_ids, repo } = ConfigLocal
   console.log('MissionSelector: account:"' + account + '" repo:"' + repo
             + '" mission:"' + mission_ids + '"')
   console.log('Config:')
-  console.log(ConfigSync)
+  console.log(ConfigLocal)
   console.log("Syndicate:")
   console.log(Syndicate)
   console.log("repo:")
   console.log(repo)
 
   if(account == undefined || repo == undefined || mission_ids == undefined)
-    return <div>Config == null</div>
+    return <div>undefined</div>
 
   let [repos, issues] = ListReposAndIssues(Syndicate, account, repo)
 
@@ -96,7 +96,7 @@ export default function MissionSelector(props: {
       <select name="Accounts" id="Accounts" className='max-w-fit'
         onChange={(e) => {
           console.log("Changing Account:" + e.target.value)
-          ConfigSyncSet({...ConfigSync, account: e.target.value})
+          ConfigLocalSet({...ConfigLocal, account: e.target.value})
       }} value={account}>
       { Object.keys(Syndicate).map((key) => (
         <option value={key} key={LLIDNextHex()}>
@@ -111,9 +111,10 @@ export default function MissionSelector(props: {
       <select name="Repos" id="Repos" className='max-w-fit'
         onChange={e => {
           console.log("Changing Repo:" + e.target.value)
-          const ConfigNew = {...ConfigSync, account: ConfigSync.account, repo: e.target.value}
-          ModelConfigSyncSet(ConfigNew).then(() => {
-            ConfigSyncSet(ConfigNew)
+          const ConfigNew = {...ConfigLocal, account: ConfigLocal.account, 
+                             repo: e.target.value}
+          ModelConfigLocalSet(ConfigNew).then(() => {
+            ConfigLocalSet(ConfigNew)
           })
         }} value={repo}>
         { repos.map((key) => (
@@ -128,10 +129,10 @@ export default function MissionSelector(props: {
       <label htmlFor="Missions">Missions:</label>
       <select name="Missions" id="Missions" className='max-w-fit'
         onChange={(e) => {
-          console.log(e.target.value);
-          const ConfigNew = {...ConfigSync, mission_ids: e.target.value}
-          ModelConfigSyncSet(ConfigNew).then(() => {
-            ConfigSyncSet(ConfigNew)
+          console.log(e.target.value)
+          const ConfigNew = {...ConfigLocal, mission_ids: e.target.value}
+          ModelConfigLocalSet(ConfigNew).then(() => {
+            ConfigLocalSet(ConfigNew)
           })
         }} value={mission_ids}>
         { issues.map((issue_num_title) => (

Extension/View/SessionPunchClockView.tsx

@@ -3,21 +3,35 @@
 import React, { useState } from 'react'
 const { TimestampSeconds } = require('linearid')
 import MissionSelector from './MissionSelector'
-import { ModelConfigSync, ModelConfigSyncSet } from '../Model'
+import { ModelConfigLocal, ModelConfigLocalSet, ModelConfigSync,
+  ModelConfigSyncSet } from '../Model'
 
 export default function SessionPunchClockViewView(props: {
+  ConfigLocal   : ModelConfigLocal
+  ConfigLocalSet: (o: ModelConfigLocal) => void
   ConfigSync   : ModelConfigSync
   ConfigSyncSet: (o: ModelConfigSync) => void
+  ModelConfigLocalSet: (config: ModelConfigLocal) => Promise<void>
+  ModelConfigSyncSet : (config: ModelConfigSync) => Promise<void>
   IsSaving: boolean
   Syndicate: object
 }) {
-  const { ConfigSync, ConfigSyncSet, IsSaving, Syndicate } = props
+  const { ConfigLocal, ConfigLocalSet, ConfigSync, ConfigSyncSet, 
+    IsSaving, Syndicate } = props
   let { session } = ConfigSync
   if(session == undefined) return <div>undefined</div>
   const [MissionHeading, MissionHeadingSet] = useState('')
   const [SessionHeading, SessionHeadingSet] = useState('')
   const [SessionNumber, SessionNumberSet]   = useState(0)
 
+  const CanCancelMissionSwitch = ConfigLocal.account != ConfigSync.account ||
+    ConfigLocal.mission_ids != ConfigSync.mission_ids ||
+    ConfigLocal.repo != ConfigSync.repo
+
+    const OtherMissionSelected = ConfigLocal.account != ConfigSync.account &&
+      ConfigLocal.mission_ids != ConfigSync.mission_ids &&
+      ConfigLocal.repo != ConfigSync.repo
+
   function TimesheetPunchHandle () {
     if (session == undefined) return
     const Time = TimestampSeconds()
@@ -95,7 +109,29 @@ export default function SessionPunchClockViewView(props: {
       />
     </div>
     }
-    <MissionSelector ConfigSync={ConfigSync} ConfigSyncSet={ConfigSyncSet} 
+    <MissionSelector ConfigLocal={ConfigLocal} ConfigLocalSet=
+      {ConfigLocalSet} ModelConfigSyncSet={ModelConfigSyncSet}
       Syndicate={Syndicate} />
+    { CanCancelMissionSwitch &&  
+    <button onClick={() => {
+      const ConfigNew = { ...ConfigLocal, account: ConfigSync.account, 
+        repo: ConfigSync.repo, mission_ids: ConfigSync.mission_ids }
+      console.log('')
+      ConfigLocalSet(ConfigNew)
+      ModelConfigLocalSet(ConfigNew)
+    }}>Cancel</button>
+    }
+    { OtherMissionSelected && 
+    <button onClick={() => {
+      const Timestamp = TimestampSeconds()
+      let {account, mission_ids, repo} = ConfigLocal
+      const ConfigNew = { ...ConfigSync, account: account, 
+        repo: repo, mission_ids: mission_ids }
+      console.log(new Date(Timestamp * 1000) + ': Starting mission ' + account + '/' + repo + mission_ids)
+      ConfigSyncSet(ConfigNew)
+      ModelConfigSyncSet(ConfigNew)
+    }}>Start mission</button>
+    }
+
   </div>
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astartup-mcc",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Mission-driven development startup control center Chrome extension and OBS live coding, timesheet logging, employee monitoring, and video creation tool with IMUL, Script2, and pen and paper.",
   "main": "index.js",
   "scripts": {