Add action to oh-gauge-card (#1175)
Closes #1107. Signed-off-by: TheGreyDiamond <s-einkauf@oest-rs.de> Also-by: Yannick Schaus <github@schaus.net>pull/1180/head
TheGreyDiamond
GitHub
parent
ed06717ca3
commit
4b0214292a
|
|
@ -158,6 +158,155 @@ Display a read-only gauge in a card to visualize a quantifiable item
|
|||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Action
|
||||
<div class="props">
|
||||
<PropGroup name="actions" label="Action">
|
||||
Action to perform when the gauge is clicked
|
||||
<PropBlock type="TEXT" name="action" label="Action">
|
||||
<PropDescription>
|
||||
Type of action to perform
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="navigate" label="Navigate to page" />
|
||||
<PropOption value="command" label="Send command" />
|
||||
<PropOption value="toggle" label="Toggle item" />
|
||||
<PropOption value="options" label="Command options" />
|
||||
<PropOption value="rule" label="Run rule" />
|
||||
<PropOption value="popup" label="Open popup" />
|
||||
<PropOption value="popover" label="Open popover" />
|
||||
<PropOption value="sheet" label="Open sheet" />
|
||||
<PropOption value="photos" label="Open photo browser" />
|
||||
<PropOption value="group" label="Group details" />
|
||||
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||
<PropOption value="url" label="External URL" />
|
||||
<PropOption value="variable" label="Set Variable" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||
<PropDescription>
|
||||
URL to navigate to
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||
<PropDescription>
|
||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||
<PropDescription>
|
||||
Item to perform the action on
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||
<PropDescription>
|
||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||
<PropDescription>
|
||||
Command to send to the item when "toggle item" is selected as the action, and the item's state is equal to the command above
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||
<PropDescription>
|
||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||
<PropDescription>
|
||||
Rule to run
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||
<PropDescription>
|
||||
Page to navigate to
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||
<PropDescription>
|
||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="f7-circle" label="Circle" />
|
||||
<PropOption value="f7-cover" label="Cover" />
|
||||
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||
<PropOption value="f7-dive" label="Dive" />
|
||||
<PropOption value="f7-fade" label="Fade" />
|
||||
<PropOption value="f7-flip" label="Flip" />
|
||||
<PropOption value="f7-parallax" label="Parallax" />
|
||||
<PropOption value="f7-push" label="Push" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||
<PropDescription>
|
||||
Page or widget to display in the modal
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||
<PropDescription>
|
||||
Configuration (prop values) for the target modal page or widget
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||
<PropDescription>
|
||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||
<PropDescription>
|
||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||
<PropDescription>
|
||||
Group item whose members to show in a popup
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||
<PropDescription>
|
||||
Start analyzing with the specified (set of) item(s)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||
<PropDescription>
|
||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="(empty)" label="Dynamic" />
|
||||
<PropOption value="day" label="Day" />
|
||||
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||
<PropOption value="month" label="Month" />
|
||||
<PropOption value="year" label="Year" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||
<PropDescription>
|
||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="time" label="Time" />
|
||||
<PropOption value="aggregate" label="Aggregate" />
|
||||
<PropOption value="calendar" label="Calendar" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||
<PropDescription>
|
||||
Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||
<PropDescription>
|
||||
The variable name to set
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||
<PropDescription>
|
||||
The value to set the variable to
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- GENERATED /props -->
|
||||
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@ import GaugeParameters from '../system/gauge.js'
|
|||
export const OhGaugeCardDefinition = () => new WidgetDefinition('oh-gauge-card', 'Gauge Card', 'Display a read-only gauge in a card to visualize a quantifiable item')
|
||||
.paramGroup(CardParameterGroup(), CardParameters())
|
||||
.paramGroup(pg('gauge', 'Gauge', 'Parameters are passed to the underlying <a target="_blank" class="external text-color-blue" href="https://framework7.io/vue/gauge.html#gauge-properties">Gauge control</a>'), GaugeParameters())
|
||||
.paramGroup(actionGroup(null, 'Action to perform when the gauge is clicked'), actionParams())
|
||||
|
||||
// OhKnobCard
|
||||
import KnobParameters from '../system/knob.js'
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@
|
|||
<div>{{ config.title }}</div>
|
||||
</f7-card-header>
|
||||
<f7-card-content class="oh-gauge-card display-flex justify-content-center">
|
||||
<oh-gauge :context="childContext(context.component)" @command="onCommand" />
|
||||
<f7-link v-if="config.action" class="oh-gauge-link" @click="performAction">
|
||||
<oh-gauge :context="childContext(context.component)" />
|
||||
</f7-link>
|
||||
<oh-gauge v-else :context="childContext(context.component)" />
|
||||
</f7-card-content>
|
||||
<f7-card-footer v-if="config.footer">
|
||||
{{ config.footer }}
|
||||
|
|
@ -13,15 +16,22 @@
|
|||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.oh-gauge-link
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 100%
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import mixin from '../widget-mixin'
|
||||
import OhGauge from '../system/oh-gauge.vue'
|
||||
import { actionsMixin } from '../widget-actions'
|
||||
import { OhGaugeCardDefinition } from '@/assets/definitions/widgets/standard/cards'
|
||||
|
||||
export default {
|
||||
mixins: [mixin],
|
||||
mixins: [mixin, actionsMixin],
|
||||
components: {
|
||||
OhGauge
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue