Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/happ details #117

Merged
merged 11 commits into from
Nov 15, 2023
Merged

Feature/happ details #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
82c88ae
feat(happ-details): implement new route and components
mateuszRybczonek Oct 19, 2023
fe594da
feat(happ-details): update component styles
mateuszRybczonek Oct 23, 2023
1e6f3d6
Merge branch 'develop' into feature/happ-details
mateuszRybczonek Oct 23, 2023
1c333c3
feat(happ-details): move redirect to HAppsPage
mateuszRybczonek Oct 23, 2023
b37fcd1
feat(happ-details): add categories
mateuszRybczonek Oct 23, 2023
27c2609
Merge branch 'develop' into feature/happ-details
mateuszRybczonek Nov 3, 2023
dd992cc
feat(happ-details): add v2 endpoints
mateuszRybczonek Nov 14, 2023
16f11ec
feat(happ-details): use api/v2 prefix
mateuszRybczonek Nov 15, 2023
a837307
Merge branch 'develop' into feature/happ-details
mateuszRybczonek Nov 15, 2023
a87b827
feat(happ-details): update components to work with new API
mateuszRybczonek Nov 15, 2023
d4e0f4d
feat(happ-details): update unit tests
mateuszRybczonek Nov 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "host-console",
"version": "1.0.0-alpha.7",
"version": "1.0.0-alpha.9",
"private": true,
"homepage": "https://holo-host.github.io/host-console-ui/",
"scripts": {
Expand Down
43 changes: 43 additions & 0 deletions src/components/CategoryChip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<template>
<div class="category-chip"
>
<span class="category-chip__dot"></span>
<span class="category-chip__label">{{ label }}</span>
</div>
</template>

<script setup>
const props = defineProps({
label: {
type: String,
required: true
}
})
</script>

<style lang="scss" scoped>
.category-chip {
align-items: center;
display: inline-flex;
justify-content: start;
border-radius: 9999px;
padding: 4px 9px;
font-size: 12px;
font-weight: 700;
text-transform: capitalize;
background-color: #F3F5F8;
color: var(--grey-dark-color);

&__dot {
height: 8px;
width: 8px;
background-color: #0870A3;
border-radius: 50%;
display: inline-block;
}

&__label {
margin-left: 4px;
}
}
</style>
3 changes: 2 additions & 1 deletion src/components/PrimaryLayout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,13 @@ const { showModal } = useModals()

const props = withDefaults(
defineProps<{
title: string
title?: string
breadcrumbs?: BreadCrumb[]
isContentLoading?: boolean
isContentError?: boolean
}>(),
{
title: '',
breadcrumbs: undefined,
isContentLoading: false,
isContentError: false
Expand Down
4 changes: 2 additions & 2 deletions src/components/StopHostingModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div v-if="!confirmed" class="stop-hosting-modal">
<ExclamationIcon class="exclamation-icon" />
<p class="content">
Are you sure you want to stop hosting {{ happName }}?
Are you sure you want to stop hosting {{ hAppName }}?
</p>
<p class="content">
It will be removed from your HoloPort and will not be available for you to host again for 30 days. All invoices, logs and payments associated with this hApp will remain available to you.
Expand Down Expand Up @@ -59,7 +59,7 @@ export default {
},

props: {
happName: {
hAppName: {
type: String,
required: true
}
Expand Down
223 changes: 223 additions & 0 deletions src/components/hAppDetails/HAppDetailsContent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
<script setup lang="ts">
import HAppImage from '@uicommon/components/HAppImage.vue'
import { useI18n } from 'vue-i18n'
import CategoryChip from '@/components/CategoryChip.vue'
import HAppDetailsEarnings from '@/components/hAppDetails/HAppDetailsEarnings.vue'
import HAppDetailsStopHosting from '@/components/hAppDetails/HAppDetailsStopHosting.vue'
import HAppDetailsUsage from '@/components/hAppDetails/HAppDetailsUsage.vue'
import LeftChevronIcon from '@/components/icons/LeftChevronIcon.vue'
import type { HAppDetails } from '@/interfaces/HposInterface'

const { t } = useI18n()

const props = defineProps<{
hApp: HAppDetails
}>()
</script>

<template>
<div class="happ-details">
<router-link
class="happ-details__back-link"
to="/happs"
>
<LeftChevronIcon />
{{ t('$.back') }}
</router-link>
<div class="happ-details__columns">
<div class="happ-details__left-column desktop">
<HAppImage
:happ="props.hApp"
size="178px"
class="happ-details__left-column-happ-image"
/>
<div class="happ-details__left-column-description-label">
{{ t('$.description') }}
</div>
<div class="happ-details__left-column-description">
{{ props.hApp.description }}
</div>

<div class="happ-details__left-column-categories">
<CategoryChip
v-for="category in props.hApp.categories"
:key="category"
:label="category"
:custom-theme="{
fontColor: 'gray',
backgroundColor: 'grey-light-color'
}"
class="happ-details__left-column-category"
/>
</div>
</div>

<div class="happ-details__main-column">
<!-- Mobile -->
<div class="happ-details__main-column-mobile">
<HAppImage
:happ="props.hApp"
size="124px"
class="happ-details__main-column-mobile-happ-image"
/>
<h2 class="happ-details__main-column-name">
{{ props.hApp.name }}
</h2>
<div class="happ-details__main-column-description">
{{ props.hApp.description }}
</div>
</div>

<!-- Desktop -->
<h2 class="happ-details__main-column-name desktop">
{{ props.hApp.name }}
</h2>

<HAppDetailsEarnings
:h-app="props.hApp"
class="happ-details__main-column-earnings"
/>

<HAppDetailsUsage
:h-app="props.hApp"
class="happ-details__main-column-usage"
/>

<!-- <HAppDetailsStopHosting-->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we just remove this instead of commenting it out?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have that uncommented in my next PR :)

<!-- :h-app="props.hApp"-->
<!-- class="happ-details__main-column-stop-hosting"-->
<!-- />-->
</div>
</div>
</div>
</template>

<style scoped lang="scss">
.happ-details {
display: flex;
flex-direction: column;
background-color: var(--white-color);
box-shadow: 0 4px 20px #eceef1;
border-radius: 5px;
margin: 0 10px 20px 0;
padding: 30px;
color: var(--grey-color);
font-size: 14px;
line-height: 19px;
font-weight: 600;

&__back-link {
color: var(--grey-color);
text-decoration: none;
font-size: 14px;
margin-bottom: 32px;
}

&__columns {
display: flex;
}

&__left-column {
display: flex;
flex: 0;
flex-direction: column;

&-happ-image {
margin-bottom: 38px;
}

&-description-label {
margin-bottom: 4px;
}

&-description {
font-weight: 700;
color: var(--grey-dark-color);
}

&-categories {
margin-top: 48px;
}

&-category {
display: block;
margin-top: 13px;
width: fit-content;
block-size: fit-content;
}
}

&__main-column {
display: flex;
flex: 1;
flex-direction: column;
margin-left: 22px;

&-mobile {
display: none;
align-items: center;
flex-direction: column;
}

&-name {
margin: 0 0 40px 0;
color: var(--grey-dark-color);
font-weight: bold;
font-size: 22px;
line-height: 22px;
}

&-description {
font-weight: 700;
color: var(--grey-dark-color);
}

&-earnings {
margin-top: 2px;
}

&-usage {
margin-top: 32px;
}

&-stop-hosting {
margin-top: 32px;
}
}
}

@media screen and (max-width: 1050px) {
.happ-details {
margin: 0 0 20px 0;
padding: 18px;

&__main-column {
margin: 0 4px;

&-mobile {
display: block;
align-items: center;
flex-direction: column;
}

&-name {
margin-top: 12px;
margin-bottom: 12px;
}

&-description {
font-size: 11px;
margin-bottom: 24px;
}
}
}

.mobile-column {
display: flex;
}

.desktop {
display: none;
}
}
</style>
59 changes: 59 additions & 0 deletions src/components/hAppDetails/HAppDetailsEarnings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import type { HAppDetails } from '@/interfaces/HposInterface'
import { presentHolofuelAmount } from '@/utils'

const { t } = useI18n()

const props = defineProps<{
hApp: HAppDetails
}>()
</script>

<template>
<div class="happ-details-earnings">
<div class="happ-details-earnings__info-row large-text">
{{ t('happ_details.earnings.total') }}:<span class="happ-details-earnings__info-row-value">&nbsp;{{ presentHolofuelAmount(props.hApp.earnings.total) }} HF</span>
</div>
<div class="happ-details-earnings__info-row earnings-margin">
{{ t('happ_details.earnings.last_7_days') }}:<span class="happ-details-earnings__info-row-value">&nbsp;{{ presentHolofuelAmount(props.hApp.earnings.last7Days) }} HF</span>
</div>
<div class="happ-details-earnings__info-row earnings-margin">
{{ t('happ_details.earnings.average_weekly') }}:<span class="happ-details-earnings__info-row-value">&nbsp;{{ presentHolofuelAmount(props.hApp.earnings.averageWeekly) }} HF</span>
</div>
</div>
</template>

<style scoped lang="scss">
.happ-details-earnings {
&__info-row {
display: flex;
align-items: center;
color: var(--grey-color);
margin-left: 4px;
margin-bottom: 16px;
font-size: 14px;

&-value {
font-weight: 700;
color: var(--grey-dark-color);
}
}

.large-text {
font-size: 16px;
}
}

@media screen and (max-width: 1050px) {
.happ-details-earnings {
&__info-row {
font-size: 14px;
}

.mobile-margin {
margin-bottom: 40px;
}
}
}
</style>
Loading