crafty-4/app/frontend/templates/panel/parts/details_stats.html

<div class="row">
      <div class="col-sm-12 grid-margin">
        <div class="card">
          <div class="card-body pt-3 pb-3">
            <div class="row">
              <div class="col-sm-3 mr-2">
                {% if data['server_stats']['running'] %}
                  <b>{{ translate('serverStats', 'serverStatus', data['lang']) }}:</b> <span class="text-success">{{ translate('serverStats', 'online', data['lang']) }}</span><br />
                  <b>{{ translate('serverStats', 'serverStarted', data['lang']) }}:</b> <span id="started">{{ data['server_stats']['started'] }} ({{ translate('serverStats', 'serverTime', data['lang']) }})</span><br />
                  <b>{{ translate('serverStats', 'serverUptime', data['lang']) }}:</b> <span id="uptime">{{ translate('serverStats', 'errorCalculatingUptime', data['lang']) }}</span>
                {% else %}
                  <b>{{ translate('serverStats', 'serverStatus', data['lang']) }}:</b> <span class="text-danger">{{ translate('serverStats', 'offline', data['lang']) }}</span><br />
                  <b>{{ translate('serverStats', 'serverStarted', data['lang']) }}:</b> <span class="text-danger">{{ translate('serverStats', 'offline', data['lang']) }}</span><br />
                  <b>{{ translate('serverStats', 'serverUptime', data['lang']) }}:</b> <span class="text-danger">{{ translate('serverStats', 'offline', data['lang']) }}</span>
                {% end %}
              </div>

              <div class="col-sm-3 mr-2">
                <b>{{ translate('serverStats', 'cpuUsage', data['lang']) }}:</b> {{ data['server_stats']['cpu'] }}% <br />
                <b>{{ translate('serverStats', 'memUsage', data['lang']) }}:</b> {{ data['server_stats']['mem'] }} <br />
                {% if data['server_stats']['int_ping_results'] %}
                <b>{{ translate('serverStats', 'players', data['lang']) }}:</b> {{ data['server_stats']['online'] }} / {{ data['server_stats']['max'] }}<br />
                {% else %}
                <b>{{ translate('serverStats', 'players', data['lang']) }}:</b> 0/0<br />
                {% end %}
              </div>

              <div class="col-sm-3 mr-2">
                {% if data['server_stats']['version'] != 'False' %}
                  <b>{{ translate('serverStats', 'version', data['lang']) }}:</b> {{ data['server_stats']['version'] }} <br />
                  <b>{{ translate('serverStats', 'description', data['lang']) }}:</b> {{ data['server_stats']['desc'] }} <br />
                {% else %}
                  <b>{{ translate('serverStats', 'version', data['lang']) }}:</b> {{ translate('serverStats', 'unableToConnect', data['lang']) }} <br />
                  <b>{{ translate('serverStats', 'description', data['lang']) }}:</b> {{ translate('serverStats', 'unableToConnect', data['lang']) }} <br />
                {% end %}
              </div>

            </div>
          </div>

        </div>
      </div>

  </div>

<script src="/static/assets/vendors/moment/moment.min.js" type="text/javascript" charset="utf-8"></script>

<script>

  function durationToHumanizedString (duration) {
    duration._data.months += duration._data.years * 12;
    // 30.45833333333 = average month length, calculate with (31+28.5+31+30+31+30+31+31+30+31+30+31) / 12
    duration._data.days += duration._data.months * 30.45833333333;
    duration._data.hours += duration._data.days * 24;

    let obj = {
      hours: Math.round(duration._data.hours),
      minutes: duration._data.minutes,
      seconds: duration._data.seconds
    }

    output = Object.entries(obj)
      .map(([type, num]) => {
         // make them strings
        returnData = num + ' ' + type;
        // remove the s in the end if the data is -1 or 1
        if (num == -1 || num == 1)
          returnData = returnData.slice(0, -1)
        return returnData;
      })
      .map((v, i, a) => // example input: [1,2,3], output: "1, 2 and 3"
        v + (i !== a.length - 1
          ? i !== a.length -  2
            ? ', '
            : ' and '
          : '')).join('');
    return output;
  }

  document.body.onload = (() => {

    console.log('calculateTime');
    let uptime = document.querySelector('#uptime');
    let started = document.querySelector('#started');
    let startedUTC;
    let startedLocal;

    if (started != null) {
      startedUTC = '{{ data['server_stats']['started'] }}';
      console.log('started utc:', startedUTC);
      startedUTC = moment.utc(startedUTC, 'YYYY-MM-DD HH:mm:ss');

      let browserUTCOffset = moment().utcOffset(); // This is in minutes

      startedLocal = startedUTC.utcOffset(browserUTCOffset);
      startedLocalFormatted = startedLocal.format('YYYY-MM-DD HH:mm:ss');

      console.log('started local time:', startedLocalFormatted);

      started.textContent = startedLocalFormatted
    }

    var calculateUptime = () => {
      var msdiff = moment()
        .diff(startedLocal);
      var diff = moment.duration(msdiff);

      uptime.textContent = durationToHumanizedString(diff);
    }

    if (uptime != null && started != null) {

      console.log('startedLocal', startedLocal)
      if (startedLocal) {
        calculateUptime()
        var uptimeLoop = setInterval(calculateUptime, 1000)
      }
    }

  });
</script>