Integration Branch (testing-102)

src/js/api.js

@@ -41,10 +41,24 @@ class API {
   error(path, xhr) {
     let msg
 
+    // Try to get message from JSON response (responseType is 'json')
     if (xhr.responseType == 'json' && xhr.response && xhr.response.message)
       msg = xhr.response.message
 
-    else if (xhr.statusText) msg = xhr.statusText
+    // For empty or text responseType, try to parse responseText as JSON
+    else if (xhr.responseType == '' || xhr.responseType == 'text') {
+      if (xhr.responseText) {
+        try {
+          let response = JSON.parse(xhr.responseText)
+          if (response && response.message) msg = response.message
+        } catch (e) {
+          // Not valid JSON, fall through
+        }
+      }
+    }
+
+    // Fallback to status text
+    if (!msg && xhr.statusText) msg = xhr.statusText
 
     if (!msg) msg = 'API Error: ' + path
 

src/js/app.js

@@ -45,9 +45,22 @@ module.exports = new Vue({
       config: {
         settings: {units: 'METRIC'},
         motors: [{}, {}, {}, {}],
+        tool: {},  // FIX: Initialize tool config for reactivity
         version: '<loading>'
       },
-      state: {messages: []},
+      // FIX: Initialize state properties for Vue 1.x reactivity
+      // Properties must exist before Vue processes the component
+      state: {
+        messages: [],
+        service_due_count: 0,
+        s: 0,           // Spindle speed - needed for popupMessagesHeader reactivity
+        xx: '',         // Machine state
+        line: 0,        // Current line
+        v: 0,           // Velocity
+        feed: 0,        // Feed rate
+        speed: 0,       // Programmed speed
+        tool: 0         // Current tool
+      },
       crosshair: cookie.get_bool('crosshair', false),
       selected_program: new Program(this.$api, cookie.get('selected-path')),
       active_program: undefined,
@@ -56,7 +69,14 @@ module.exports = new Vue({
       errorMessage: '',
       checkedUpgrade: false,
       latestVersion: '',
-      webGLSupported: util.webgl_supported()
+      webGLSupported: util.webgl_supported(),
+      // Track if we've initialized after connect
+      initialized: false,
+      // Alert dismissal state (session-based, resets on browser close)
+      upgrade_dismissed: sessionStorage.getItem('upgrade_dismissed') === 'true',
+      service_dismissed: sessionStorage.getItem('service_dismissed') === 'true',
+      // Fullscreen state
+      is_fullscreen: false
     }
   },
 
@@ -69,6 +89,8 @@ module.exports = new Vue({
     'view-editor':    require('./view-editor'),
     'view-settings':  require('./view-settings'),
     'view-files':     require('./view-files'),
+    'view-macros':    require('./view-macros'),
+    'view-service':   require('./view-service'),
     'view-camera':    {template: '#view-camera-template'},
     'view-docs':      require('./view-docs')
   },
@@ -78,15 +100,50 @@ module.exports = new Vue({
     crosshair() {cookie.set_bool('crosshair', this.crosshair)},
 
 
-    'state.active_program'() {
-      let path = this.state.active_program
-      if (!path || path == '<mdi>') this.active_program = undefined
-      else new Program(this.$api, path)
+    // Watch for active_program changes from server
+    // Only update the active_program object - don't clear selected_program here
+    // (selected_program should persist through macro runs)
+    'state.active_program'(path) {
+      if (!path || path == '<mdi>') {
+        this.active_program = undefined
+      } else {
+        this.active_program = new Program(this.$api, path)
+      }
+    },
+
+
+    // Watch for e-stop state to clear programs
+    'state.xx'(state) {
+      if (state == 'ESTOPPED') {
+        // Clear programs on e-stop for safety
+        this.clear_selected_program()
+      }
     },
 
 
     'state.first_file'(value) {
-      if (!this.selected_program.path) this.select_path(value)
+      // Only auto-select first file if we have no selection
+      if (!this.selected_program.path && value) {
+        this.select_path(value)
+      }
+    },
+
+
+    // Reset upgrade dismissal when version changes
+    latestVersion(newVersion, oldVersion) {
+      if (oldVersion && newVersion !== oldVersion) {
+        this.upgrade_dismissed = false
+        sessionStorage.removeItem('upgrade_dismissed')
+      }
+    },
+
+
+    // Reset service dismissal when due count changes (new items become due)
+    'state.service_due_count'(newCount, oldCount) {
+      if (oldCount !== undefined && newCount > oldCount) {
+        this.service_dismissed = false
+        sessionStorage.removeItem('service_dismissed')
+      }
     }
   },
 
@@ -116,12 +173,16 @@ module.exports = new Vue({
 
     async connected() {
       await this.update()
-      this.parse_hash()
-    },
-
-
-    async update() {
-      await this.update()
+
+      // On initial connection, check if server has no active program
+      // and clear our cached selection to sync with server state
+      if (!this.initialized) {
+        this.initialized = true
+        if (!this.state.active_program) {
+          this.clear_selected_program()
+        }
+      }
+
       this.parse_hash()
     },
 
@@ -160,9 +221,46 @@ module.exports = new Vue({
     },
 
 
+    // Dynamic header for GCode messages modal showing spindle speed
+    // Shows real-time spindle speed during M0 pause when tool is configured
+    popupMessagesHeader() {
+      let header = 'GCode Messages'
+
+      // FIX: Read state.s BEFORE conditional to ensure Vue 1.x dependency tracking
+      // If state.s is only read inside the conditional, Vue won't re-evaluate
+      // the computed property when state.s changes (if condition was initially false)
+      let speed = parseFloat(this.state.s)
+
+      // Show spindle speed when tool is configured (not Disabled)
+      let toolType = this.config.tool && this.config.tool['tool-type']
+      if (toolType && toolType !== 'Disabled' && !isNaN(speed)) {
+        header += ' - Spindle: ' + Math.round(speed) + ' RPM'
+      }
+
+      return header
+    },
+
+
     show_upgrade() {
       if (!this.latestVersion) return false
       return util.compare_versions(this.config.version, this.latestVersion) < 0
+    },
+
+
+    show_upgrade_alert() {
+      return this.show_upgrade && !this.upgrade_dismissed
+    },
+
+
+    show_service_alert() {
+      let count = this.state.service_due_count || 0
+      return count > 0 && !this.service_dismissed
+    },
+
+
+    camera_available() {
+      // Only show camera if backend explicitly says it's available
+      return this.state.camera_available === true
     }
   },
 
@@ -193,10 +291,27 @@ module.exports = new Vue({
     }
 
     this.check_login()
+
+    // Listen for fullscreen changes (e.g., user presses Escape)
+    document.addEventListener('fullscreenchange', () => {
+      this.is_fullscreen = !!document.fullscreenElement
+    })
   },
 
 
   methods: {
+    dismiss_upgrade() {
+      this.upgrade_dismissed = true
+      sessionStorage.setItem('upgrade_dismissed', 'true')
+    },
+
+
+    dismiss_service() {
+      this.service_dismissed = true
+      sessionStorage.setItem('service_dismissed', 'true')
+    },
+
+
     async check_login() {
       this.authorized = await this.$api.get('auth/login')
     },
@@ -370,14 +485,40 @@ module.exports = new Vue({
     },
 
 
-    select_path(path) {
+    // Clear selected program and cookie
+    clear_selected_program() {
+      cookie.set('selected-path', '')
+      this.selected_program = new Program(this.$api, '')
+      // Broadcast that program was cleared so views can update
+      this.$broadcast('program-cleared')
+    },
+
+
+    // Handle re-selecting same path to ensure fresh file content
+    select_path(path, force) {
       if (path && this.selected_program.path != path) {
         cookie.set('selected-path', path)
         this.selected_program = new Program(this.$api, path)
+      } else if (path && force) {
+        // Same path but force refresh - invalidate cached data
+        this.selected_program.invalidate()
       }
 
       return this.selected_program
     },
+
+
+    // Reload current program - creates new instance to force fresh fetch
+    // Used after file upload to ensure new content is displayed
+    reload_selected_program() {
+      if (this.selected_program && this.selected_program.path) {
+        let path = this.selected_program.path
+        // Create new Program instance - guarantees fresh data fetch
+        this.selected_program = new Program(this.$api, path)
+        // Broadcast to trigger reload in view-control
+        this.$broadcast('program-reloaded')
+      }
+    },
 
 
     edit(path) {
@@ -389,6 +530,23 @@ module.exports = new Vue({
     view(path) {
       this.select_path(path)
       location.hash = 'viewer'
+    },
+
+
+    toggle_fullscreen() {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen().then(() => {
+          this.is_fullscreen = true
+        }).catch(err => {
+          console.warn('Fullscreen request failed:', err)
+        })
+      } else {
+        document.exitFullscreen().then(() => {
+          this.is_fullscreen = false
+        }).catch(err => {
+          console.warn('Exit fullscreen failed:', err)
+        })
+      }
     }
   }
 })

src/js/axis-control.js

@@ -29,17 +29,23 @@
 
 module.exports = {
   template: '#axis-control-template',
-  props: ['axes', 'colors', 'enabled', 'adjust', 'step'],
+  props: ['axes', 'colors', 'enabled', 'adjust', 'step', 'disabled'],
 
 
   methods: {
     jog(axis, ring, direction) {
+      // Prevent jogging when disabled (e.g., program is running)
+      if (this.disabled) return
+
       let value = direction * this.value(ring)
       this.$dispatch(this.step ? 'step' : 'jog', this.axes[axis], value)
     },
 
 
     release(axis) {
+      // NOTE: Do NOT check this.disabled here!
+      // When jog starts, machine state changes to JOGGING, which sets disabled=true.
+      // If we check disabled here, the stop command (jog 0) never gets sent.
       if (!this.step) this.$dispatch('jog', this.axes[axis], 0)
     },
 

src/js/axis-row.js

@@ -29,7 +29,7 @@
 module.exports = {
   template: '#axis-row-template',
   replace: true,
-  props: ['axis'],
+  props: ['axis', 'showOffset', 'showAbsolute', 'showState'],
 
 
   data() {

src/js/axis-vars.js

@@ -111,16 +111,22 @@ module.exports = {
       let enabled    = typeof motor.enabled != 'undefined' && motor.enabled
       let homingMode = motor['homing-mode']
       let homed      = this.state[motor_id + 'homed']
+      let referenced = this.state[motor_id + 'referenced']
       let min        = this.state[motor_id + 'tn']
       let max        = this.state[motor_id + 'tm']
       let dim        = max - min
       let bounds     = this.toolpath.bounds
       let pathMin    = bounds ? bounds.min[axis] : 0
       let pathMax    = bounds ? bounds.max[axis] : 0
       let pathDim    = pathMax - pathMin
-      let klass      = (homed ? 'homed' : 'unhomed') + ' axis-' + axis
+      let klass      = 'axis-' + axis
       let state      = 'UNHOMED'
       let icon       = 'question-circle'
+
+      // Determine base state class
+      if (homed) klass += ' homed'
+      else if (referenced) klass += ' warn'
+      else klass += ' unhomed'
       let fault      = this.state[motor_id + 'df'] & 0x1f
       let shutdown   = this.state.power_shutdown
       let title
@@ -138,11 +144,19 @@ module.exports = {
       } else if (homed) {
         state = 'HOMED'
         icon = 'check-circle'
+
+      } else if (referenced) {
+        state = 'ZEROED'
+        icon = 'exclamation-triangle'
       }
 
       switch (state) {
       case 'UNHOMED': title = 'Click the home button to home axis.'; break
-      case 'HOMED': title = 'Axis successfuly homed.'; break
+      case 'HOMED': title = 'Axis successfully homed.'; break
+      case 'ZEROED': 
+        title = 'Position set manually. Soft limits not active - ' +
+          'verify program stays within machine bounds.'
+        break
 
       case 'NO FIT':
         title = 'Tool path dimensions exceed axis dimensions by ' +
@@ -178,6 +192,7 @@ module.exports = {
         enabled: enabled,
         homingMode: homingMode,
         homed: homed,
+        referenced: referenced,
         klass: klass,
         state: state,
         icon: icon,