chore: fix storybook
This commit is contained in:
Michael Geers
parent
d6749d39dc
commit
88ee2cc5eb
2 changed files with 241 additions and 56 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import Loadpoint from "./Loadpoint.vue";
|
||||
import type { Meta, StoryFn } from "@storybook/vue3";
|
||||
import { SMART_COST_TYPE } from "@/types/evcc";
|
||||
|
||||
export default {
|
||||
title: "Loadpoints/Loadpoint",
|
||||
|
|
@ -9,57 +10,132 @@ export default {
|
|||
},
|
||||
} as Meta<typeof Loadpoint>;
|
||||
|
||||
// Based on actual API state structure from demo.evcc.io
|
||||
const baseState = {
|
||||
id: 0,
|
||||
pvConfigured: true,
|
||||
chargePower: 2800,
|
||||
chargedEnergy: 11e3,
|
||||
chargeDuration: 95 * 60,
|
||||
vehicleTitle: "Mein Auto",
|
||||
vehicleName: "meinauto",
|
||||
id: 1,
|
||||
title: "Carport",
|
||||
mode: "pv",
|
||||
enabled: true,
|
||||
connected: true,
|
||||
mode: "pv",
|
||||
socBasedCharging: true,
|
||||
charging: true,
|
||||
vehicleSoc: 66,
|
||||
limitSoc: 90,
|
||||
offeredCurrent: 7,
|
||||
minCurrent: 6,
|
||||
maxCurrent: 16,
|
||||
activePhases: 2,
|
||||
chargePower: 8050,
|
||||
chargedEnergy: 789.81,
|
||||
chargeDuration: 702,
|
||||
chargeRemainingDuration: 0,
|
||||
chargeRemainingEnergy: 0,
|
||||
vehicleName: "vehicle_3",
|
||||
vehicleSoc: 44,
|
||||
vehicleRange: 0,
|
||||
vehicleLimitSoc: 0,
|
||||
limitSoc: 80,
|
||||
effectiveLimitSoc: 80,
|
||||
limitEnergy: 0,
|
||||
minCurrent: 9,
|
||||
maxCurrent: 64,
|
||||
offeredCurrent: 34,
|
||||
phasesActive: 3,
|
||||
phasesConfigured: 3,
|
||||
sessionEnergy: 789.81,
|
||||
sessionPrice: 0.066,
|
||||
sessionPricePerKWh: 0.083,
|
||||
sessionCo2PerKWh: 11.813,
|
||||
sessionSolarPercentage: 95.312,
|
||||
batteryBoost: false,
|
||||
planActive: false,
|
||||
planEnergy: 0,
|
||||
planOverrun: 0,
|
||||
planPrecondition: 0,
|
||||
planProjectedEnd: undefined,
|
||||
planProjectedStart: undefined,
|
||||
planTime: undefined,
|
||||
priority: 0,
|
||||
phaseAction: "inactive",
|
||||
phaseRemaining: 0,
|
||||
pvAction: "inactive",
|
||||
pvRemaining: 0,
|
||||
smartCostActive: false,
|
||||
smartCostNextStart: undefined,
|
||||
smartFeedInPriorityActive: false,
|
||||
smartFeedInPriorityNextStart: undefined,
|
||||
vehicleClimaterActive: false,
|
||||
vehicleDetectionActive: false,
|
||||
vehicleWelcomeActive: false,
|
||||
chargerFeatureHeating: false,
|
||||
chargerFeatureIntegratedDevice: false,
|
||||
chargerIcon: "",
|
||||
chargerSinglePhase: false,
|
||||
chargerStatusReason: "unknown",
|
||||
connectedDuration: 0,
|
||||
// Global props that would typically come from parent
|
||||
vehicles: [
|
||||
{
|
||||
name: "vehicle_3",
|
||||
title: "grüner Honda e",
|
||||
icon: "car",
|
||||
capacity: 8,
|
||||
features: ["Offline"],
|
||||
repeatingPlans: [],
|
||||
},
|
||||
{
|
||||
name: "vehicle_4",
|
||||
title: "weißes Model 3",
|
||||
icon: "car",
|
||||
capacity: 80,
|
||||
features: ["Offline"],
|
||||
repeatingPlans: [],
|
||||
},
|
||||
],
|
||||
smartCostType: SMART_COST_TYPE.PRICE_FORECAST,
|
||||
smartCostAvailable: true,
|
||||
smartFeedInPriorityAvailable: false,
|
||||
tariffGrid: 0.144,
|
||||
tariffCo2: 252,
|
||||
tariffFeedIn: 0.08,
|
||||
currency: "EUR",
|
||||
multipleLoadpoints: false,
|
||||
gridConfigured: true,
|
||||
pvConfigured: true,
|
||||
batteryConfigured: true,
|
||||
};
|
||||
|
||||
const Template: StoryFn<typeof Loadpoint> = (args) => {
|
||||
const story = () => ({
|
||||
components: { Loadpoint },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: '<Loadpoint v-bind="args" />',
|
||||
});
|
||||
story.args = { ...baseState, ...args };
|
||||
return story;
|
||||
};
|
||||
const Template: StoryFn<typeof Loadpoint> = (args) => ({
|
||||
components: { Loadpoint },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: '<Loadpoint v-bind="args" />',
|
||||
});
|
||||
|
||||
export const Standard = Template.bind({});
|
||||
Standard.args = baseState;
|
||||
|
||||
export const WithoutSoc = Template.bind({});
|
||||
WithoutSoc.args = {
|
||||
vehicleName: "",
|
||||
...baseState,
|
||||
vehicleName: "vehicle_4",
|
||||
vehicleSoc: 0,
|
||||
limitEnergy: 20,
|
||||
};
|
||||
|
||||
export const Idle = Template.bind({});
|
||||
Idle.args = {
|
||||
...baseState,
|
||||
enabled: false,
|
||||
connected: false,
|
||||
vehicleName: "",
|
||||
vehicles: [],
|
||||
mode: "off",
|
||||
charging: false,
|
||||
chargePower: 0,
|
||||
offeredCurrent: 0,
|
||||
sessionEnergy: 0,
|
||||
chargedEnergy: 0,
|
||||
};
|
||||
|
||||
export const DisabledLongTitle = Template.bind({});
|
||||
DisabledLongTitle.args = {
|
||||
...baseState,
|
||||
title: "Charging point with a very very very long title!!!1!",
|
||||
remoteDisabled: "soft",
|
||||
remoteDisabledSource: "Sunny Home Manager",
|
||||
|
|
@ -71,8 +147,11 @@ DisabledLongTitle.args = {
|
|||
|
||||
export const ChargerIconNoVehicle = Template.bind({});
|
||||
ChargerIconNoVehicle.args = {
|
||||
...baseState,
|
||||
chargerIcon: "heater",
|
||||
title: "Heating device with long name",
|
||||
mode: "now",
|
||||
chargerFeatureIntegratedDevice: true,
|
||||
vehicleName: "",
|
||||
vehicles: [],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,33 +1,25 @@
|
|||
import Loadpoints from "./Loadpoints.vue";
|
||||
import type { Meta, StoryFn } from "@storybook/vue3";
|
||||
import { SMART_COST_TYPE } from "@/types/evcc";
|
||||
|
||||
function loadpoint(opts = {}) {
|
||||
// Create LoadpointCompact structure for the Loadpoints component
|
||||
const createLoadpoint = (opts = {}) => {
|
||||
const base = {
|
||||
id: 0,
|
||||
pvConfigured: true,
|
||||
chargePower: 2800,
|
||||
chargedEnergy: 11e3,
|
||||
chargeDuration: 95 * 60,
|
||||
vehicleName: "tesla",
|
||||
vehicleTitle: "Tesla Model 3",
|
||||
enabled: true,
|
||||
connected: true,
|
||||
mode: "pv",
|
||||
charging: true,
|
||||
vehicleSoc: 66,
|
||||
limitSoc: 90,
|
||||
offeredCurrent: 7,
|
||||
minCurrent: 6,
|
||||
maxCurrent: 16,
|
||||
activePhases: 2,
|
||||
icon: "car",
|
||||
title: "Garage",
|
||||
power: 2100,
|
||||
title: "Carport",
|
||||
charging: true,
|
||||
soc: 66,
|
||||
power: 8050,
|
||||
chargePower: 8050,
|
||||
connected: true,
|
||||
index: 0,
|
||||
vehicleName: "vehicle_3",
|
||||
chargerIcon: "",
|
||||
vehicleSoc: 0,
|
||||
chargerFeatureHeating: false,
|
||||
};
|
||||
return { ...base, ...opts };
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Loadpoints/Loadpoints",
|
||||
|
|
@ -45,16 +37,130 @@ const Template: StoryFn<typeof Loadpoints> = (args) => ({
|
|||
template: '<Loadpoints v-bind="args" />',
|
||||
});
|
||||
|
||||
export const Standard = Template.bind({});
|
||||
Standard.args = {
|
||||
vehicles: [],
|
||||
const baseArgs = {
|
||||
vehicles: [
|
||||
{
|
||||
name: "vehicle_3",
|
||||
title: "grüner Honda e",
|
||||
icon: "car",
|
||||
capacity: 8,
|
||||
features: ["Offline"],
|
||||
repeatingPlans: [],
|
||||
},
|
||||
{
|
||||
name: "vehicle_4",
|
||||
title: "weißes Model 3",
|
||||
icon: "car",
|
||||
capacity: 80,
|
||||
features: ["Offline"],
|
||||
repeatingPlans: [],
|
||||
},
|
||||
{
|
||||
name: "vehicle_5",
|
||||
title: "schwarzes VanMoof",
|
||||
icon: "bike",
|
||||
capacity: 0.46,
|
||||
features: ["Offline"],
|
||||
repeatingPlans: [],
|
||||
},
|
||||
],
|
||||
smartCostType: SMART_COST_TYPE.PRICE_FORECAST,
|
||||
smartCostAvailable: true,
|
||||
smartFeedInPriorityAvailable: false,
|
||||
tariffGrid: 0.144,
|
||||
tariffCo2: 252,
|
||||
tariffFeedIn: 0.08,
|
||||
currency: "EUR",
|
||||
gridConfigured: true,
|
||||
pvConfigured: true,
|
||||
batteryConfigured: true,
|
||||
};
|
||||
|
||||
export const OneLoadpoint = Template.bind({});
|
||||
OneLoadpoint.args = {
|
||||
...baseArgs,
|
||||
loadpoints: [
|
||||
loadpoint({ title: "Carport", index: 0 }),
|
||||
loadpoint({
|
||||
title: "Water Heater",
|
||||
chargerFeatureIntegratedDevice: true,
|
||||
chargerIcon: "waterheater",
|
||||
index: 1,
|
||||
createLoadpoint({
|
||||
title: "Main Charger",
|
||||
index: 0,
|
||||
vehicleName: "vehicle_3",
|
||||
charging: true,
|
||||
chargePower: 11000,
|
||||
power: 11000,
|
||||
connected: true,
|
||||
soc: 75,
|
||||
vehicleSoc: 75,
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
export const TwoLoadpoints = Template.bind({});
|
||||
TwoLoadpoints.args = {
|
||||
...baseArgs,
|
||||
loadpoints: [
|
||||
createLoadpoint({
|
||||
title: "Garage",
|
||||
index: 0,
|
||||
vehicleName: "vehicle_3",
|
||||
charging: true,
|
||||
chargePower: 8050,
|
||||
power: 8050,
|
||||
connected: true,
|
||||
soc: 66,
|
||||
vehicleSoc: 66,
|
||||
}),
|
||||
createLoadpoint({
|
||||
title: "Charging point with a very very very long title that tests layout compatibility!!!",
|
||||
index: 1,
|
||||
vehicleName: "vehicle_4",
|
||||
charging: false,
|
||||
chargePower: 0,
|
||||
power: 0,
|
||||
connected: true,
|
||||
soc: 89,
|
||||
vehicleSoc: 89,
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
export const ThreeLoadpoints = Template.bind({});
|
||||
ThreeLoadpoints.args = {
|
||||
...baseArgs,
|
||||
loadpoints: [
|
||||
createLoadpoint({
|
||||
title: "Garage",
|
||||
index: 0,
|
||||
vehicleName: "vehicle_3",
|
||||
charging: true,
|
||||
chargePower: 7400,
|
||||
power: 7400,
|
||||
connected: true,
|
||||
soc: 45,
|
||||
vehicleSoc: 45,
|
||||
}),
|
||||
createLoadpoint({
|
||||
title:
|
||||
"Extremely long charging point title that should test responsive layout behavior and text wrapping",
|
||||
index: 1,
|
||||
vehicleName: "vehicle_4",
|
||||
charging: false,
|
||||
chargePower: 0,
|
||||
power: 0,
|
||||
connected: true,
|
||||
soc: 92,
|
||||
vehicleSoc: 92,
|
||||
}),
|
||||
createLoadpoint({
|
||||
title: "Bike Charger",
|
||||
index: 2,
|
||||
vehicleName: "vehicle_5",
|
||||
charging: false,
|
||||
chargePower: 0,
|
||||
power: 0,
|
||||
connected: false,
|
||||
icon: "bike",
|
||||
soc: undefined,
|
||||
vehicleSoc: 0,
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue