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

<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { onMounted, onUnmounted, ref, useTemplateRef, inject } from 'vue';
import { marked } from 'marked';
import { Menu, Popover, Icon, InputDialog, Spinner } from '@cloudron/pankow';
import NotificationsModel from '../models/NotificationsModel.js';
import ServicesModel from '../models/ServicesModel.js';
import ProfileModel from '../models/ProfileModel.js';

defineProps(['config', 'subscription']);

const profile = inject('profile');

const helpButton = useTemplateRef('helpButton');
const helpPopover = useTemplateRef('helpPopover');

function onOpenHelp(popover, event, elem) {
  popover.open(event, elem);
}

const servicesModel = ServicesModel.create();
const profileModel = ProfileModel.create();

const notificationModel = NotificationsModel.create();
const notifications = ref([]);

async function refresh() {
  const [error, result] = await notificationModel.list(false);
  if (error) return console.error(error);

  result.forEach(n => {
    n.isCollapsed = true;
    n.busy = false;
  });

  notifications.value = result;
}

const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');

function onSubscriptionRequired() {
  subscriptionRequiredDialog.value.open();
}

const platformStatus = ref({
  message: '',
  state: '',
});

let platformTimeoutId = 0;
async function trackPlatformStatus() {
  const [error, result] = await servicesModel.getPlatformStatus();
  if (error) return console.error('Failed to get platform status.', error);

  platformStatus.value = result;

  if (result.state === 'starting') platformTimeoutId = setTimeout(trackPlatformStatus, 5000);
}

const inputDialog = useTemplateRef('inputDialog');
function onShowPlatformError() {
  inputDialog.value.info({
    confirmLabel: t('main.dialog.close'),
    title: t('main.platform.startupFailed'),
    message: platformStatus.value.message,
  });
}

const description = marked.parse(t('support.help.description', {
  docsLink: 'https://docs.cloudron.io',
  packagingLink: 'https://docs.cloudron.io/packaging/tutorial',
  forumLink: 'https://forum.cloudron.io',
  apiLink: 'https://docs.cloudron.io/api.html'
}));

const avatarActions = [{//
    icon: 'fa-solid fa-circle-user',
    label: t('profile.title'),
    action: () => { window.location.href = '#/profile'; }
  }, {
    separator: true,
  }, {
    icon: 'fa-solid fa-right-from-bracket',
    label: t('main.logout'),
    action: () => { profileModel.logout(); }
  }];

const avatarMenu = useTemplateRef('avatarMenu');
function onAvatarClick(event) {
  avatarMenu.value.open(event, event.currentTarget);
}

onMounted(async () => {
  if (profile.value.isAtLeastAdmin) await refresh();

  await trackPlatformStatus();
});

onUnmounted(() => {
  clearTimeout(platformTimeoutId);
});

</script>

<template>
  <div class="headerbar">
    <InputDialog ref="inputDialog"/>
    <Menu ref="avatarMenu" :model="avatarActions" />

    <Popover ref="helpPopover" :width="'min(80%, 400px)'" :height="'min(80%, 600px)'">
      <div style="padding: 10px; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
        <h1 class="help-title">{{ $t('support.help.title') }}</h1>
        <div v-html="description"></div>
      </div>
    </Popover>

    <div v-if="!profile.isAtLeastUserManager">
      <a href="#/" class="headerbar-action">
        <img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`"/> {{ config.cloudronName || 'Cloudron' }}
      </a>
    </div>

    <div style="flex-grow: 1;"></div>

    <div v-if="platformStatus.state === 'starting'" class="headerbar-info">
      <Spinner style="margin-right: 10px"/>{{ platformStatus.message }}
    </div>
    <div v-else-if="platformStatus.state === 'failed'" class="headerbar-info text-danger" style="cursor: pointer" @click="onShowPlatformError">
      <Icon :icon="'fa fa-exclamation-triangle'"/> {{ $t('main.platform.startupFailed') }}
    </div>

    <!-- Warnings if subscription is expired or unpaid -->
    <div v-if="profile.isAtLeastOwner && subscription.plan.id === 'expired'" class="headerbar-action subscription-expired" style="gap: 6px" @click="onSubscriptionRequired()">Subscription Expired</div>

    <a class="headerbar-action" v-if="profile.isAtLeastAdmin" href="/#/notifications"><Icon :icon="notifications.length ? 'fas fa-bell' : 'far fa-bell'"/> {{ notifications.length > 99 ? '99+' : notifications.length }}</a>
    <div class="headerbar-action pankow-no-mobile" v-if="profile.isAtLeastAdmin" ref="helpButton" @click="onOpenHelp(helpPopover, $event, helpButton)"><Icon icon="fa fa-question"/></div>
    <!-- <a class="headerbar-action"  v-if="profile.isAtLeastAdmin" href="#/support"><Icon icon="fa fa-question"/></a> -->
    <a class="headerbar-action" @click.capture="onAvatarClick($event)"><img :src="profile.avatarUrl" @error="event => event.target.src = '/img/avatar-default-symbolic.svg'"/> {{ profile.username }}</a>
  </div>
</template>

<style scoped>

.headerbar {
  display: flex;
  padding: 15px;
  align-items: center;
  gap: 15px;
}

.headerbar-info {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 15px;
}

.headerbar-action {
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  color: var(--pankow-text-color);
  padding: 4px 15px;
}

.headerbar-action img {
  margin-right: 10px;
  width: 40px;
  height: 40px;
  border-radius: var(--pankow-border-radius);
}

.headerbar-action:hover {
  color: var(--pankow-color-primary-hover);
}

.help-title {
  font-size: 20px;
  padding-bottom: 10px;
  margin: 0;
  border-bottom: 1px solid var(--pankow-input-border-color);
}

.subscription-expired {
  background-color: var(--pankow-color-danger);
  color: white;
  border-radius: 20px;
}

.subscription-expired:hover {
  color: white;
  background-color: var(--pankow-color-danger-hover);
}

</style>