cloudron-box/dashboard/src/components/OfflineOverlay.vue

<script setup>

import { ref } from 'vue';
import { fetcher, OfflineBanner } from 'pankow';
import { API_ORIGIN } from '../constants.js';

const emits = defineEmits(['online']);

const isOpen = ref(false);

async function waitForOnline() {
  let result;
  try {
    result = await fetcher.get(`${API_ORIGIN}/api/v1/cloudron/status`, {});
    // eslint-disable-next-line no-unused-vars
  } catch (e) {
    return setTimeout(waitForOnline, 5000);
  }

  if (result.status !== 200) return setTimeout(waitForOnline, 5000);

  // back online
  emits('online');
  isOpen.value = false;
}

defineExpose({
  open() {
    if (isOpen.value) return;

    isOpen.value = true;

    waitForOnline();
  }
});

</script>

<template>
  <OfflineBanner :active="isOpen"/>
</template>