Add component configuration to allow showing different formats for th…

…e RA and Dec values

love/src/Utils.js

@@ -1551,6 +1551,32 @@ export function degrees(radians) {
   return (radians * 180) / Math.PI;
 }
 
+/**
+ * Function to transform degress to Right Ascension hour format
+ * e.g. 180.55 -> 12:02:12
+ * @param {number} degrees degrees to be transformed
+ * @returns {string} Right Ascension hour format
+ */
+export function degreesToHMS(degrees) {
+  const h = Math.floor(degrees / 15);
+  const m = Math.floor((degrees % 15) * 4);
+  const s = Math.floor(((degrees % 15) * 4 - m) * 60);
+  return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Function to transform degress to Declination hour format
+ * e.g. 180.55 -> +180:02:12
+ * @param {number} degrees degrees to be transformed
+ * @returns {string} Declination hour format
+ */
+export function degreesToDMS(degrees) {
+  const d = Math.floor(degrees);
+  const m = Math.floor((degrees % 1) * 4);
+  const s = Math.floor(((degrees % 1) * 4 - m) * 60);
+  return `${d.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+}
+
 /**
  * Function to pase a number or string to float with fixed decimal points
  * as specified by the points param

love/src/components/AuxTel/Dome/Dome.container.jsx

@@ -47,6 +47,12 @@ export const schema = {
       isPrivate: false,
       default: EUIs.ATDOME,
     },
+    raDecHourFormat: {
+      type: 'boolean',
+      description: 'Whether to display the RA and DEC in hour format',
+      isPrivate: false,
+      default: false,
+    },
   },
 };
 
@@ -90,6 +96,7 @@ const DomeContainer = ({
   telescopeRA,
   telescopeDec,
   telescopeRotator,
+  raDecHourFormat,
   ...props
 }) => {
   if (props.isRaw) {
@@ -136,6 +143,7 @@ const DomeContainer = ({
       telescopeRA={telescopeRA}
       telescopeDec={telescopeDec}
       telescopeRotator={telescopeRotator}
+      raDecHourFormat={raDecHourFormat}
     />
   );
 };

love/src/components/AuxTel/Dome/Dome.jsx

@@ -19,7 +19,7 @@ this program. If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ManagerInterface, { fixedFloat, parseCommanderData } from 'Utils';
+import ManagerInterface, { fixedFloat, parseCommanderData, degreesToHMS, degreesToDMS } from 'Utils';
 import PlotContainer from 'components/GeneralPurpose/Plot/Plot.container';
 import TimeSeriesControls from 'components/GeneralPurpose/Plot/TimeSeriesControls/TimeSeriesControls';
 import Elevation from 'components/GeneralPurpose/Elevation/Elevation';
@@ -317,6 +317,7 @@ export default class Dome extends Component {
       telescopeRA,
       telescopeDec,
       telescopeRotator,
+      raDecHourFormat,
     } = this.props;
 
     const { timeWindow, isLive, historicalData } = this.state;
@@ -343,6 +344,9 @@ export default class Dome extends Component {
       historicalData: historicalData,
     };
 
+    const parsedTelescopeRA = raDecHourFormat ? degreesToHMS(telescopeRA) : `${telescopeRA}°`;
+    const parsedTelescopeDec = raDecHourFormat ? degreesToDMS(telescopeDec) : `${telescopeDec}°`;
+
     return (
       <div className={styles.domeContainer}>
         <div className={styles.topRow}>
@@ -416,10 +420,10 @@ export default class Dome extends Component {
                 className={styles.telescopeParametersContainer}
               >
                 <div>
-                  Telescope RA: <span className={styles.value}>{telescopeRA}°</span>
+                  Telescope RA: <span className={styles.value}>{parsedTelescopeRA}</span>
                 </div>
                 <div>
-                  Telescope Dec: <span className={styles.value}>{telescopeDec}°</span>
+                  Telescope Dec: <span className={styles.value}>{parsedTelescopeDec}</span>
                 </div>
                 <div>
                   Rotator position: <span className={styles.value}>{telescopeRotator}°</span>