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">{{ 'app.appInfo.package' | tr }} <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}}">{{ 'app.docsAction' | tr }}</a> </span>
          <br/>
        </h5>
      </div>
      <div class="modal-body">
        <p ng-show="appPostInstallConfirm.app.manifest.addons.email">{{ 'app.appInfo.ssoEmail' | tr }}</p>
        <p ng-show="appPostInstallConfirm.app.sso && !appPostInstallConfirm.app.manifest.addons.email">{{ 'app.appInfo.sso' | tr }}</p>

        <div ng-bind-html="appPostInstallConfirm.app.manifest.postInstallMessage | markdown2html"></div>
        <div ng-show="appPostInstallConfirm.app.manifest.documentationUrl" ng-bind-html="'app.appInfo.appDocsUrl' | tr:{ docsUrl: appPostInstallConfirm.app.manifest.documentationUrl, title: appPostInstallConfirm.app.manifest.title, forumUrl: (appPostInstallConfirm.app.manifest.forumUrl || 'https://forum.cloudron.io') }"></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">{{ 'app.appInfo.postInstallConfirmCheckbox' | tr }}</label>
        </div>
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
        <a class="btn btn-success" ng-href="{{ appPostInstallConfirm.confirmed ? ('https://' + appPostInstallConfirm.app.fqdn) : '' }}" target="_blank" ng-disabled="!appPostInstallConfirm.confirmed" ng-click="appPostInstallConfirm.submit()">{{ 'app.appInfo.openAction' | tr:{ app: appPostInstallConfirm.app.manifest.title } }}</a>
      </div>
    </div>
  </div>
</div>

