feat: added waiting state of orders

dualsaber · Apr 25, 2024 · 8bd3121 · 8bd3121
1 parent 57db292
commit 8bd3121
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -4,5 +4,4 @@ This is a simple widget for [Übersicht](https://tracesof.net/uebersicht/) that
 
 ![Screenshot](screenshot.png)
 
-Uses [Helldivers-2/api](https://github.com/helldivers-2/api) to get the current major order(s) and displays them in a widget.
-
+Uses [Helldivers-2/api](https://github.com/helldivers-2/api) to get the current major order(s) and displays them in a widget.
diff --git a/helldivers.widget.zip b/helldivers.widget.zip
diff --git a/index.jsx b/index.jsx
@@ -4,7 +4,7 @@ import { getPlanetEvents, getAssignments } from "./lib/api"
 
 // CONFIGS
 const REFRESH_INTERVAL = 15
-const VERSION = "v1.0.0"
+const VERSION = "v1.1.0"
 
 export const initialState = {
   loading: 1,
@@ -110,6 +110,7 @@ const loader = css`
   text-align: center;
   top: 50%;
   left: 50%;
+  width: 100%;
   transform: translate(-50%, -50%);
 `
 
@@ -122,6 +123,12 @@ const loaderText = css`
   color: #fee801;
   font-weight: bold;
 `
+
+const loaderText_small = css`
+  color: #fee801;
+  font-size: 12px;
+`
+
 const version = css`
   color: #fee801;
   font-weight: 100;
@@ -143,50 +150,62 @@ export const render = ({ loading, planets, order }) => {
         </div>
       ) : (
         <div>
-          <div className={title_main}>
-            <div className={title_top}>{order.title}</div>
-            <div className={title_bottom}>
-              <div>
-                {order.current_amount}/{order.max_amount}
-              </div>
-              <div>{order.countdown}</div>
-            </div>
-          </div>
-          {planets.map(planet => {
-            return (
-              <div className={planet_main} key={planet.name}>
-                <div className={planet_name}>
-                  <div className={planet_name_left}>
-                    {planet.event_faction === 1 && (
-                      <img
-                        height="15"
-                        src="/helldivers.widget/src/images/terminid.png"
-                      />
-                    )}
-                    {planet.event_faction === 2 && (
-                      <img
-                        height="15"
-                        src="/helldivers.widget/src/images/automaton.png"
-                      />
-                    )}
-                    {planet.name}
-                  </div>
-                  <div className={planet_name_right}></div>
-                </div>
-                <div className={planet_percentage}>
-                  <div className={planet_percentage_number}>
-                    {planet.percentage}%
+          {order.title ? (
+            <div>
+              <div className={title_main}>
+                <div className={title_top}>{order.title}</div>
+                <div className={title_bottom}>
+                  <div>
+                    {order.current_amount}/{order.max_amount}
                   </div>
-                  <div
-                    className={planet_percentage_green}
-                    style={{
-                      width: `${planet.percentage}%`
-                    }}
-                  />
+                  <div>{order.countdown}</div>
                 </div>
               </div>
-            )
-          })}
+              {planets.map(planet => {
+                return (
+                  <div className={planet_main} key={planet.name}>
+                    <div className={planet_name}>
+                      <div className={planet_name_left}>
+                        {planet.event_faction === 1 && (
+                          <img
+                            height="15"
+                            src="/helldivers.widget/src/images/terminid.png"
+                          />
+                        )}
+                        {planet.event_faction === 2 && (
+                          <img
+                            height="15"
+                            src="/helldivers.widget/src/images/automaton.png"
+                          />
+                        )}
+                        {planet.name}
+                      </div>
+                      <div className={planet_name_right}></div>
+                    </div>
+                    <div className={planet_percentage}>
+                      <div className={planet_percentage_number}>
+                        {planet.percentage}%
+                      </div>
+                      <div
+                        className={planet_percentage_green}
+                        style={{
+                          width: `${planet.percentage}%`
+                        }}
+                      />
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          ) : (
+            <div className={loader}>
+              <img
+                className={loaderImage}
+                src="/helldivers.widget/src/images/logo.png"
+              />
+              <div className={loaderText_small}>Waiting for new orders...</div>
+            </div>
+          )}
         </div>
       )}
     </div>

diff --git a/lib/api.js b/lib/api.js
@@ -1,27 +1,28 @@
 const BASE_URL = "https://api.helldivers2.dev/api/v1"
 
-import Planet from "../src/models/Planet";
-import Assignment from "../src/models/Assignment";
+import Planet from "../src/models/Planet"
+import Assignment from "../src/models/Assignment"
 
-function handleError(response) { 
-  console.error('ERROR:', response.status, response.statusText);
+function handleError(response) {
+  console.error("ERROR:", response.status, response.statusText)
 }
 
-export async function getAssignments() { 
-  const response = await fetch(`${BASE_URL}/assignments`);
-  if (response.status !== 200) handleError(response);
-  const data = await response.json();
+export async function getAssignments() {
+  const response = await fetch(`${BASE_URL}/assignments`)
+  if (response.status !== 200) handleError(response)
+  const data = await response.json()
+  console.log(data)
+  if (data.length === 0) return {}
   return new Assignment(data[0])
 }
 
 export async function getPlanetEvents() {
-  const response = await fetch(`${BASE_URL}/planet-events`);
-  if (response.status !== 200) handleError(response);
+  const response = await fetch(`${BASE_URL}/planet-events`)
+  if (response.status !== 200) handleError(response)
   const data = await response.json()
 
-  const events =  data.map(planet => new Planet(planet))
+  const events = data.map(planet => new Planet(planet))
   events.sort((a, b) => b.percentage - a.percentage)
 
   return events.splice(0, 2)
-
-}
+}