wid-card-level-con/wid-card-level-con.html at master · wid-la/wid-card-level-con · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<html><head><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-styles/paper-styles-classes.html">
<link rel="import" href="../iron-icon/iron-icon.html">

<link rel="import" href="../wid-card-standard-behavior/wid-card-standard-behavior.html">
<link rel="import" href="../wid-card-weight-behavior/wid-card-weight-behavior.html">
<link rel="import" href="../wid-card-theme-behavior/wid-card-theme-behavior.html">
<link rel="import" href="../wid-versatile-websocket/wid-versatile-websocket.html">
<link rel="import" href="../wid-card-subscriptions-behavior/wid-card-subscriptions-behavior.html">

<!--
Level Con Object. 5 condition levels.

Example:

    <wid-card-level-con></wid-card-level-con>

@group Seed Elements
@element wid-card-level-con
@demo demo/index.html
@hero hero.svg
-->
</head><body><dom-module id="wid-card-level-con">

<template>

    <style>

      :host {
        display: block;
        box-sizing: border-box;
        height: 100%;
      }

      paper-material {
        overflow-y: auto;
        height: 100%;
        overflow: visible;
      }

      #level-container {
        background-color: #fff;
      }

      .header-level-0 {
        background-color: #70bf73;
      }
      .status-level-0 {
        background-color: #4caf50;
      }

      .header-level-1 {
        background-color: #4dabf5;
      }
      .status-level-1 {
        background-color: #2196f3;
      }

      .header-level-2 {
        background-color: #ffcd39;
      }
      .status-level-2 {
        background-color: #ffc107;
      }

      .header-level-3 {
        background-color: #ffad33;
      }
      .status-level-3 {
        background-color: #ff9800;
      }

      .header-level-4 {
        background-color: #f6695e;
      }
      .status-level-4 {
        background-color: #f44336;
      }

      #descHeaderContainer {
        font-weight: bold;
        font-size: 1.5vw;
        text-align: left;
        color: #fff;
        font-family: 'Roboto', sans-serif;
      }

      #descStatusContainer {
        text-align: center;
        color: #fff;
        font-family: 'Roboto', sans-serif;
      }

      #title {
        font-weight: bold;
        font-size: 2vw;
      }
      #reason {
        font-style: italic;
      }

      .scale-icon {
        --iron-icon-width: 60%;
        --iron-icon-height: 100%;
        height: 100%;
        /*margin-left: 5px;*/
      }

      #websockets {
        display: none;
      }

    </style>

    <div id="websockets">
      <!-- This is a requirement of `wid-card-subscriptions-behavior` -->
      <!-- one websocket element for each subscribed channel -->
      <template is="dom-repeat" items="[[websockets]]" as="ws">
        <wid-versatile-websocket url="[[ws.url]]" token="[[ws.token]]" subscription="[[ws.subscription]]" on-data="_onData">
        </wid-versatile-websocket>
      </template>
    </div>


    <paper-material id="mainContent" class="layout horizontal flex" elevation="3">

      <div id="desc-container" class="layout vertical flex-5">
        <div id="descHeaderContainer" class="computed-will-be-replaced">
          <div class="layout vertical center-center flex-4">
            <iron-icon id="cloudIcon" class="scale-icon flex" src="sunny.svg"></iron-icon>
          </div>
          <div class="flex-8">[[name]]</div>
        </div>
        <div id="descStatusContainer" class="computed-will-be-replaced">
          <div id="title" class="flex-2 layout vertical center-center">[[title]]</div>
          <div id="reason" class="flex layout vertical center-center">[[reason]]</div>
        </div>
      </div>
      <div id="level-container" class="flex layout vertical center-center">
        <iron-icon class="scale-icon" src="color.svg"></iron-icon>
      </div>

    </paper-material>

  </template>

</dom-module>

<script src="wid-card-level-con.js"></script></body></html>