<!-- Modal applinks add -->
<div class="modal fade" id="applinksAddModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Add external app link</h4>
      </div>
      <div class="modal-body">
        <form name="applinksAddForm" role="form" ng-submit="applinksAdd.submit()" autocomplete="off">
          <div class="form-group" ng-class="{ 'has-error': (applinksAddForm.upstreamUri.$dirty && applinksAddForm.upstreamUri.$invalid) || (!applinksAddForm.upstreamUri.$dirty && applinksAdd.error.upstreamUri) }">
            <label class="control-label">UpstreamURI</label>
            <input type="text" class="form-control" ng-model="applinksAdd.upstreamUri" name="upstreamUri" id="inputUpstreamUri" autofocus autocomplete="off" required>
          </div>

          <div class="form-group">
            <label class="control-label">Label</label>
            <input type="text" class="form-control" ng-model="applinksAdd.label" name="label" id="inputLabel" autocomplete="off" placeholder="Leave empty for autodetection">
          </div>

          <input class="ng-hide" type="submit" ng-disabled="applinksAddForm.$invalid || applinksAdd.busy"/>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
        <button type="button" class="btn btn-success" ng-click="applinksAdd.submit()" ng-disabled="applinksAddForm.$invalid || applinksAdd.busy"><i class="fa fa-circle-notch fa-spin" ng-show="applinksEdit.busy"></i> {{ 'main.dialog.save' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal applinks edit -->
<div class="modal fade" id="applinksEditModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit external app link</h4>
      </div>
      <div class="modal-body">
        <form name="applinksEditForm" role="form" ng-submit="applinksEdit.submit()" autocomplete="off">
          <div class="form-group" ng-class="{ 'has-error': (applinksEditForm.upstreamUri.$dirty && applinksEditForm.upstreamUri.$invalid) || (!applinksEditForm.upstreamUri.$dirty && applinksEdit.error.upstreamUri) }">
            <label class="control-label">UpstreamURI</label>
            <input type="text" class="form-control" ng-model="applinksEdit.upstreamUri" name="upstreamUri" id="inputUpstreamUri" autofocus autocomplete="off" required>
          </div>

          <div class="form-group">
            <label class="control-label">Label</label>
            <input type="text" class="form-control" ng-model="applinksEdit.label" name="label" id="inputLabel" autocomplete="off">
          </div>

          <input class="ng-hide" type="submit" ng-disabled="applinksEditForm.$invalid || applinksEdit.busyEdit || applinks.busyRemove"/>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger pull-left" ng-click="applinksEdit.remove()" ng-disabled="applinksEdit.busyRemove || applinksEdit.busyEdit"><i class="fa fa-circle-notch fa-spin" ng-show="applinksEdit.busyRemove"></i> Delete</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
        <button type="button" class="btn btn-success" ng-click="applinksEdit.submit()" ng-disabled="applinksEditForm.$invalid || applinksEdit.busyRemove || applinksEdit.busyEdit"><i class="fa fa-circle-notch fa-spin" ng-show="applinksEdit.busyEdit"></i> {{ 'main.dialog.save' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<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.isAtLeastAdmin">
      <div class="col-md-12" style="text-align: center;">
        <br/><br/><br/><br/>
        <h1><i class="fa fa-cloud-download fa-fw"></i> {{ 'apps.noApps.title' | tr }}</h1>
        <br/></br>
        <h3 ng-bind-html="'apps.noApps.description' | tr:{ appStoreLink: '#/appstore' }"></h3>
      </div>
    </div>

    <div class="animateMeOpacity ng-hide" ng-show="installedApps.length === 0 && !user.isAtLeastAdmin">
      <div class="col-md-12" style="text-align: center;">
        <br/><br/><br/><br/>
        <h1>{{ 'apps.noAccess.title' | tr }}</h1>
        <br/></br>
        <h3>{{ 'apps.noAccess.description' | tr }}</h3>
      </div>
    </div>

    <div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
      <h1 class="view-header">
        {{ 'apps.title' | tr }}
        <button class="btn btn-outline" ng-click="applinksAdd.show()" uib-tooltip="Add Applink" tooltip-placement="right"><i class="fas fa-plus"></i></button>
        <div class="pull-right">
          <form class="form-inline">
            <input type="text" class="form-control" ng-show="installedApps.length > 8" placeholder="{{ 'apps.searchPlaceholder' | tr }}" id="appSearch" ng-model="appSearch"/>
            <multiselect ng-model="selectedGroup" ng-show="user.isAtLeastAdmin && installedApps.length > 1 && groups.length > 1" ms-header="{{ selectedGroup.name }}" options="group.name for group in groups" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
            <multiselect ng-model="selectedState" ng-show="user.isAtLeastAdmin && installedApps.length > 1" ms-header="{{ 'apps.stateFilterHeader' | tr }}" ms-selected="{{ selectedState }}" options="state.label for state in states" data-multiple="false"></multiselect>
            <multiselect ng-model="selectedTags" ng-show="user.isAtLeastAdmin && tags.length > 0" ms-header="{{ 'apps.tagsFilterHeaderAll' | tr }}" ms-selected="{{ 'apps.tagsFilterHeader' | tr:{ tags: selectedTags.join(', ') } }}" options="tag for tag in tags" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></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" filter-after-rows="5" scroll-after-rows="10"></multiselect>
          </form>
        </div>
      </h1>
    </div>

    <div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
      <div class="app-grid">
        <div class="grid-item" ng-class="{ 'stopped': app.runState === 'stopped' }" ng-repeat="app in installedApps | selectedGroupAccessFilter:selectedGroup | selectedStateFilter:selectedState | selectedTagFilter:selectedTags | selectedDomainFilter:selectedDomain | appSearchFilter:appSearch | orderBy:'fqdn'" ng-class="{ 'admin-action': app.manifest.configurePath && (app | applicationLink) }">
          <div class="grid-item-content" uib-tooltip="{{ app.fqdn }}">
            <a ng-show="app.type !== 'applink' && isOperator(app)" ng-href="#/app/{{ app.id}}/display" class="btn btn-lg btn-default grid-item-action"><i class="fas fa-cog"></i></a>
            <div ng-show="app.type === 'applink' && isOperator(app)" ng-click="applinksEdit.show(app)" class="btn btn-lg btn-default grid-item-action"><i class="fas fa-cog"></i></div>
            <a ng-href="{{ app | applicationLink }}" ng-click="isOperator(app) && (((app | installError) === true || (app | installationActive) === true) && showAppConfigure(app, 'repair')) || ((app | appIsInstalledAndHealthy) && app.pendingPostInstallConfirmation && appPostInstallConfirm.show(app))" target="_blank" ng-class="{ 'hand': (app | appIsInstalledAndHealthy) || (app | installError)  || (app | installationActive)}">
              <div class="grid-item-top">
                <div class="row">
                  <div class="col-xs-12 text-center" style="padding-left: 5px; padding-right: 5px;">
                    <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.subdomain || app.fqdn }}</div>
                    <div class="text-muted status" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden" uib-tooltip="{{ app | appProgressMessage }}">
                      {{ app | installationStateLabel }}
                    </div>
                    <div class="status" ng-style="{ 'visibility': isOperator(app) && (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 class="usermanagement-indicator" ng-hide="user.isAtLeastAdmin">
                  <i class="fas fa-cog" ng-show="isOperator(app)"></i>
                  <i class="fas fa-user" ng-show="app.ssoAuth && !app.manifest.addons.email" uib-tooltip="{{ 'apps.auth.sso' | tr }}" tooltip-placement="right"></i>
                  <i class="far fa-user" ng-show="!app.ssoAuth && !app.manifest.addons.email" uib-tooltip="{{ 'apps.auth.nosso' | tr }}" tooltip-placement="right"></i>
                  <i class="fas fa-envelope" ng-show="app.manifest.addons.email" uib-tooltip="{{ 'apps.auth.email' | tr }}" tooltip-placement="right"></i>
                </div>
              </div>

            </a>

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