iobroker.energiefluss-erweitert
Version:
This ioBroker adapter is the next Version of the energiefluss with the attribute 'erweitert' and allows to display an energyflow animation inside an iframe or HTML DIV.
684 lines (676 loc) • 222 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Energiefluss - erweitert *Configuration*</title>
<meta name=description content="Provides an animated energy-flow">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="manifest" id="manifestData">
<link class=favicon rel=icon type=image/ico href="img/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#538ea3">
<meta name="theme-color" content="#538ea3">
<link rel="stylesheet" href="style/jquery-ui.css">
<link rel="stylesheet" href="style/multiselect.css">
<link rel="stylesheet" href="style/style.css?v=0.6.1">
<script src="../../socket.io/socket.io.js"></script>
<script src="js/jquery-3.6.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/translate.min.js"></script>
<script src="js/words.js?v=0.6.1"></script>
<script src="js/jscolor.min.js"></script>
<script src="js/multiselect.min.js"></script>
<script src="js/ace/ace.js"></script>
<script src="js/ace/ext-language_tools.js"></script>
<script src="js/functions.min.js?v=0.6.1"></script>
<style id="style_animation"></style>
<style id="style_user"></style>
</head>
<body>
<div id="help_section" class="translateT" title="Help Section" data-lang-title="lbl_help_section"></div>
<div id="dialog_section" title="Backup Section"></div>
<div id="action_change_value">
<div class="detail_box shortcut" id="shortcuts.action">
<div class="contentBox">
<div class="form_div text">
<input type="text" class="input_number" name="shortcuts.action.value" id="shortcuts.action.value"
placeholder="" autocorrect="off" autocomplete="off">
<label for="shortcuts.action.value" class="form_label translate" data-lang="opt_value">Value</label>
</div>
</div>
</div>
<div class="detail_box shortcut" id="shortcuts.elements"></div>
</div>
<div id="manage_shortcuts_section" class="translateT" title="Manage Direct Accesses"
data-lang-title="value_manage_shortcuts">
<div class="ef-table-div">
<table class="ef-table" id="shortcut-table">
<thead>
<tr>
<th><span class="translate" data-lang="lbl_alias">Alias</span></th>
<th><span class="translate" data-lang="opt_value">Value</span></th>
<th><span class="translate" data-lang="lbl_action">Actions</span></th>
</tr>
</thead>
<tbody>
<tr data-id="-1" id="shortcut_tmp_line">
<td class="translate" data-lang="no_shortcuts_added" colspan="3" style="text-align: left;">There
are currently no
shortcuts added!
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="form_div no_margin">
<input type="text" class="input_text translateP" id="shortcut_alias"
name="shortcut_alias" autocorrect="off" autocomplete="off" value=""
form="frm-addQuickAccess" minlength="1" placeholder="Alias"
data-lang-placeholder="lbl_alias">
</div>
</td>
<td>
<div class="form_div no_margin">
<input type="text" class="input_text translateP" id="shortcut_value"
name="shortcut_value" autocorrect="off" autocomplete="off" value=""
form="frm-addQuickAccess" minlength="1" placeholder="Value"
data-lang-placeholder="opt_value" required>
</div>
</td>
<td>
<form id="frm-addQuickAccess">
<input class="input_button translateV" type="submit" value="Add"
data-lang-value="value_add" style="width: auto;">
</form>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div id="loading">
<div class="loading-spinner">
<div class="loading-spinner-dot"></div>
<div class="loading-spinner-dot"></div>
<div class="loading-spinner-dot"></div>
<div class="loading-spinner-dot"></div>
<div class="loading-spinner-dot"></div>
<div class="loading-spinner-dot"></div>
</div>
<span id="loading_text" class="translate" data-lang="msg_loading_workspace">Loading your Energiefluss
Workspace</span>
<span id="loading_text_error"><a
href="https://github.com/SKB-CGN/ioBroker.energiefluss-erweitert/wiki/Troubleshooting" class="translate"
data-lang="failmsg_not_reachable" target="_blank">If the page is not
loading, please refer here, to
find out, how
to
fix it!</a></span>
<div id="stateExplorerContainer" class="popUpContainer">
<div class="title">
<span class="translate" data-lang="title_stateExplorer">Object Browser</span>
<div class="close" onclick="closeEditorContainer('stateExplorer');"></div>
</div>
<div class="formFilter">
<div class="form_div textbox">
<input type="text" class="input_text icon_in_input_pad stateExplorerFilter" placeholder=""
autocorrect="off" autocomplete="off" name="stateExplorerFilter" id="stateExplorerFilter">
<label for="stateExplorerFilter" class="translate form_label" data-lang="lbl_filter">Filter</label>
<div class="icon_wrapper">
<span class="iconify" data-icon="mdi:search" data-width="24" data-height="24"
style="color: var(--primary);"></span>
</div>
</div>
</div>
<div id="stateExplorer" class="scrollbar">
<span id="stateExplorer_placeholder" style="padding: 5px;margin: 5px;display: inline-block;">
<div class="cv-spinner">
<span class="spinner"></span>
<span class="translate" data-lang="title_stateExplorer_loading"
style="padding-left: 5px;">Loading Object Browser ...</span>
</div>
</span>
</div>
<div class="button_area">
<div style="padding: 10px;float: left;">
<input type="button" value="Save" id="reloadStateExplorer" class="input_button translateV"
data-lang-value="lbl_reload_stateExplorer" style="width: auto;">
</div>
<div style="justify-content: end; padding: 10px;">
<input type="button" value="Select" id="select_state" class="input_button translateV"
data-lang-value="value_select" disabled>
<input type="button" value="Cancel" class="input_button translateV red"
data-lang-value="value_cancel" onclick="closeEditorContainer('stateExplorer');">
</div>
</div>
</div>
<div id="codeEditorContainer" class="popUpContainer">
<div class="title">
<span class="translate" data-lang="title_codeEditor">Code Editor</span>
<div class="close" onclick="closeEditorContainer('codeEditor');"></div>
</div>
<!-- ACE Editor -->
<div id="codeEditor" class="scrollbar"></div>
<div class="button_area">
<div style="padding: 10px;float: left;">
<input type="button" value="Save" id="overrideFormatCode" class="input_button translateV"
data-lang-value="lbl_format_json" style="width: auto;">
</div>
<div style="justify-content: end; padding: 10px;">
<input type="button" value="Save" id="save_code" class="input_button translateV"
data-lang-value="lbl_save">
<input type="button" value="Cancel" class="input_button translateV red"
data-lang-value="value_cancel" onclick="closeEditorContainer('codeEditor');">
</div>
</div>
</div>
<div id="frameContainer" class="popUpContainer">
<div class="title">
<div class="close" onclick="closeEditorContainer('frame');"></div>
</div>
</div>
</div>
<div class="tabbed">
<input checked="checked" id="tab1" type="radio" name="tabs">
<input id="tab2" type="radio" name="tabs">
<input id="tab3" type="radio" name="tabs">
<input id="tab4" type="radio" name="tabs">
<input id="tab5" type="radio" name="tabs">
<input id="tab6" type="radio" name="tabs">
<input id="tab7" type="radio" name="tabs">
<input id="tab8" type="radio" name="tabs">
<nav class="scrollbar">
<label for="tab1"><span class="iconify menu translate"
data-icon="material-symbols:overview-key-outline-rounded" data-width="24"
data-height="24"></span><span class="translate" data-lang="lbl_overview">Overview</span></label>
<label for="tab2"><span class="iconify menu" data-icon="mdi:database-search" data-width="24"
data-height="24"></span><span class="translate"
data-lang="lbl_datasources">Datasources</span></label>
<label for="tab3"><span class="iconify menu" data-icon="material-symbols:animation" data-width="24"
data-height="24"></span><span class="translate" data-lang="lbl_animation">Animation</span></label>
<label for="tab4"><span class="iconify menu" data-icon="material-symbols:calculate-outline-rounded"
data-width="24" data-height="24"></span><span class="translate"
data-lang="lbl_calculation">Calculation</span></label>
<label for="tab5"><span class="iconify menu" data-icon="mdi:file-image" data-width="24"
data-height="24"></span><span class="translate" data-lang="lbl_gallery">Gallery</span></label>
<label for="tab6"><span class="iconify menu" data-icon="material-symbols:css-rounded" data-width="24"
data-height="24"></span><span class="translate" data-lang="lbl_styles">Styles</span></label>
<label for="tab7"><span class="iconify menu" data-icon="mdi:cog" data-width="24"
data-height="24"></span><span class="translate" data-lang="lbl_settings">Settings</span></label>
<label for="#"
onclick="window.open('https://github.com/SKB-CGN/ioBroker.energiefluss-erweitert/wiki')"><span
class="iconify menu" data-icon="material-symbols:help-outline" data-width="24"
data-height="24"></span><span class="translate" data-lang="lbl_help">Help</span></label>
<label for="tab8"><span class="iconify menu" data-icon="material-symbols:save" data-width="24"
data-height="24"></span><span class="translate" data-lang="lbl_save">Save</span></label>
<span class="version">
<span id="runningVersion"></span>
<span id="newVersion" class="newVersion"></span>
</span>
</nav>
<figure>
<div class="tab1">
<div id="config_bar" class="right">
<div class="title"><span class="translate" data-lang="lbl_config_config">Configuration of the
Element</span>
<div id="config_swap" class="swap translateT tt-element" data-lang-title="btn_swap"></div>
<div id="config_close" class="close"></div>
</div>
<div class="tabbed">
<input checked="checked" id="tab1_config" type="radio" name="tabs_config">
<input id="tab2_config" type="radio" name="tabs_config">
<nav>
<label for="tab1_config"><span class="iconify menu"
data-icon="material-symbols:format-list-bulleted" data-width="24"
data-height="24"></span><span class="translate"
data-lang="lbl_config_basic">Basic</span></label>
<label for="tab2_config"><span class="iconify menu"
data-icon="material-symbols:format-list-bulleted-add" data-width="24"
data-height="24"></span><span class="translate"
data-lang="lbl_config_extended">Extended</span></label>
</nav>
<figure>
<div class="tab1_config scrollbar">
<div class="detail_box">
<span class="config_sec translate" data-lang="lbl_config_element">Element</span>
<div class="contentBox">
<div class="form_div select">
<label for="elm_select" class="form_label translate">ID</label>
<select class="input_select" name="elm_select" id="elm_select"></select>
</div>
</div>
</div>
<div class="detail_box elm_config_box circle rect icon svg image fObj">
<span class="config_sec translate" data-lang="lbl_config_size">Size</span>
<div class="contentBox">
<div class="elm_config_box rect icon svg image fObj">
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute" min="1"
value="" name="elm_width" id="elm_width" placeholder=""
autocorrect="off" autocomplete="off">
<label for="elm_width" class="form_label translate"
data-lang="lbl_width">Width</label>
</div>
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute" min="1"
value="" name="elm_height" id="elm_height" placeholder=""
autocorrect="off" autocomplete="off">
<label for="elm_height" class="form_label translate"
data-lang="lbl_height">Height</label>
</div>
<div class="elm_config_box icon">
<div class="form_div textbox">
<span class="translate" data-lang="ex_config_icon_tipp"><u>Tipp:</u>
Square Icons
need same width and height! Other ones can
have
other
formats.</span>
</div>
</div>
</div>
<div class="elm_config_box rect">
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute" min="0"
value="" name="elm_rx" id="elm_rx" placeholder="" autocorrect="off"
autocomplete="off">
<label for="elm_rx" class="form_label translate"
data-lang="lbl_rounded_corners">Rounded
Corner</label>
</div>
</div>
<div class="elm_config_box circle">
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute" min="1"
value="" name="elm_radius" id="elm_radius" placeholder=""
autocorrect="off" autocomplete="off">
<label for="elm_radius" class="form_label translate"
data-lang="lbl_radius">Radius</label>
</div>
</div>
<div class="elm_config_box circle rect">
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute" min="1"
value="" name="elm_stroke" id="elm_stroke" placeholder=""
autocorrect="off" autocomplete="off">
<label for="elm_stroke" class="form_label translate"
data-lang="lbl_stroke_width">Stroke
width</label>
</div>
</div>
</div>
</div>
<div class="detail_box elm_config_box circle rect text icon svg image fObj">
<span class="config_sec translate" data-lang="lbl_coordinates">Position</span>
<div class="contentBox">
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute"
name="elm_pos_x" id="elm_pos_x" placeholder="" autocorrect="off"
autocomplete="off" min="0.0" step="0.5">
<label for="elm_pos_x" class="form_label translate"
data-lang="lbl_pos_x">Position
X-Axis</label>
</div>
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute"
name="elm_pos_y" id="elm_pos_y" placeholder="" autocorrect="off"
autocomplete="off" min="0.0" step="0.5">
<label for="elm_pos_y" class="form_label translate"
data-lang="lbl_pos_y">Position
Y-Axis</label>
</div>
</div>
</div>
<div class="detail_box">
<span class="config_sec translate" data-lang="lbl_organize">Organize</span>
<div class="contentBox">
<div style="padding-top: 10px;">
<a id="changeOrder_foreground" class="changeOrder tt-element translateT"
data-lang-title="title_arrange_foreground" title="Bring Forward"><span
class="iconify add_element_area "
data-icon="mdi:arrange-bring-forward" data-height="24"
data-width="24"></span></a>
<a id="changeOrder_background" class="changeOrder tt-element translateT"
data-lang-title="title_arrange_background" title="Send Backwards"><span
class="iconify add_element_area "
data-icon="mdi:arrange-send-backward" data-height="24"
data-width="24"></span></a><br>
<img src="img/icon_help.png" class="help margin" data-help="help_organize">
</div>
</div>
</div>
<div class="detail_box elm_config_box text">
<span class="config_sec translate" data-lang="legend_alignment">Alignment</span>
<div class="contentBox">
<div class="form_div select">
<label for="elm_align" class="form_label translate"
data-lang="legend_alignment">Alignment</label>
<div class="select-option">
<select class="input_select elm_config style" id="elm_align"
name="elm_align">
<option value="start" class="translate" data-lang="opt_left">
Left
</option>
<option value="middle" class="translate" data-lang="opt_middle">
Middle</option>
<option value="end" class="translate" data-lang="opt_right">
Right</option>
</select>
</div>
</div>
<div class="form_div text info">
<span class="translate" data-lang="ex_config_align">This will
change, if
you
rotate the element</span>
</div>
<div class="slider_basic">
<div class="form_div textbox">
<input type="number" id="elm_degree" min="0" max="360"
class="input_number input_number_small elm_config attribute"
placeholder="" autocorrect="off" autocomplete="off">
<label for="elm_degree" class="form_label translate"
data-lang="lbl_rotation">Rotation</label>
</div>
<div class="form_div noFocusLine">
<input type="range" value="0" id="elm_degree_slider" min="0" max="360"
class="slider elm_config attribute">
</div>
</div>
</div>
</div>
<div class="detail_box elm_config_box icon">
<span class="config_sec translate" data-lang="legend_alignment">Alignment</span>
<div class="contentBox">
<div class="form_div select">
<label for="elm_flip" class="translate form_label"
data-lang="lbl_flip">Horizontal/Vertical flip</label>
<div class="select-option">
<select class="input_select elm_config attribute" id="elm_flip"
name="elm_flip">
<option value="" class="translate" data-lang="opt_none" selected>
Deactivated
</option>
<option value="horizontal" class="translate"
data-lang="opt_horizontal">
Horizontal
</option>
<option value="vertical" class="translate" data-lang="opt_vertical">
Vertical</option>
<option value="horizontal,vertical" class="translate"
data-lang="opt_horizontal_vertical">
Horizontal and vertical</option>
</select>
</div>
</div>
<div class="form_div select">
<label for="elm_rotate" class="translate form_label"
data-lang="lbl_rotation">Rotation</label>
<div class="select-option">
<select class="input_select elm_config attribute" id="elm_rotate"
name="elm_rotate">
<option value="0" class="translate" data-lang="opt_none" selected>
Deactivated
</option>
<option value="90deg" class="translate" data-lang="opt_90_deg">
90 Degree
</option>
<option value="180deg" class="translate" data-lang="opt_180_deg">
180 Degree</option>
<option value="270deg" class="translate" data-lang="opt_270_deg">
270 Degree</option>
</select>
</div>
</div>
</div>
</div>
<div class="elm_config_box circle rect text use icon svg fObj">
<div class="detail_box">
<span class="config_sec translate" data-lang="lbl_color">Color</span>
<div class="contentBox">
<div class="form_div textbox">
<input type="text" class="input_text color elm_config" name="elm_color"
id="elm_color" placeholder="" autocorrect="off" autocomplete="off"
data-jscolor="{}">
<label for="elm_color"
class="form_label elm_config_box circle rect text icon svg translate"
data-lang="lbl_outline_color">Outline
Color</label>
<label for="elm_color" class="form_label elm_config_box use translate"
data-lang="lbl_animation_color">Animation
Color</label>
</div>
<!--
<div class="form_div button">
<input type="button" value="Switch to gradient"
class="input_button color_change translateV"
data-lang-value="value_color_change_color">
</div>
-->
<div class="elm_config_box use">
<div class="form_div textbox">
<input type="text" class="input_text color elm_config"
name="elm_line_color" id="elm_line_color" placeholder=""
autocorrect="off" autocomplete="off" data-jscolor="{}">
<label for="elm_line_color" class="form_label translate"
data-lang="lbl_line_color">Line
Color</label>
</div>
</div>
<div class="elm_config_box circle rect text">
<div class="form_div textbox">
<input type="text" class="input_text color elm_config "
name="elm_fill" id="elm_fill" placeholder="" autocorrect="off"
autocomplete="off" data-jscolor="{}">
<label for="elm_fill" class="form_label translate"
data-lang="lbl_fill_color">Fill
color</label>
</div>
</div>
</div>
</div>
</div>
<div class="detail_box">
<span class="config_sec translate" data-lang="lbl_shadow">Shadow</span>
<div class="contentBox">
<div class="form_div textbox">
<input type="text" class="input_text color elm_config " name="elm_shadow"
id="elm_shadow" placeholder="" autocorrect="off" autocomplete="off"
data-jscolor="{}">
<label for="elm_shadow" class="form_label translate"
data-lang="lbl_shadow_color">Shadow
color</label>
</div>
</div>
</div>
<div class="detail_box elm_config_box svg">
<span class="config_sec translate" data-lang="lbl_svg_settings">SVG
Settings</span>
<div class="contentBox">
<div class="form_div textbox">
<input type="text" class="input_text elm_config attribute"
name="elm_viewBox" id="elm_viewBox" placeholder="" autocorrect="off"
autocomplete="off">
<label for="elm_viewBox" class="form_label translate"
data-lang="lbl_viewbox">ViewBox</label>
</div>
<div class="form_div textbox">
<label for="elm_svg_content" class="form_label translate"
data-lang="lbl_svg_content">SVG Content</label>
<textarea id="elm_svg_content" name="elm_svg_content" cols="30" rows="10"
class="input_textarea elm_config attribute" autocomplete="off"
autocorrect="off"></textarea>
</div>
</div>
</div>
<div class="detail_box elm_config_box fObj">
<span class="config_sec translate" data-lang="lbl_fObj_settings">Foreign
Object
Settings</span>
<div class="contentBox">
<div class="form_div textbox">
<label for="elm_fObj_content" class="form_label translate"
data-lang="lbl_fObj_content">ForeignObject content</label>
<textarea id="elm_fObj_content" name="elm_fObj_content" cols="30" rows="10"
class="input_textarea elm_config attribute" autocomplete="off"
autocorrect="off"></textarea>
</div>
</div>
</div>
<div class="detail_box elm_config_box image">
<span class="config_sec translate" data-lang="lbl_image_settings">Image
Settings</span>
<div class="contentBox">
<div class="form_div textbox">
<input type="text"
class="input_text elm_config attribute icon_in_input_pad2"
name="elm_href" id="elm_href" placeholder="" autocorrect="off"
autocomplete="off">
<label for="elm_href" class="form_label translate"
data-lang="lbl_href">Address:</label>
<div class="icon_wrapper">
<a class="frm-datasource icon_in_input" id="image_href_ds">
<span class="iconify" data-icon="mdi:database-search"
data-width="24" data-height="24"></span>
</a>
</div>
<div class="icon_wrapper2">
<a class="icon_in_input" id="image_href_gallery">
<span class="iconify" data-icon="mdi:file-image" data-width="24"
data-height="24"></span>
</a>
</div>
</div>
<img src="img/icon_help.png" class="help margin" data-help="help_img_url">
<div class="form_div textbox">
<input type="text" class="input_text elm_config attribute"
name="elm_preserveAspectRatio" id="elm_preserveAspectRatio"
placeholder="" autocorrect="off" autocomplete="off">
<label for="elm_preserveAspectRatio" class="form_label translate"
data-lang="lbl_preserveAspectRatio">preserveAspectRatio:</label>
</div>
<img src="img/icon_help.png" class="help margin"
data-help="help_preserveAspectRatio">
</div>
</div>
<div class="detail_box elm_config_box icon">
<span class="config_sec translate" data-lang="lbl_icon">Icon</span>
<div class="contentBox">
<div class="form_div textbox">
<input type="text" class="input_text elm_config" name="elm_icon"
id="elm_icon" placeholder="" autocorrect="off" autocomplete="off">
<label for="elm_icon" class="form_label translate"
data-lang="lbl_icon">Icon</label>
</div>
<div class="form_div textbox"><span class="translate"
data-lang="ex_config_icon_ref">Enter a keyword to search other
icons</span><br>
<span class="translate" data-lang="ex_config_icon_help">For better view
of
available icons, visit:</span> <a
href="https://icon-sets.iconify.design/"
target="_blank">https://icon-sets.iconify.design/</a>
</div>
</div>
</div>
<div class="detail_box elm_config_box text">
<span class="config_sec translate" data-lang="lbl_text">Text</span>
<div class="contentBox">
<div class="form_div textbox text_not_ds">
<label for="elm_text" class="form_label translate"
data-lang="lbl_text">Text</label>
<textarea id="elm_text" name="elm_text" cols="30" rows="5"
class="input_textarea elm_config attribute" autocomplete="off"
autocorrect="off"></textarea>
</div>
<div class="form_div textbox">
<input type="text" class="input_text elm_config style"
name="elm_font_family" id="elm_font_family" placeholder=""
autocorrect="off" autocomplete="off">
<label for="elm_font_family" class="form_label translate"
data-lang="lbl_font_family">Font family</label>
</div>
<div class="form_div textbox">
<input type="number" class="input_number elm_config style"
name="elm_font_size" id="elm_font_size" placeholder="" autocorrect="off"
autocomplete="off" min="1">
<label for="elm_font_size" class="form_label translate"
data-lang="lbl_font_size">Font-Size</label>
</div>
</div>
</div>
<div class="detail_box elm_config_box text text_only">
<span class="config_sec translate" data-lang="lbl_text_options">Text
Options</span>
<div class="contentBox">
<div class="cb_switch">
<input type="checkbox" name="elm_enable_clock" class="elm_config"
id="elm_enable_clock" value="">
<label for="elm_enable_clock">
<span></span>
<span class="translate" data-lang="lbl_enable_clock">Use as
Clock/Date</span>
</label>
</div>
<div class="enable_clock">
<div class="cb_switch">
<input type="checkbox" name="elm_clock.hour12" class="elm_config"
id="elm_clock.hour12" value="">
<label for="elm_clock.hour12">
<span></span>
<span class="translate" data-lang="lbl_clock_format12">Use 12h
format</span>
</label>
</div>
<div class="form_div select">
<label for="elm_clock.year" class="translate form_label"
data-lang="lbl_clock_year">Year</label>
<div class="select-option">
<select class="input_select elm_config" id="elm_clock.year"
name="elm_clock.year">
<option value="none" class="translate" data-lang="opt_none"
selected>
Deactivated
</option>
<option value="2-digit" class="translate"
data-lang="opt_2digit">
2-digit
</option>
<option value="numeric" class="translate"
data-lang="opt_numeric">
Numeric</option>
</select>
</div>
</div>
<div class="form_div select">
<label for="elm_clock.month" class="translate form_label"
data-lang="lbl_clock_month">Month</label>
<div class="select-option">
<select class="input_select elm_config" id="elm_clock.month"
name="elm_clock.month">
<option value="none" class="translate" data-lang="opt_none"
selected>
Deactivated
</option>
<option value="2-digit" class="translate"
data-lang="opt_2digit">
2-digit
</option>
<option value="numeric" class="translate"
data-lang="opt_numeric">
Numeric</option>
<option value="long" class="translate" data-lang="opt_long">
Long</option>
<option value="short" class="translate" data-lang="opt_short">
Short</option>
</select>
</div>
</div>
<div class="form_div select">
<label for="elm_clock.day" class="translate form_label"
data-lang="lbl_clock_day">Day</label>
<div class="select-option">
<select class="input_select elm_config" id="elm_clock.day"
name="elm_cl