cloudron-box/src/views/apps.html

<!-- Modal postinstall confirm -->
<div class="modal fade" id="appPostInstallConfirmModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <img ng-src="{{appPostInstallConfirm.app.iconUrl}}" onerror="this.onerror=null;this.src='img/appicon_fallback.png'" class="app-info-icon"/>
        <h5 class="app-info-title">
          {{ appPostInstallConfirm.app.manifest.title }}
          <span class="app-info-meta text-small">Package <a ng-href="/#/appstore/{{appPostInstallConfirm.app.manifest.id}}?version={{appPostInstallConfirm.app.manifest.version}}">v{{ appPostInstallConfirm.app.manifest.version }}</a> </span>
          <br/>
          <span ng-show="appPostInstallConfirm.app.manifest.documentationUrl"><a target="_blank" ng-href="{{appPostInstallConfirm.app.manifest.documentationUrl}}">Documentation</a> </span>
          <br/>
        </h5>
      </div>
      <div class="modal-body">
        <div ng-bind-html="appPostInstallConfirm.app.manifest.postInstallMessage | postInstallMessage:appPostInstallConfirm.app | markdown2html"></div>
        <div ng-show="appPostInstallConfirm.app.manifest.documentationUrl">
          Please see the <a target="_blank" ng-href="{{appPostInstallConfirm.app.manifest.documentationUrl}}">documentation</a> for more information.
        </div>
      </div>
      <div class="modal-footer">
          <div class="form-group pull-left">
            <input type="checkbox" id="appPostInstallConfirmCheckbox" ng-model="appPostInstallConfirm.confirmed">
            <label class="control-label" for="appPostInstallConfirmCheckbox">Acknowledge instructions</label>
          </div>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <a class="btn btn-success" ng-href="{{ appPostInstallConfirm.confirmed ? ('https://' + appPostInstallConfirm.app.fqdn) : '' }}" target="_blank" ng-disabled="!appPostInstallConfirm.confirmed" ng-click="appPostInstallConfirm.submit()">Open {{ appPostInstallConfirm.app.manifest.title }}</a>
      </div>
    </div>
  </div>
</div>

<!-- Modal error app -->
<div class="modal fade" id="appErrorModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Error for {{ appError.app.fqdn }}</h4>
            </div>
            <div class="modal-body">
                <p>{{ appError.app | prettyAppErrorMessage }}</p>
            </div>
            <div class="modal-footer">
                <a type="button" class="btn btn-primary pull-left" ng-href="{{ '/#/app/' + appError.app.id }}" autofocus>Repair</a>
                <a type="button" class="btn btn-default pull-left" ng-href="{{ '/logs.html?appId=' + appError.app.id }}" target="_blank">Logs</a>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal update app -->
<div class="modal fade" id="appUpdateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Update {{ appUpdate.app.fqdn }}</h4>
            </div>
            <div class="modal-body">
                <p>Recent Changes for new version <b>{{ appUpdate.manifest.version}}</b>:</p>
                <div ng-bind-html="appUpdate.manifest.changelog | markdown2html"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" ng-click="appUpdate.submit()" ng-disabled="appUpdate.busy"><i class="fa fa-circle-notch fa-spin" ng-show="appUpdate.busy"></i> Update</button>
            </div>
        </div>
    </div>
</div>

<script>
    function imageErrorHandler(elem) {
        'use strict';

        elem.src = elem.getAttribute('fallback-icon');
        elem.onerror = null;    // avoid retry after default icon cannot be loaded
    }
</script>

<div class="content content-large">

    <!-- Workaround for select-all issue, see commit message -->
    <div style="font-size: 1px;">&nbsp;</div>

    <div class="animateMeOpacity ng-hide" ng-show="installedApps.length === 0 && user.admin">
        <div class="col-md-12" style="text-align: center;">
            <br/><br/><br/><br/>
            <h1><i class="fa fa-cloud-download fa-fw"></i> No apps installed yet!</h1>
            <br/></br>
            <h3>How about installing some? Check out the <a href="#/appstore">App Store</a></h3>
        </div>
    </div>

    <div class="animateMeOpacity ng-hide" ng-show="installedApps.length === 0 && !user.admin">
        <div class="col-md-12" style="text-align: center;">
            <br/><br/><br/><br/>
            <h1>You don't have access to any apps on this Cloudron yet!</h1>
            <br/></br>
            <h3>Once you do, they will show up here.</h3>
        </div>
    </div>

    <div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
      <h1 class="view-header">
        Your Apps
        <div class="pull-right">
          <multiselect ng-model="selectedTags" ng-show="tags.length > 0" ms-header="All Tags" ms-selected="Tags: {{ selectedTags.join(', ') }}" options="tag for tag in tags" data-multiple="true"></multiselect>
          <multiselect ng-model="selectedDomain" ng-show="filterDomains.length > 2" data-compare-by="domain" ms-selected="{{ selectedDomain.domain }}" options="domain.domain for domain in filterDomains" data-multiple="false"></multiselect>
        </div>
      </h1>
    </div>

    <div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
      <div class="app-grid">
        <div class="grid-item" ng-repeat="app in installedApps | selectedTagFilter:selectedTags | selectedDomainFilter:selectedDomain | orderBy:'location'">
          <a ng-href="{{ app | applicationLink }}" ng-click="user.admin && ((app | installError) === true && appError.show(app)) || ((app | appIsInstalledAndHealthy) && app.pendingPostInstallConfirmation && appPostInstallConfirm.show(app))" target="_blank" ng-class="{ 'hand': (app | appIsInstalledAndHealthy) || (app | installError) }">
            <div style="background-color: white;" class="highlight grid-item-content" uib-tooltip="{{ app.fqdn }}">
              <div class="grid-item-top">
                <div class="row">
                  <div class="col-xs-12 text-center" style="padding-left: 5px; padding-right: 5px;">
                  <br/>
                  <img ng-src="{{ app.iconUrl || 'img/appicon_fallback.png' }}" fallback-icon="img/appicon_fallback.png" onerror="imageErrorHandler(this)" class="app-icon"/>
                  </div>
                </div>
                <br/>
                <div class="row">
                  <div class="col-xs-12 text-center">
                    <div class="grid-item-top-title" data-fittext>{{ app.label || app.location || app.fqdn }}</div>
                    <div class="text-muted status" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden" uib-tooltip="{{ app | appProgressMessage }}">
                      {{ app | installationStateLabel:user }}
                    </div>
                    <div class="status" ng-style="{ 'visibility': (app | installationActive) ? 'visible' : 'hidden' }">
                      <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ app.progress }}%"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="grid-item-actions" ng-show="user.admin">
                <a ng-href="#/app/{{ app.id}}" uib-tooltip="Configure" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-wrench scale"></i></a>
              </div>

              <!-- we check the version here because the box updater does not know when an app gets updated -->
              <div class="app-update-badge" ng-click="appUpdate.show(app, config.update.apps[app.id].manifest)" ng-show="config.update.apps[app.id].manifest.version && config.update.apps[app.id].manifest.version !== app.manifest.version && (app | installSuccess)">
                <i class="fa fa-arrow-up fa-inverse"></i>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
</div>