Skip to content

Commit

Permalink
Merge pull request #14 from ajmas/issue-14-typescript
Browse files Browse the repository at this point in the history 
Issue #14 First pass conversion to Typescript
  • Loading branch information
@ajmas
ajmas committed Nov 12, 2023
2 parents e28c906 + caa3d8d commit 0612e66
Show file tree
Hide file tree
Showing 26 changed files with 497 additions and 312 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<link rel="stylesheet" href="styles/perfect-scrollbar.min.css" type="text/css">
<link rel="stylesheet" href="styles/style.css" type="text/css">

<script type="module" src="src/main.js"></script>
<script type="module" src="src/main.ts"></script>

<title>Stuff in Space</title>
</head>
Expand Down
20 changes: 20 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"eslint": "^8.49.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.28.1",
"typescript": "^5.2.2",
"vite": "^4.4.9"
}
}
0 src/config.js → src/config.ts
View file
File renamed without changes.
0 src/constants.js → src/constants.ts
View file
File renamed without changes.
106 changes: 64 additions & 42 deletions src/hud/index.js → src/hud/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,29 @@ import { R2D, Events } from '../constants';
import windowManager from './window-manager';
import searchBox from './search-box';

const supporteEvents = [];
const supporteEvents: string[] = [];

let app;
let app: any;
let groupClicked = false;

const draggableElements = [];
const draggableElements: any[] = [];

