Skip to content

Commit

Permalink
refactor(desktop): add mqtt properties component
Browse files Browse the repository at this point in the history
  • Loading branch information
ysfscream committed Nov 22, 2024
1 parent 890a640 commit 1972e75
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 66 deletions.
55 changes: 55 additions & 0 deletions src/components/MqttProperties.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<template>
<div class="mqtt-properties">
<template v-for="field in propertyFields">
<p
v-if="properties[field.key]"
:key="field.key"
:class="['properties', direction, { 'user-properties': field.key === 'userProperties' }]"
>
<template v-if="field.key === 'userProperties'">
<KeyValueEditor
class="msg-item-props"
:title="$t('connections.userProperties')"
:disabled="true"
:value="properties.userProperties"
/>
</template>
<template v-else>
<span>{{ $t(`connections.${field.key}`) }}: {{ properties[field.key] }}</span>
</template>
</p>
</template>
</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import KeyValueEditor from './KeyValueEditor.vue'
interface PropertyField {
key: keyof PushPropertiesModel
}
@Component({
components: {
KeyValueEditor,
},
})
export default class MqttProperties extends Vue {
@Prop({ required: true }) public properties!: PushPropertiesModel
@Prop({ default: '' }) public direction!: string
private propertyFields: PropertyField[] = [
{ key: 'subscriptionIdentifier' },
{ key: 'contentType' },
{ key: 'payloadFormatIndicator' },
{ key: 'topicAlias' },
{ key: 'responseTopic' },
{ key: 'correlationData' },
{ key: 'messageExpiryInterval' },
{ key: 'userProperties' },
]
}
</script>

<style lang="scss" scoped></style>
36 changes: 3 additions & 33 deletions src/components/MsgLeftItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,37 +34,7 @@
<span class="qos">QoS: {{ qos }}</span>
<span v-if="retain" class="retain">Retained</span>
</p>
<div class="meta">
<p v-if="properties.subscriptionIdentifier" class="properties left">
<span>{{ $t('connections.subscriptionIdentifier') }}: {{ properties.subscriptionIdentifier }}</span>
</p>
<p v-if="properties.contentType" class="properties left">
<span>{{ $t('connections.contentType') }}: {{ properties.contentType }}</span>
</p>
<p v-if="properties.payloadFormatIndicator" class="properties left">
<span>{{ $t('connections.payloadFormatIndicator') }}: {{ properties.payloadFormatIndicator }}</span>
</p>
<p v-if="properties.topicAlias" class="properties left">
<span>{{ $t('connections.topicAlias') }}: {{ properties.topicAlias }}</span>
</p>
<p v-if="properties.responseTopic" class="properties left">
<span>{{ $t('connections.responseTopic') }}: {{ properties.responseTopic }}</span>
</p>
<p v-if="properties.correlationData" class="properties left">
<span>{{ $t('connections.correlationData') }}: {{ properties.correlationData }}</span>
</p>
<p v-if="properties.messageExpiryInterval" class="properties left">
<span>{{ $t('connections.messageExpiryInterval') }}: {{ properties.messageExpiryInterval }}</span>
</p>
<p v-if="properties.userProperties" class="user-properties properties left">
<KeyValueEditor
class="msg-item-props"
:title="$t('connections.userProperties')"
:disabled="true"
:value="properties.userProperties"
/>
</p>
</div>
<MqttProperties class="meta" :properties="properties" direction="left" />
<template v-if="isLargeMsg">
<div class="large-message { .el-button { margin-top: 12px;}}">
<pre>{{ payload.substr(0, showMaxLen) }}<span><i class="iconfont icon-more"></i></span></pre>
Expand Down Expand Up @@ -92,16 +62,16 @@

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import KeyValueEditor from './KeyValueEditor.vue'
import FullMsgDialog from './FullMsgDialog.vue'
import Prism from 'prismjs'
import { Getter } from 'vuex-class'
import { SHOW_MAX_LENGTH } from '@/utils/data'
import MqttProperties from './MqttProperties.vue'
@Component({
components: {
KeyValueEditor,
FullMsgDialog,
MqttProperties,
},
})
export default class MsgLeftItem extends Vue {
Expand Down
36 changes: 3 additions & 33 deletions src/components/MsgRightItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,37 +19,7 @@
<span class="topic">Topic: {{ topic }}</span>
<span class="qos">QoS: {{ qos }}</span>
</p>
<div class="meta">
<p v-if="properties.subscriptionIdentifier" class="properties right">
<span>{{ $t('connections.subscriptionIdentifier') }}: {{ properties.subscriptionIdentifier }}</span>
</p>
<p v-if="properties.contentType" class="properties right">
<span>{{ $t('connections.contentType') }}: {{ properties.contentType }}</span>
</p>
<p v-if="properties.payloadFormatIndicator" class="properties right">
<span>{{ $t('connections.payloadFormatIndicator') }}: {{ properties.payloadFormatIndicator }}</span>
</p>
<p v-if="properties.topicAlias" class="properties right">
<span>{{ $t('connections.topicAlias') }}: {{ properties.topicAlias }}</span>
</p>
<p v-if="properties.responseTopic" class="properties right">
<span>{{ $t('connections.responseTopic') }}: {{ properties.responseTopic }}</span>
</p>
<p v-if="properties.correlationData" class="properties right">
<span>{{ $t('connections.correlationData') }}: {{ properties.correlationData }}</span>
</p>
<p v-if="properties.messageExpiryInterval" class="properties right">
<span>{{ $t('connections.messageExpiryInterval') }}: {{ properties.messageExpiryInterval }}</span>
</p>
<p v-if="properties.userProperties" class="user-properties properties right">
<KeyValueEditor
class="msg-item-props"
:title="$t('connections.userProperties')"
:disabled="true"
:value="properties.userProperties"
/>
</p>
</div>
<MqttProperties class="meta" :properties="properties" direction="right" />
<pre>{{ payload }}</pre>
</div>
<p class="right-time time">{{ createAt }}</p>
Expand All @@ -58,11 +28,11 @@

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import KeyValueEditor from './KeyValueEditor.vue'
import MqttProperties from './MqttProperties.vue'
@Component({
components: {
KeyValueEditor,
MqttProperties,
},
})
export default class MsgrightItem extends Vue {
Expand Down

0 comments on commit 1972e75

Please sign in to comment.