Skip to content

Conversation

@Miraj98
Copy link

@Miraj98 Miraj98 commented Jul 20, 2024

This PR tries to close #42 (Replace React with something simple). I have migrated the stack to just use Typescript, HTML and CSS. NO FRAMEWORKS.

Basic setup

Fastboot functionality is refactored into a class that extends EventTarget. EventTarget basically allows you to attach event listeners. Here is an example:

const fb = new FastbootManager()
fb.on("progress", (newState) => updateUI(newState))

Almost all of the UI is now part of index.html and those parts of frontend that have some kind of interactivity (ex: progress indicator, device connection status, buttons, etc) are in src/main.ts file. Here is an example of how progress indicator is handled:

function setupProgressIndicatorView(initialState: FastbootManagerStateType) {
  renderProgressIndicator(initialState);
  fb.on("progress", renderProgressIndicator);
}

function renderProgressIndicator(state: FastbootManagerStateType) {
  const el = document.getElementById("linear-progress")!;
  const ctnEl = document.getElementById("linear-progress-ctn")!;

  const { progress, step } = state;
  el.style.transform = `translateX(${progress - 100}%)`;
  el.className = `absolute top-0 bottom-0 left-0 w-full transition-all ${fbSteps[step].bgColor}`;
  ctnEl.style.opacity = progress === -1 ? "0" : "1";
}

This setup should simplify the stack and hopefully is exactly what @adeebshihadeh was expecting.

Pending steps

I still have to migrate a couple of tests to this new setup. However, the project runs locally. I will need help from someone who owns an actual device to try and flash the device just to make sure everything is working fine.

@adeebshihadeh let me know if anything else is required to Lock the bounty. Thanks! Was fun working on this :)

@Miraj98 Miraj98 marked this pull request as ready for review July 20, 2024 15:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace React with something simple

1 participant