2022-07-03 14:40:02 +09:00
|
|
|
<template>
|
2023-01-06 13:40:17 +09:00
|
|
|
<div class="_gaps_m">
|
2023-01-07 15:09:46 +09:00
|
|
|
<MkSelect v-model="statusbar.type" placeholder="Please select">
|
2022-07-03 14:40:02 +09:00
|
|
|
<template #label>{{ i18n.ts.type }}</template>
|
|
|
|
<option value="rss">RSS</option>
|
|
|
|
<option value="federation">Federation</option>
|
|
|
|
<option value="userList">User list timeline</option>
|
2023-01-07 15:09:46 +09:00
|
|
|
</MkSelect>
|
2022-07-03 14:40:02 +09:00
|
|
|
|
2023-01-05 21:04:56 +09:00
|
|
|
<MkInput v-model="statusbar.name" manual-save>
|
2022-07-07 21:00:42 +09:00
|
|
|
<template #label>{{ i18n.ts.label }}</template>
|
2022-07-03 14:40:02 +09:00
|
|
|
</MkInput>
|
|
|
|
|
2023-01-05 21:04:56 +09:00
|
|
|
<MkSwitch v-model="statusbar.black">
|
2022-07-03 14:40:02 +09:00
|
|
|
<template #label>Black</template>
|
|
|
|
</MkSwitch>
|
|
|
|
|
2023-01-07 15:09:46 +09:00
|
|
|
<MkRadios v-model="statusbar.size">
|
2022-07-07 21:00:42 +09:00
|
|
|
<template #label>{{ i18n.ts.size }}</template>
|
2022-07-04 01:37:47 +09:00
|
|
|
<option value="verySmall">{{ i18n.ts.small }}+</option>
|
|
|
|
<option value="small">{{ i18n.ts.small }}</option>
|
|
|
|
<option value="medium">{{ i18n.ts.medium }}</option>
|
|
|
|
<option value="large">{{ i18n.ts.large }}</option>
|
|
|
|
<option value="veryLarge">{{ i18n.ts.large }}+</option>
|
2023-01-07 15:09:46 +09:00
|
|
|
</MkRadios>
|
2022-07-04 01:37:47 +09:00
|
|
|
|
2022-07-03 14:40:02 +09:00
|
|
|
<template v-if="statusbar.type === 'rss'">
|
2023-01-05 21:04:56 +09:00
|
|
|
<MkInput v-model="statusbar.props.url" manual-save type="url">
|
2022-07-03 14:40:02 +09:00
|
|
|
<template #label>URL</template>
|
|
|
|
</MkInput>
|
2023-01-05 21:04:56 +09:00
|
|
|
<MkSwitch v-model="statusbar.props.shuffle">
|
2022-07-15 17:12:08 +09:00
|
|
|
<template #label>{{ i18n.ts.shuffle }}</template>
|
|
|
|
</MkSwitch>
|
2023-01-05 21:04:56 +09:00
|
|
|
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save type="number">
|
2022-07-07 21:00:42 +09:00
|
|
|
<template #label>{{ i18n.ts.refreshInterval }}</template>
|
2022-07-03 14:40:02 +09:00
|
|
|
</MkInput>
|
2023-01-07 15:09:46 +09:00
|
|
|
<MkRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1">
|
2022-07-07 21:00:42 +09:00
|
|
|
<template #label>{{ i18n.ts.speed }}</template>
|
|
|
|
<template #caption>{{ i18n.ts.fast }} <-> {{ i18n.ts.slow }}</template>
|
2023-01-07 15:09:46 +09:00
|
|
|
</MkRange>
|
2023-01-05 21:04:56 +09:00
|
|
|
<MkSwitch v-model="statusbar.props.marqueeReverse">
|
2022-07-07 21:00:42 +09:00
|
|
|
<template #label>{{ i18n.ts.reverse }}</template>
|
2022-07-03 14:40:02 +09:00
|
|
|
</MkSwitch>
|
|
|
|
</template>
|
|
|
|
<template v-else-if="statusbar.type === 'federation'">
|
2023-01-05 21:04:56 +09:00
|
|
|
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save type="number">
|
2022-07-07 21:00:42 +09:00
|
|
|
<template #label>{{ i18n.ts.refreshInterval }}</template>
|
2022-07-03 14:40:02 +09:00
|
|
|
</MkInput>
|
2023-01-07 15:09:46 +09:00
|
|
|
<MkRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1">
|
2022-07-07 21:00:42 +09:00
|
|
|
<template #label>{{ i18n.ts.speed }}</template>
|
|
|
|
<template #caption>{{ i18n.ts.fast }} <-> {{ i18n.ts.slow }}</template>
|
2023-01-07 15:09:46 +09:00
|
|
|
</MkRange>
|
2023-01-05 21:04:56 +09:00
|
|
|
<MkSwitch v-model="statusbar.props.marqueeReverse">
|
2022-07-07 21:00:42 +09:00
|
|
|
<template #label>{{ i18n.ts.reverse }}</template>
|
2022-07-03 14:40:02 +09:00
|
|
|
</MkSwitch>
|
2023-01-05 21:04:56 +09:00
|
|
|
<MkSwitch v-model="statusbar.props.colored">
|
2022-07-07 21:00:42 +09:00
|
|
|
<template #label>{{ i18n.ts.colored }}</template>
|
2022-07-03 14:40:02 +09:00
|
|
|
</MkSwitch>
|
|
|
|
</template>
|
|
|
|
<template v-else-if="statusbar.type === 'userList' && userLists != null">
|
2023-01-07 15:09:46 +09:00
|
|
|
<MkSelect v-model="statusbar.props.userListId">
|
2022-07-03 14:40:02 +09:00
|
|
|
<template #label>{{ i18n.ts.userList }}</template>
|
|
|
|
<option v-for="list in userLists" :value="list.id">{{ list.name }}</option>
|
2023-01-07 15:09:46 +09:00
|
|
|
</MkSelect>
|
2023-01-05 21:04:56 +09:00
|
|
|
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save type="number">
|
2022-07-07 21:00:42 +09:00
|
|
|
<template #label>{{ i18n.ts.refreshInterval }}</template>
|
2022-07-03 14:40:02 +09:00
|
|
|
</MkInput>
|
2023-01-07 15:09:46 +09:00
|
|
|
<MkRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1">
|
2022-07-07 21:00:42 +09:00
|
|
|
<template #label>{{ i18n.ts.speed }}</template>
|
|
|
|
<template #caption>{{ i18n.ts.fast }} <-> {{ i18n.ts.slow }}</template>
|
2023-01-07 15:09:46 +09:00
|
|
|
</MkRange>
|
2023-01-05 21:04:56 +09:00
|
|
|
<MkSwitch v-model="statusbar.props.marqueeReverse">
|
2022-07-07 21:00:42 +09:00
|
|
|
<template #label>{{ i18n.ts.reverse }}</template>
|
2022-07-03 14:40:02 +09:00
|
|
|
</MkSwitch>
|
|
|
|
</template>
|
|
|
|
|
2023-01-06 09:41:14 +09:00
|
|
|
<div class="_buttons">
|
|
|
|
<MkButton danger @click="del">{{ i18n.ts.remove }}</MkButton>
|
2022-07-03 14:40:02 +09:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
2023-02-16 23:09:41 +09:00
|
|
|
import { reactive, watch } from 'vue';
|
2023-01-07 15:09:46 +09:00
|
|
|
import MkSelect from '@/components/MkSelect.vue';
|
|
|
|
import MkInput from '@/components/MkInput.vue';
|
2023-01-07 14:59:54 +09:00
|
|
|
import MkSwitch from '@/components/MkSwitch.vue';
|
2023-01-07 15:09:46 +09:00
|
|
|
import MkRadios from '@/components/MkRadios.vue';
|
2023-01-06 09:41:14 +09:00
|
|
|
import MkButton from '@/components/MkButton.vue';
|
2023-01-07 15:09:46 +09:00
|
|
|
import MkRange from '@/components/MkRange.vue';
|
2022-07-03 14:40:02 +09:00
|
|
|
import { defaultStore } from '@/store';
|
|
|
|
import { i18n } from '@/i18n';
|
2022-11-17 09:31:07 +09:00
|
|
|
import { deepClone } from '@/scripts/clone';
|
2022-07-03 14:40:02 +09:00
|
|
|
|
|
|
|
const props = defineProps<{
|
|
|
|
_id: string;
|
|
|
|
userLists: any[] | null;
|
|
|
|
}>();
|
|
|
|
|
2022-11-17 09:31:07 +09:00
|
|
|
const statusbar = reactive(deepClone(defaultStore.state.statusbars.find(x => x.id === props._id)));
|
2022-07-03 14:40:02 +09:00
|
|
|
|
|
|
|
watch(() => statusbar.type, () => {
|
|
|
|
if (statusbar.type === 'rss') {
|
|
|
|
statusbar.name = 'NEWS';
|
|
|
|
statusbar.props.url = 'http://feeds.afpbb.com/rss/afpbb/afpbbnews';
|
2022-07-15 17:12:08 +09:00
|
|
|
statusbar.props.shuffle = true;
|
2022-07-03 14:40:02 +09:00
|
|
|
statusbar.props.refreshIntervalSec = 120;
|
|
|
|
statusbar.props.display = 'marquee';
|
|
|
|
statusbar.props.marqueeDuration = 100;
|
|
|
|
statusbar.props.marqueeReverse = false;
|
|
|
|
} else if (statusbar.type === 'federation') {
|
|
|
|
statusbar.name = 'FEDERATION';
|
|
|
|
statusbar.props.refreshIntervalSec = 120;
|
|
|
|
statusbar.props.display = 'marquee';
|
|
|
|
statusbar.props.marqueeDuration = 100;
|
|
|
|
statusbar.props.marqueeReverse = false;
|
|
|
|
statusbar.props.colored = false;
|
|
|
|
} else if (statusbar.type === 'userList') {
|
|
|
|
statusbar.name = 'LIST TL';
|
|
|
|
statusbar.props.refreshIntervalSec = 120;
|
|
|
|
statusbar.props.display = 'marquee';
|
|
|
|
statusbar.props.marqueeDuration = 100;
|
|
|
|
statusbar.props.marqueeReverse = false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2022-07-04 01:37:47 +09:00
|
|
|
watch(statusbar, save);
|
|
|
|
|
2022-07-03 14:40:02 +09:00
|
|
|
async function save() {
|
|
|
|
const i = defaultStore.state.statusbars.findIndex(x => x.id === props._id);
|
2022-11-17 09:31:07 +09:00
|
|
|
const statusbars = deepClone(defaultStore.state.statusbars);
|
|
|
|
statusbars[i] = deepClone(statusbar);
|
2022-07-03 14:40:02 +09:00
|
|
|
defaultStore.set('statusbars', statusbars);
|
|
|
|
}
|
|
|
|
|
|
|
|
function del() {
|
|
|
|
defaultStore.set('statusbars', defaultStore.state.statusbars.filter(x => x.id !== props._id));
|
|
|
|
}
|
|
|
|
</script>
|