Stefan/evcc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Increased Phase UI Width (#3366)

Browse source
This commit is contained in:
Michael Geers 2022-05-13 23:28:51 +02:00 • committed by GitHub
parent 523e241381
commit 4bbd007ccb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 36 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

20
assets/js/components/Loadpoint.vue
View file

@ -29,24 +29,24 @@
</div>
<div class="details d-flex align-items-start mb-3">
<div class="d-flex align-items-center">
<div>
<div>
<div class="d-flex align-items-center">
<LabelAndValue
:label="$t('main.loadpoint.power')"
:value="fmtKw(chargePower)"
class="mb-2"
/>
<Phases
v-bind="phasesProps"
class="opacity-transiton"
<shopicon-regular-lightning
class="text-evcc opacity-transiton"
:class="`opacity-${charging ? '100' : '0'}`"
/>
size="m"
></shopicon-regular-lightning>
</div>
<shopicon-regular-lightning
class="text-evcc opacity-transiton"
<Phases
v-bind="phasesProps"
class="opacity-transiton"
:class="`opacity-${charging ? '100' : '0'}`"
size="m"
></shopicon-regular-lightning>
/>
</div>
<LabelAndValue :label="$t('main.loadpoint.charged')" :value="fmtKWh(chargedEnergy)" />
<LabelAndValue

35
assets/js/components/Phases.vue
View file

@ -17,32 +17,10 @@ export default {
name: "Phases",
props: {
chargeCurrent: { type: Number },
chargeCurrents: { type: Object },
chargeCurrents: { type: Array },
activePhases: { type: Number },
minCurrent: { type: Number },
maxCurrent: { type: Number },
phaseAction: { type: String },
phaseRemaining: { type: Number },
},
computed: {
phaseTimerVisible() {
if (this.phaseTimerActive && !this.pvTimerActive) {
return true;
}
if (this.phaseTimerActive && this.pvTimerActive) {
return this.phaseRemainingInterpolated < this.pvRemainingInterpolated; // only show next timer
}
return false;
},
pvTimerVisible() {
if (this.pvTimerActive && !this.phaseTimerActive) {
return true;
}
if (this.pvTimerActive && this.phaseTimerActive) {
return this.pvRemainingInterpolated < this.phaseRemainingInterpolated; // only show next timer
}
return false;
},
},
methods: {
inactive(num) {
@ -65,16 +43,19 @@ export default {
<style scoped>
.phases {
width: 68px;
width: 73px;
}
.phase {
background-color: var(--bs-gray-200);
height: 4px;
width: 20px;
flex-grow: 1;
position: relative;
border-radius: 1px;
overflow: hidden;
}
.phase.inactive {
display: none;
}
.target,
.real {
position: absolute;
@ -92,8 +73,4 @@ export default {
.real {
background-color: var(--evcc-dark-green);
}
.phase.inactive .target,
.phase.inactive .real {
opacity: 0;
}
</style>

34
dist/assets/index.4470a477.js → dist/assets/index.ab79ab45.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/assets/index.62df0cbb.css → dist/assets/index.d3e49242.css vendored
View file

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View file

@ -20,8 +20,8 @@
<meta name="theme-color" content="#28293e" />
<title>evcc</title>
<script type="module" crossorigin src="./assets/index.4470a477.js"></script>
<link rel="stylesheet" href="./assets/index.62df0cbb.css">
<script type="module" crossorigin src="./assets/index.ab79ab45.js"></script>
<link rel="stylesheet" href="./assets/index.d3e49242.css">
</head>
<body>
<script>