b25b8cc805
currentOs is not recognized as reactive property as it's set to "undefined". JavaScript does not accept "undefined" as valid value to initialize. A property needs to be initialized with a non-undefined value to become reactive in a class-based component. Otherwise Vue warns: Property or method "currentOs" is not defined on the instance but referenced during render.
83 lines
2.3 KiB
Vue
83 lines
2.3 KiB
Vue
<template>
|
|
<div class="container">
|
|
<!-- <div>OS:</div> -->
|
|
<div class="os-list">
|
|
<div v-for="os in this.allOses" :key="os.name">
|
|
<span
|
|
class="os-name"
|
|
v-bind:class="{ 'current': currentOs === os.os }"
|
|
v-on:click="changeOsAsync(os.os)">
|
|
{{ os.name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component } from 'vue-property-decorator';
|
|
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
|
|
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
|
|
import { ApplicationFactory } from '@/application/ApplicationFactory';
|
|
|
|
@Component
|
|
export default class TheOsChanger extends StatefulVue {
|
|
public allOses: Array<{ name: string, os: OperatingSystem }> = [];
|
|
public currentOs?: OperatingSystem = null;
|
|
|
|
public async created() {
|
|
const app = await ApplicationFactory.Current.getAppAsync();
|
|
this.allOses = app.getSupportedOsList()
|
|
.map((os) => ({ os, name: renderOsName(os) }));
|
|
}
|
|
public async changeOsAsync(newOs: OperatingSystem) {
|
|
const context = await this.getCurrentContextAsync();
|
|
context.changeContext(newOs);
|
|
}
|
|
|
|
protected handleCollectionState(newState: ICategoryCollectionState): void {
|
|
this.currentOs = newState.os;
|
|
this.$forceUpdate(); // v-bind:class is not updated otherwise
|
|
}
|
|
}
|
|
|
|
function renderOsName(os: OperatingSystem): string {
|
|
switch (os) {
|
|
case OperatingSystem.Windows: return 'Windows';
|
|
case OperatingSystem.macOS: return 'macOS';
|
|
default: throw new RangeError(`Cannot render os name: ${OperatingSystem[os]}`);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/presentation/styles/fonts.scss";
|
|
@import "@/presentation/styles/colors.scss";
|
|
.container {
|
|
font-family: $normal-font;
|
|
display: flex;
|
|
align-items: center;
|
|
.os-list {
|
|
display: flex;
|
|
margin-left: 0.25rem;
|
|
div + div::before {
|
|
content: "|";
|
|
margin-left: 0.5rem;
|
|
}
|
|
.os-name {
|
|
&:not(.current) {
|
|
cursor: pointer;
|
|
&:hover {
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
&.current {
|
|
color: $gray;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|