{{define "theme-angel-kanade/home"}}
{{template "theme-angel-kanade/header" .}}
{{if ts .CustomCode}} {{.CustomCode|safe}} {{end}}
{{template "theme-angel-kanade/menu" .}}
<div class="nb-container">
  <div class="ui container"> 
    <div class="ui styled fluid accordion" v-for="group in groups">
      <div class="active title">
        <i class="dropdown icon"></i>
        @#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@
      </div>
      <div class="active content">
        <div class="ui four stackable status cards">
          <div v-for="server in group.data" :id="server.ID" class="ui card">
            <div class="content" v-if="server.Host" style="margin-top: 10px; padding-bottom: 5px">
              <div class="header">
                <img v-if="server.Host.CountryCode" style="border-radius: 50%;box-shadow:-1px -1px 2px #eee, 1px 1px 2px #000;width:19px;" :src="'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/flag-icon-css/4.1.5/flags/1x1/'+server.Host.CountryCode + '.svg'" alt="国家"/>&nbsp;<i v-if='server.Host.Platform == "darwin"'
                  class="apple icon"></i><i v-else-if='isWindowsPlatform(server.Host.Platform)'
                  class="windows icon"></i><i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i>
                @#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@
                <i class="nezha-secondary-font info circle icon" style="height: 28px"></i>
                <div class="ui content popup" style="margin-bottom: 0">
                  {{tr "Platform"}}: @#server.Host.Platform#@-@#server.Host.PlatformVersion#@
                  [<span
                    v-if="server.Host.Virtualization">@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br />
                  CPU: @#server.Host.CPU#@<br />
                  <template v-if="server.Host.GPU">
                      GPU: @#server.Host.GPU#@
                  </template>
                  {{tr "DiskUsed"}}:
                  @#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br />
                  {{tr "MemUsed"}}:
                  @#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br />
                  {{tr "SwapUsed"}}:
                  @#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br />
                  {{tr "NetTransfer"}}: <i
                    class="arrow alternate circle down outline icon"></i>@#formatByteSize(server.State.NetInTransfer)#@<i
                    class="arrow alternate circle up outline icon"></i>@#formatByteSize(server.State.NetOutTransfer)#@<br />
                  {{tr "Load"}}: @# toFixed2(server.State.Load1) #@/@# toFixed2(server.State.Load5) #@/@#
                  toFixed2(server.State.Load15) #@<br />
                  {{tr "ProcessCount"}}: @# server.State.ProcessCount #@<br />
                  {{tr "ConnCount"}}: TCP @# server.State.TcpConnCount #@ / UDP @# server.State.UdpConnCount #@<br />
                  {{tr "BootTime"}}: @# formatTimestamp(server.Host.BootTime) #@<br />
                  {{tr "LastActive"}}: @# new Date(server.LastActive).toLocaleString() #@<br />
                  {{tr "Version"}}: @#server.Host.Version#@<br />
                </div>
                <div class="ui divider" style="margin-bottom: 5px"></div>
              </div>
              <div class="description">
                <div class="ui grid">
                  <div class="three wide column">CPU</div>
                  <div class="thirteen wide column">
                    <div :class="formatPercent(server.live,server.State.CPU, 100).class">
                      <div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
                        <small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
                      </div>
                    </div>
                  </div>
                  <div class="three wide column">{{tr "MemUsed"}}</div>
                  <div class="thirteen wide column">
                    <div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
                      <div class="bar"
                        :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
                        <small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
                      </div>
                    </div>
                  </div>
                  <div class="three wide column">{{tr "SwapUsed"}}</div>
                  <div class="thirteen wide column">
                    <div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
                      <div class="bar"
                        :style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
                        <small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
                      </div>
                    </div>
                  </div>
                  <div class="three wide column">{{tr "NetSpeed"}}</div>
                  <div class="thirteen wide column">
                    <i class="arrow alternate circle down outline icon"></i>
                    @#formatByteSize(server.State.NetInSpeed)#@/s
                    <i class="arrow alternate circle up outline icon"></i>
                    @#formatByteSize(server.State.NetOutSpeed)#@/s
                  </div>
                  <div class="three wide column">{{tr "NetTransfer"}}</div>
                  <div class="thirteen wide column">
                    <i class="arrow circle down icon"></i>
                    @#formatByteSize(server.State.NetInTransfer)#@
                    &nbsp;
                    <i class="arrow circle up icon"></i>
                    @#formatByteSize(server.State.NetOutTransfer)#@
                  </div>
                  <div class="three wide column">{{tr "DiskUsed"}}</div>
                  <div class="thirteen wide column">
                    <div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
                      <div class="bar"
                        :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
                        <small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
                      </div>
                    </div>
                  </div>
                  <div class="three wide column">{{tr "Info"}}</div>
                  <div class="thirteen wide column">
                    <i class="bi bi-cpu-fill" style="font-size: 1.1rem; color: #4a86e8;"></i> @#getCoreAndGHz(server.Host.CPU)#@
                    &nbsp;
                    <i class="bi bi-memory" style="font-size: 1.1rem; color: #00ac0d;"></i> @#getByteToGB(server.Host.MemTotal)#@
                    &nbsp;
                    <i class="bi bi-hdd-rack-fill" style="font-size: 1.1rem; color: #980000"></i> @#getByteToGB(server.Host.DiskTotal)#@
                  </div>
                  <div class="three wide column">{{tr "Uptime"}}</div>
                  <div class="thirteen wide column">
                    <i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
                  </div>
                </div>
              </div>
            </div>
            <div class="content" v-else>
              <p>@#server.Name#@</p>
              <p>{{tr "ServerIsOffline"}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{{template "theme-angel-kanade/footer" .}}
<script>
  const initData = JSON.parse('{{.Servers}}').servers;
  var statusCards = new Vue({
    el: '#app',
    delimiters: ['@#', '#@'],
    data: {
      defaultTemplate: {{.Conf.Site.Theme}},
      templates: {{.Themes}},
      data: initData,
      groups: [],
      cache: [],
    },
    mixins: [mixinsVue],
    created() {
      this.group()
    },
    mounted() {
      $('.nezha-secondary-font.info.icon').popup({
        popup: '.ui.content.popup',
        exclusive: true,
      });
    },
    methods: {
      toFixed2(f) {
        return f.toFixed(2)
      },
      isWindowsPlatform(str) {
        return str.includes('Windows')
      },
      getFontLogoClass(str) {
        if (["almalinux",
          "alpine",
          "aosc",
          "apple",
          "archlinux",
          "archlabs",
          "artix",
          "budgie",
          "centos",
          "coreos",
          "debian",
          "deepin",
          "devuan",
          "docker",
          "elementary",
          "fedora",
          "ferris",
          "flathub",
          "freebsd",
          "gentoo",
          "gnu-guix",
          "illumos",
          "kali-linux",
          "linuxmint",
          "mageia",
          "mandriva",
          "manjaro",
          "nixos",
          "openbsd",
          "opensuse",
          "pop-os",
          "raspberry-pi",
          "redhat",
          "rocky-linux",
          "sabayon",
          "slackware",
          "snappy",
          "solus",
          "tux",
          "ubuntu",
          "void",
          "zorin"].indexOf(str)
          > -1) {
            return str;
        }
        if (['openwrt','linux'].indexOf(str) > -1) {
          return 'tux';
        }
        if (str == 'amazon') {
          return 'redhat';
        }
        if (str == 'arch') {
          return 'archlinux';
        }
        return '';
      },
      group() {
        this.groups = groupingData(this.data, "Tag")
      },
      formatPercent(live, used, total) {
        const percent = live ? (parseInt(used / total * 100) || 0) : -1
        if (!this.cache[percent]) {
          this.cache[percent] = {
            class: {
              ui: true,
              progress: true,
            },
            style: {
              'transition-duration': '300ms',
              'min-width': 'unset',
              width: percent + '% !important',
            },
            percent,
          }
          if (percent < 0) {
            this.cache[percent].style['background-color'] = 'slategray'
            this.cache[percent].class.offline = true
          } else if (percent < 51) {
            this.cache[percent].style['background-color'] = '#0a94f2'
            this.cache[percent].class.fine = true
          } else if (percent < 81) {
            this.cache[percent].style['background-color'] = 'orange'
            this.cache[percent].class.warning = true
          } else {
            this.cache[percent].style['background-color'] = 'crimson'
            this.cache[percent].class.error = true
          }
        }
        return this.cache[percent]
      },
      secondToDate(s) {
        var d = Math.floor(s / 3600 / 24);
        if (d > 0) {
          return d + " {{tr "Day"}}"
        }
        var h = Math.floor(s / 3600 % 24);
        var m = Math.floor(s / 60 % 60);
        var s = Math.floor(s % 60);
        return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);
      },
      formatTimestamp(t) {
        return new Date(t * 1000).toLocaleString()
      },
      formatByteSize(bs) {
        const x = readableBytes(bs)
        return x != "NaN undefined" ? x : '0B'
      },
      getCoreAndGHz(str){
        if((str || []).hasOwnProperty(0) === false){
            return '';
        }
        str = str[0];
	    let GHz = str.match(/(\d|\.)+GHz/g);
	    let Core = str.match(/(\d|\.)+ Physical/g);
	    GHz = GHz!==null?GHz.hasOwnProperty(0)===false?'':GHz[0]:''
	    Core = Core!==null?Core.hasOwnProperty(0)===false?'?':Core[0]:'?'
	    if(Core === '?'){
	        let Core = str.match(/(\d|\.)+ Virtual/g);
	        Core = Core!==null?Core.hasOwnProperty(0)===false?'?':Core[0]:'?'
	        return Core.replace('Virtual','Core')
	    }
	    return Core.replace('Physical','Core');
	   
      },
      getByteToGB(bs){
        return (bs/1024/1024/1024).toFixed(2) + 'GB'
      },
      listTipsMouseenter(obj,strs,tipsNum=1){
          this.layerIndex = layer.tips(strs, '#'+obj,{tips: [tipsNum, 'rgb(0 0 0 / 85%)'],time:0});
          $('#'+obj).attr('layerIndex',this.layerIndex)
      },
      listTipsMouseleave(obj){
          layer.close(this.layerIndex)
      }
    }
  })

  function groupingData(data, field) {
    if (!data) {
      return
    }
    let map = {};
    let dest = [];
    data.forEach(item => {
      if (!map[item[field]]) {
        dest.push({
          [field]: item[field],
          data: [item]
        });
        map[item[field]] = item;
      } else {
        dest.forEach(dItem => {
          if (dItem[field] == item[field]) {
            dItem.data.push(item);
          }
        });
      }
    })
    return dest;
  }

  let canShowError = true;
  function connect() {
    const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
    const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
    ws.onopen = function (evt) {
      canShowError = true;
      $.suiAlert({
        title: '{{tr "RealtimeChannelEstablished"}}',
        description: '{{tr "GetTheLatestMonitoringDataInRealTime"}}',
        type: 'success',
        time: '2',
        position: 'top-center',
      });
    }
    ws.onmessage = function (evt) {
      const oldServers = statusCards.servers
      const data = JSON.parse(evt.data)
      statusCards.servers = data.servers
      if (!statusCards.servers) {
        return
      }
      for (let i = 0; i < statusCards.servers.length; i++) {
        const ns = statusCards.servers[i];
        if (!ns.Host) ns.live = false
        else {
          const lastActive = new Date(ns.LastActive).getTime()
          if (data.now - lastActive > 10 * 1000) {
            ns.live = false
          } else {
            ns.live = true
          }
        }
      }
      statusCards.groups = groupingData(statusCards.servers, "Tag")
    }
    ws.onclose = function () {
      if (canShowError) {
        canShowError = false;
        $.suiAlert({
          title: '{{tr "RealtimeChannelDisconnect"}}',
          description: '{{tr "CanNotGetTheLatestMonitoringDataInRealTime"}}',
          type: 'warning',
          time: '2',
          position: 'top-center',
        });
      }
      setTimeout(function () {
        connect()
      }, 3000);
    }
    ws.onerror = function () {
      ws.close()
    }
  }

  connect();

  $('.ui.accordion').accordion({ "exclusive": false });
</script>
{{end}}