layouts/partials/index/components.html


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

{{ $incidents := where .Site.RegularPages "Params.section" "issue" }}
{{ $active := where $incidents "Params.resolved" "=" false }}

{{ $isNotice := where $active "Params.severity" "=" "notice" }}
{{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}
{{ $isDown := where $active "Params.severity" "=" "down" }}

<!-- Individual info -->
<div class="categories">
  {{ $systems := .Site.Params.systems }}
  {{ $categories := .Site.Params.categories }}

  <script>
  function toggleCategoryHead(el) {
    if (el.parentNode.className == 'category category--open') {
      el.parentNode.className = 'category category--closed';
    } else {
      el.parentNode.className = 'category category--open';
    }
  }
  </script>

  {{ range $categories }}
    <div class="category {{ if .closed }}category--closed{{ else }}category--open{{ end }}" id="{{ .name | urlize }}">
      {{ if not .untitled }}
      <div class="bold padding clicky category__head" onclick="toggleCategoryHead(this)">
        <span class="hide-without-js">
          <span class="category__closed-marker">►</span>
          <span class="category__open-marker">✕</span>
        </span>

      <b>
        {{ .name }}
      </b>
      
      {{ with .description }}
        <span class="tooltip tooltip--small">
          &nbsp; <span class="faded">(?)</span>

          <span class="tooltip__text">
            {{ . }}
          </span>
        </span>
      {{ end }}

      </div>
      {{ else }}
      <div class="padding"></div>
      {{ end }}

      {{ $categorySystems := where $systems "category" "=" .name }}

      <div class="components">
      {{ range $categorySystems }}
        {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}

        {{ $thisIsNotice := where $activeComponentIssues "Params.severity" "=" "notice" }}
        {{ $thisIsDisrupted := where $activeComponentIssues "Params.severity" "=" "disrupted" }}
        {{ $thisIsDown := where $activeComponentIssues "Params.severity" "=" "down" }}

        <div class="component" data-status="{{ if $thisIsDown }}down{{ else }}{{ if $thisIsDisrupted }}disrupted{{ else }}{{ if $thisIsNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
          <a href="affected/{{ .name | urlize }}/" class="no-underline">
            {{ default .name .displayName }}
          </a>

          {{ with .description }}
            <span class="tooltip tooltip--small">
              &nbsp; <span class="faded">(?)</span>

              <span class="tooltip__text">
                {{ . }}
              </span>
            </span>
          {{ end }}

          <span class="component-status">
            {{ if $thisIsDown }}
              {{ T "thisIsDown" }}
            {{ else }}
            {{ if $thisIsDisrupted }}
              {{ T "thisIsDisrupted" }}
            {{ else }}
            {{ if $thisIsNotice }}
              {{ T "thisIsNotice" }}
            {{ else }}
              {{ T "thisIsOk" }}
            {{ end }}{{ end }}{{ end }}
          </span>

          {{ with .partial }}
          <div>
            {{ partial . . }}
          </div>
          {{ end }}
        </div>
      {{ end }}
      </div>
    </div>
  {{ end }}

</div>