jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Use TagInput for devices

Browse Source
This commit is contained in:
Johannes Zellner
2025-06-10 22:26:53 +02:00
parent c3edf44cb4
commit 8f75f7332d
1 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/app/Resources.vue
+21 -14
View File
@@ -1,7 +1,7 @@
<script setup>
import { ref, onMounted } from 'vue';
import { Button, FormGroup, TextInput } from 'pankow';
import { ref, onMounted, computed } from 'vue';
import { Button, FormGroup, TagInput } from 'pankow';
import { prettyBinarySize } from 'pankow/utils';
import AppsModel from '../../models/AppsModel.js';
import SystemModel from '../../models/SystemModel.js';
@@ -20,8 +20,8 @@ const cpuQuota = ref(0);
const currentCpuQuota = ref(0);
const devicesBusy = ref(false);
const devicesError = ref('');
const devices = ref('');
const currentDevices = ref('');
const devices = ref([]);
const currentDevices = ref([]);
async function onSubmitMemoryLimit() {
memoryLimitBusy.value = true;
@@ -50,9 +50,10 @@ async function onSubmitCpuQuota() {
async function onSubmitDevices() {
devicesBusy.value = true;
devicesError.value = '';
const devs = {};
devices.value.split(',').forEach(d => {
devices.value.forEach(d => {
if (!d.trim()) return;
devs[d.trim()] = {};
});
@@ -66,17 +67,24 @@ async function onSubmitDevices() {
}
// give polling some time
setTimeout(() => devicesBusy.value = false, 2000);
setTimeout(() => {
devicesBusy.value = false;
currentDevices.value = Object.keys(devs);
}, 2000);
}
const devicesChanged = computed(() => {
return !(devices.value.toString() == currentDevices.value.toString());
});
onMounted(async () => {
const [error, result] = await systemModel.memory();
if (error) return console.error(error);
cpuQuota.value = props.app.cpuQuota;
currentCpuQuota.value = props.app.cpuQuota;
devices.value = Object.keys(props.app.devices).join(', ');
currentDevices.value = devices.value;
devices.value = Object.keys(props.app.devices);
currentDevices.value = Object.keys(props.app.devices);
memoryLimit.value = props.app.memoryLimit || props.app.manifest.memoryLimit || (256 * 1024 * 1024);
currentMemoryLimit.value = memoryLimit.value;
@@ -127,16 +135,15 @@ onMounted(async () => {
<form @submit.prevent="onSubmitDevices()" autocomplete="off">
<fieldset :disabled="devicesBusy || app.error || app.taskId">
<input style="display: none;" type="submit" :disabled="devices === currentDevices"/>
<input style="display: none;" type="submit" :disabled="!devicesChanged"/>
<FormGroup>
<!-- TODO translate -->
<label for="devicesInput">Devices <sup><a href="https://docs.cloudron.io/apps/#devices" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<p>Comma serparated list of devices mounted into the app</p>
<TextInput id="devicesInput" v-model="devices" placeholder="/dev/ttyUSB0, /dev/hidraw0, ..."/>
<span class="text-danger" v-if="devicesError">{{ devicesError }}</span>
<TagInput id="devicesInput" v-model="devices" placeholder="/dev/ttyUSB0, /dev/hidraw0, ..."/>
<div class="text-danger" v-if="devicesError">{{ devicesError }}</div>
</FormGroup>
</fieldset>
</form>
<br/>
<Button @click="onSubmitDevices()" :loading="devicesBusy" :disabled="devices === currentDevices || devicesBusy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">Set Devices</Button>
<Button @click="onSubmitDevices()" :loading="devicesBusy" :disabled="!devicesChanged || devicesBusy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">Set Devices</Button>
</div>
</template>