function setLoading (loading) {
function setLoading (loading: boolean) {
if (loading) {
document.querySelector('body').classList.add('loading');
document.querySelector('body')?.classList.add('loading');
} else {
document.querySelector('body').classList.remove('loading');
document.querySelector('body')?.classList.remove('loading');
}
}

function updateGroupList () {
const groupDisplay = document.querySelector('#groups-display');
const groupDisplay = document.querySelector('#groups-display') as HTMLElement;

if (!app.groups) {
throw new Error('groups is not defined');
}

const groups = app.groups.asArray().sort((entryA, entryB) => entryA.name.localeCompare(entryB.name));
const groups = app.groups.asArray().sort((entryA: Record<string, string>, entryB: Record<string, string>) => entryA.name.localeCompare(entryB.name));

let html = '';
for (let i = 0; i < groups.length; i++) {
Expand All @@ -35,45 +35,63 @@ function updateGroupList () {
groupDisplay.innerHTML = html;
}

function onSelectedSatChange (event) {
function setHtml (selector: string, html: string) {
const element = document.querySelector(selector) as HTMLElement;
if (element) {
element.innerHTML = html;
}
}

function onSelectedSatChange (event: any) {
const { satellite } = event;
if (satellite) {
document.querySelector('#sat-infobox').classList.add('visible');
document.querySelector('#sat-info-title').innerHTML = satellite.OBJECT_NAME;
document.querySelector('#sat-intl-des').innerHTML = satellite.intlDes;
document.querySelector('#sat-type').innerHTML = satellite.OBJECT_TYPE;
document.querySelector('#sat-apogee').innerHTML = `${satellite.apogee.toFixed(0)} km`;
document.querySelector('#sat-perigee').innerHTML = `${satellite.perigee.toFixed(0)} km`;
document.querySelector('#sat-inclination').innerHTML = `${(satellite.inclination * R2D).toFixed(2)}°`;
document.querySelector('#sat-period').innerHTML = `${satellite.period.toFixed(2)} min`;
document.querySelector('#sat-infobox')?.classList.add('visible');
setHtml('#sat-info-title', satellite.OBJECT_NAME);
setHtml('#sat-intl-des', satellite.intlDes);
setHtml('#sat-type', satellite.OBJECT_TYPE);
setHtml('#sat-apogee', `${satellite.apogee.toFixed(0)} km`);
setHtml('#sat-perigee', `${satellite.perigee.toFixed(0)} km`);
setHtml('#sat-inclination', `${(satellite.inclination * R2D).toFixed(2)}°`);
setHtml('#sat-period', `${satellite.period.toFixed(2)} min`);
} else {
document.querySelector('#sat-infobox').classList.remove('visible');
document.querySelector('#sat-infobox')?.classList.remove('visible');
}
}

function onSatHover (event) {
function onSatHover (event: any) {
const {
satId, satX, satY, satellite
} = event;

if (!satId || satId === -1) {
document.querySelector('#sat-hoverbox').innerHTML = '(none)';
document.querySelector('#sat-hoverbox').style.display = 'none';
document.querySelector('#canvas').style.cursor = 'default';
setHtml('#sat-hoverbox', '(none)');
let element = document.querySelector('#sat-hoverbox') as HTMLElement;
if (element) {
element.style.display = 'none';
}
element = document.querySelector('#canvas') as HTMLElement;
if (element) {
element.style.cursor = 'default';
}
} else {
const satHoverBox = document.querySelector('#sat-hoverbox');
satHoverBox.innerHTML = satellite.OBJECT_NAME;
satHoverBox.style.display = 'block';
satHoverBox.style.position = 'absolute';
satHoverBox.style.left = `${satX + 20}px`;
satHoverBox.style.top = `${satY - 10}px`;
document.querySelector('#canvas').style = { cursor: 'pointer' };
const satHoverBox = document.querySelector('#sat-hoverbox') as HTMLElement;
if (satHoverBox) {
satHoverBox.innerHTML = satellite.OBJECT_NAME;
satHoverBox.style.display = 'block';
satHoverBox.style.position = 'absolute';
satHoverBox.style.left = `${satX + 20}px`;
satHoverBox.style.top = `${satY - 10}px`;
}
const element = document.querySelector('#canvas') as HTMLElement;
if (element) {
element.style.cursor = 'pointer';
}
}
}

// eslint-disable-next-line no-shadow
function initGroupsListeners (app) {
document.querySelector('#groups-display').addEventListener('mouseout', () => {
function initGroupsListeners (app: any) {
document.querySelector('#groups-display')?.addEventListener('mouseout', () => {
if (!groupClicked) {
if (searchBox.isResultBoxOpen()) {
app.groups.selectGroup(searchBox.getLastResultGroup());
Expand All @@ -87,7 +105,7 @@ function initGroupsListeners (app) {

for (let i = 0; i < listItems.length; i++) {
const listItem = listItems[i];
listItem.addEventListener('mouseover', (event) => {
listItem.addEventListener('mouseover', (event: any) => {
app.clicked = false;

const target = event.currentTarget;
Expand All @@ -97,19 +115,19 @@ function initGroupsListeners (app) {
});

listItem.addEventListener('mouseout', () => {
const selectedGroup = document.querySelector('#groups-display>li.selected');
const selectedGroup = (document.querySelector('#groups-display>li.selected') as HTMLElement);
if (selectedGroup) {
app.groups.selectGroup(app.groups.getGroupById(selectedGroup.dataset.group));
} else {
app.groups.selectGroup(undefined);
}
});

listItem.addEventListener('click', (event) => {
listItem.addEventListener('click', (event: any) => {
const target = event.currentTarget;
groupClicked = true;

const selectedGroup = document.querySelector('#groups-display>li.selected');
const selectedGroup = document.querySelector('#groups-display>li.selected') as HTMLElement;
let selectedGroupName;
if (selectedGroup) {
selectedGroupName = selectedGroup.dataset.group;
Expand Down Expand Up @@ -145,18 +163,22 @@ function initEventListeners () {

app.addEventListener(Events.satHover, onSatHover);

document.querySelector('#zoom-in').addEventListener('click', (event) => {
document.querySelector('#zoom-in')?.addEventListener('click', (event: any) => {
event.preventDefault();
app.viewer.zoomIn();
});

document.querySelector('#zoom-out').addEventListener('click', (event) => {
document.querySelector('#zoom-out')?.addEventListener('click', (event: any) => {
event.preventDefault();
app.viewer.zoomOut();
});

window.addEventListener('resize', () => {
draggableElements.forEach((element) => {
if (!window.visualViewport) {
return;
}

if (element.offsetLeft + element.offsetWidth > window.visualViewport.width) {
element.style.right = 'unset';
element.style.left = `${window.visualViewport.width - element.offsetWidth}px`;
Expand All @@ -172,10 +194,10 @@ function initEventListeners () {
setLoading(false);
}

function onSatMovementChange (event) {
function onSatMovementChange (event: any) {
if (event.satId) {
document.querySelector('#sat-altitude').innerHTML = `${event.altitude.toFixed(2)} km`;
document.querySelector('#sat-velocity').innerHTML = `${event.velocity.toFixed(2)} km/s`;
setHtml('#sat-altitude', `${event.altitude.toFixed(2)} km`);
setHtml('#sat-velocity', `${event.velocity.toFixed(2)} km/s`);
}
}

Expand All @@ -192,7 +214,7 @@ function getSupportedEvents () {
function initMenus () {
const elements = document.querySelectorAll('.menu-item');
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
const element = elements[i] as HTMLElement;
element.addEventListener('click', () => {
const action = element.dataset.action;
if (action && action.startsWith('open:')) {
Expand All @@ -207,7 +229,7 @@ function getCurrentSearch () {
return searchBox.getCurrentSearch();
}

function init (appContext) {
function init (appContext: any) {
app = appContext;
app.windowManager = windowManager;

Expand Down
40 changes: 24 additions & 16 deletions src/hud/search-box.js → src/hud/search-box.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import logger from '../utils/logger';

const SEARCH_LIMIT = 200;

let app;
let app: any;
let hovering = false;
let hoverSatId = -1;

let resultsOpen = false;
let lastResultGroup;
let lastResultGroup: SatGroup;

function isResultBoxOpen () {
return resultsOpen;
Expand All @@ -20,7 +20,7 @@ function getLastResultGroup () {

function getCurrentSearch () {
if (resultsOpen) {
return document.querySelector('#search').value;
return (document.querySelector('#search') as HTMLInputElement).value;
}
return null;
}
Expand All @@ -40,8 +40,12 @@ function clearHover () {
app.viewer.setHover(hoverSatId);
}

function setResultsVisible (visible) {
const searchResultsElem = document.querySelector('#search-results');
function setResultsVisible (visible: boolean) {
const searchResultsElem = document.querySelector('#search-results') as HTMLElement;
if (!searchResultsElem) {
return;
}

if (visible) {
searchResultsElem.style.display = 'block';
} else {
Expand All @@ -63,9 +67,9 @@ function hideResults () {
app.groups.clearSelect();
}

function fillResultBox (results, searchStr) {
function fillResultBox (results: any, searchStr: string) {
const satData = app.satData;
const resultBox = document.querySelector('#search-results');
const resultBox = document.querySelector('#search-results') as HTMLElement;

let html = '';
for (let i = 0; i < results.length; i++) {
Expand Down Expand Up @@ -105,10 +109,12 @@ function fillResultBox (results, searchStr) {

function clearResults () {
const searchResultsElem = document.querySelector('#search-results');
searchResultsElem.innerHTML = '';
if (searchResultsElem) {
searchResultsElem.innerHTML = '';
}
}

function doSearch (str) {
function doSearch (str: string) {
const satData = app.satData;

app.viewer.setSelectedSatellite(-1);
Expand Down Expand Up @@ -161,35 +167,37 @@ function doSearch (str) {

function registerListeners () {
const searchResultsElem = document.querySelector('#search-results');

searchResultsElem.addEventListener('click', (event) => {
if (!searchResultsElem) {
return;
}
searchResultsElem.addEventListener('click', (event: any) => {
const target = event.target;
const satId = target.dataset.satId;
clearHover();

app.viewer.setSelectedSatellite(satId);
});

document.querySelector('#search').addEventListener('input', () => {
const searchStr = document.querySelector('#search').value;
document.querySelector('#search')?.addEventListener('input', () => {
const searchStr = (document.querySelector('#search') as HTMLInputElement)?.value;
doSearch(searchStr);
});

document.querySelector('#all-objects-link').addEventListener('click', () => {
document.querySelector('#all-objects-link')?.addEventListener('click', () => {
const selectedSatelltie = app.viewer.getSelectedSatellite();
if (selectedSatelltie && selectedSatelltie !== -1) {
const intldes = app.viewer.getSatellite(selectedSatelltie).intlDes;
const searchStr = intldes.slice(0, 8);
doSearch(searchStr);
document.querySelector('#search').value = searchStr;
(document.querySelector('#search') as HTMLInputElement).value = searchStr;
if (app.windowManager) {
app.windowManager.openWindow('search-window');
}
}
});
}

function init (appContext) {
function init (appContext: any) {
app = appContext;
registerListeners();
}
Expand Down
0 src/hud/window-manager.js → src/hud/window-manager.ts
View file
File renamed without changes.
0 src/hud/window.js → src/hud/window.ts
View file
File renamed without changes.
Loading

0 comments on commit 0612e66

Please sign in to comment.