mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-21 13:50:20 +08:00
Use font awesome icons in carbon comparisons and add icon type safety
This commit is contained in:
Rendani Gangazhe
committed by
Dannon Baker
Dannon Baker
parent
041e47b4bc
commit
40935cc7ef
@@ -81,7 +81,14 @@ const carbonEmissionsComparisons = computed(() => {
|
||||
treeYear,
|
||||
} = carbonEmissionsConstants;
|
||||
|
||||
const gasolineConsumed = {
|
||||
type CarbonComparison = {
|
||||
heading: string;
|
||||
explanation: string;
|
||||
value: string;
|
||||
icon: InstanceType<typeof CarbonEmissionsCard>["$props"]["icon"];
|
||||
};
|
||||
|
||||
const gasolineConsumed: CarbonComparison = {
|
||||
heading: "Gasoline consumed",
|
||||
explanation: "The amount of gasoline consumed running this job",
|
||||
value: prettyPrintValue({
|
||||
@@ -90,10 +97,10 @@ const carbonEmissionsComparisons = computed(() => {
|
||||
threshold: 1e-1,
|
||||
unit: "l",
|
||||
}),
|
||||
icon: "GasolineSVG" as const,
|
||||
icon: "gasPump",
|
||||
};
|
||||
|
||||
const drivingInEU = {
|
||||
const drivingInEU: CarbonComparison = {
|
||||
heading: "Distance driven in EU",
|
||||
explanation: "Distance driven in km in the EU",
|
||||
value: prettyPrintValue({
|
||||
@@ -101,10 +108,10 @@ const carbonEmissionsComparisons = computed(() => {
|
||||
threshold: 1e-1,
|
||||
unit: "km",
|
||||
}),
|
||||
icon: "CarSVG" as const,
|
||||
icon: "car",
|
||||
};
|
||||
|
||||
const drivingInUS = {
|
||||
const drivingInUS: CarbonComparison = {
|
||||
heading: "Distance driven in US",
|
||||
explanation: "Distance driven in km in the US",
|
||||
value: prettyPrintValue({
|
||||
@@ -113,10 +120,10 @@ const carbonEmissionsComparisons = computed(() => {
|
||||
threshold: 1e-1,
|
||||
unit: "mile(s)",
|
||||
}),
|
||||
icon: "CarSVG" as const,
|
||||
icon: "car",
|
||||
};
|
||||
|
||||
const incandescentLampsSwitchedToLEDs = {
|
||||
const incandescentLampsSwitchedToLEDs: CarbonComparison = {
|
||||
heading: "LEDs running for a year",
|
||||
explanation:
|
||||
"Amount of CO2e you could have saved had you switched incandescent lights to LEDs and run them for a year",
|
||||
@@ -124,27 +131,27 @@ const carbonEmissionsComparisons = computed(() => {
|
||||
value: parseFloat((totalCarbonEmissions / (ledCarbonEmissionSavings * 1e6)).toFixed(3)),
|
||||
threshold: 1e-3,
|
||||
}),
|
||||
icon: "LightbulbSVG" as const,
|
||||
icon: "lightbulb",
|
||||
};
|
||||
|
||||
const smartphonesCharged = {
|
||||
const smartphonesCharged: CarbonComparison = {
|
||||
heading: "Phones charged",
|
||||
explanation: "The amount of smartphone(s) you could have charged with the energy consumed by this job",
|
||||
value: prettyPrintValue({
|
||||
value: parseFloat((totalCarbonEmissions / (smartphonesChargedCarbonEmissions * 1e6)).toFixed(2)),
|
||||
threshold: 1e-1 * 5, // at least one smartphone charged to 50%
|
||||
}),
|
||||
icon: "SmartphoneSVG" as const,
|
||||
icon: "mobilePhone",
|
||||
};
|
||||
|
||||
const treeMonths = {
|
||||
const treeMonths: CarbonComparison = {
|
||||
heading: "Tree months",
|
||||
explanation: "Amount of time it would take a tree to sequester the carbon emissions from this job",
|
||||
value: prettyPrintValue({
|
||||
value: Math.round((totalCarbonEmissions / treeYear) * 12),
|
||||
threshold: 1e-1 * 5, // at least half of a month
|
||||
}),
|
||||
icon: "TreeSVG" as const,
|
||||
icon: "tree",
|
||||
};
|
||||
|
||||
return [
|
||||
@@ -271,13 +278,13 @@ function getEnergyNeededText(energyNeededInKiloWattHours: number) {
|
||||
:value="getCarbonEmissionsText(carbonEmissions.totalCarbonEmissions)"
|
||||
:explanation="'Amount of GHGs with a similar global warming effect as CO2'"
|
||||
:heading="'Carbon Emissions'"
|
||||
:icon="'SmogSVG'" />
|
||||
:icon="'smog'" />
|
||||
|
||||
<CarbonEmissionsCard
|
||||
:value="getEnergyNeededText(carbonEmissions.totalEnergyNeeded)"
|
||||
:explanation="'Total energy usage per hour'"
|
||||
:heading="'Energy Usage'"
|
||||
:icon="'LightningSVG'" />
|
||||
:icon="'bolt'" />
|
||||
|
||||
<!-- Carbon Emission Comparison -->
|
||||
<CarbonEmissionsCard
|
||||
|
||||
@@ -1,100 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import {
|
||||
faBolt,
|
||||
faCar,
|
||||
faGasPump,
|
||||
faLightbulb,
|
||||
faMobile,
|
||||
faSmog,
|
||||
faTree,
|
||||
faTruck,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
|
||||
library.add(faBolt, faCar, faGasPump, faLightbulb, faMobile, faSmog, faTree, faTruck);
|
||||
|
||||
export interface CarbonEmissionsIconProps {
|
||||
icon:
|
||||
| "CarSVG"
|
||||
| "GasolineSVG"
|
||||
| "HardDiskSVG"
|
||||
| "LightbulbSVG"
|
||||
| "LightningSVG"
|
||||
| "OilSVG"
|
||||
| "SmartphoneSVG"
|
||||
| "SmogSVG"
|
||||
| "TreeSVG";
|
||||
icon: "bolt" | "car" | "gasPump" | "lightbulb" | "mobilePhone" | "smog" | "tree";
|
||||
}
|
||||
|
||||
const props = defineProps<CarbonEmissionsIconProps>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="props.icon === 'CarSVG'">
|
||||
<div class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V400H96v48c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div v-if="props.icon === 'car'">
|
||||
<FontAwesomeIcon class="icon" icon="fa-car" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="props.icon === 'GasolineSVG'">
|
||||
<div class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M32 64C32 28.7 60.7 0 96 0H256c35.3 0 64 28.7 64 64V256h8c48.6 0 88 39.4 88 88v32c0 13.3 10.7 24 24 24s24-10.7 24-24V222c-27.6-7.1-48-32.2-48-62V96L384 64c-8.8-8.8-8.8-23.2 0-32s23.2-8.8 32 0l77.3 77.3c12 12 18.7 28.3 18.7 45.3V168v24 32V376c0 39.8-32.2 72-72 72s-72-32.2-72-72V344c0-22.1-17.9-40-40-40h-8V448c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32V64zM96 80v96c0 8.8 7.2 16 16 16H240c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16H112c-8.8 0-16 7.2-16 16z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else-if="props.icon === 'gasPump'">
|
||||
<FontAwesomeIcon class="icon" icon="fa-gas-pump" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="props.icon === 'HardDiskSVG'">
|
||||
<div class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V280.4c-17-15.2-39.4-24.4-64-24.4H64c-24.6 0-47 9.2-64 24.4V96zM64 288H448c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V352c0-35.3 28.7-64 64-64zM320 416a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else-if="props.icon === 'lightbulb'">
|
||||
<FontAwesomeIcon class="icon" icon="fa-lightbulb" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="props.icon === 'LightbulbSVG'">
|
||||
<div class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
||||
<path
|
||||
d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else-if="props.icon === 'bolt'">
|
||||
<FontAwesomeIcon class="icon" icon="fa-bolt" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="props.icon === 'LightningSVG'">
|
||||
<div class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path
|
||||
d="M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288H175.5L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6-22.9 8.9-35.3s-16.6-20.7-30-20.7H272.5L349.4 44.6z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else-if="props.icon === 'mobilePhone'">
|
||||
<FontAwesomeIcon class="icon" icon="fa-mobile" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="props.icon === 'OilSVG'">
|
||||
<div class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path
|
||||
d="M528.3 61.3c-11.4-42.7-55.3-68-98-56.6L414.9 8.8C397.8 13.4 387.7 31 392.3 48l24.5 91.4L308.5 167.5l-6.3-18.1C297.7 136.6 285.6 128 272 128s-25.7 8.6-30.2 21.4l-13.6 39L96 222.6V184c0-13.3-10.7-24-24-24s-24 10.7-24 24V448H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H544c17.7 0 32-14.3 32-32s-14.3-32-32-32H406.7L340 257.5l-62.2 16.1L305.3 352H238.7L265 277l-74.6 19.3L137.3 448H96V288.8l337.4-87.5 25.2 94c4.6 17.1 22.1 27.2 39.2 22.6l15.5-4.1c42.7-11.4 68-55.3 56.6-98L528.3 61.3zM205.1 448l11.2-32H327.7l11.2 32H205.1z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else-if="props.icon === 'smog'">
|
||||
<FontAwesomeIcon class="icon" icon="fa-smog" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="props.icon === 'SmartphoneSVG'">
|
||||
<div class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
||||
<path
|
||||
d="M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="props.icon === 'SmogSVG'">
|
||||
<div class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
||||
<path
|
||||
d="M32 144c0 79.5 64.5 144 144 144H299.3c22.6 19.9 52.2 32 84.7 32s62.1-12.1 84.7-32H496c61.9 0 112-50.1 112-112s-50.1-112-112-112c-10.7 0-21 1.5-30.8 4.3C443.8 27.7 401.1 0 352 0c-32.6 0-62.4 12.2-85.1 32.3C242.1 12.1 210.5 0 176 0C96.5 0 32 64.5 32 144zM616 368H280c-13.3 0-24 10.7-24 24s10.7 24 24 24H616c13.3 0 24-10.7 24-24s-10.7-24-24-24zm-64 96H440c-13.3 0-24 10.7-24 24s10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24zm-192 0H24c-13.3 0-24 10.7-24 24s10.7 24 24 24H360c13.3 0 24-10.7 24-24s-10.7-24-24-24zM224 392c0-13.3-10.7-24-24-24H96c-13.3 0-24 10.7-24 24s10.7 24 24 24H200c13.3 0 24-10.7 24-24z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="props.icon === 'TreeSVG'">
|
||||
<div class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path
|
||||
d="M210.6 5.9L62 169.4c-3.9 4.2-6 9.8-6 15.5C56 197.7 66.3 208 79.1 208H104L30.6 281.4c-4.2 4.2-6.6 10-6.6 16C24 309.9 34.1 320 46.6 320H80L5.4 409.5C1.9 413.7 0 419 0 424.5c0 13 10.5 23.5 23.5 23.5H192v32c0 17.7 14.3 32 32 32s32-14.3 32-32V448H424.5c13 0 23.5-10.5 23.5-23.5c0-5.5-1.9-10.8-5.4-15L368 320h33.4c12.5 0 22.6-10.1 22.6-22.6c0-6-2.4-11.8-6.6-16L344 208h24.9c12.7 0 23.1-10.3 23.1-23.1c0-5.7-2.1-11.3-6-15.5L237.4 5.9C234 2.1 229.1 0 224 0s-10 2.1-13.4 5.9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else-if="props.icon === 'tree'">
|
||||
<FontAwesomeIcon class="icon" icon="fa-tree" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user