D-Net

<aside id="sidebar_main">

  <div *ngIf="stakeholder" class="sidebar_main_header">

    <div class="uk-padding-small">

      <img class="uk-margin-bottom" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">

      <h4 class="uk-text-bold uk-margin-remove">{{stakeholder.index_name}}</h4>

      <span class="uk-text-large">Admin Dashboard</span>

    </div>

  </div>

  <div *ngIf="stakeholder" class="menu_section">

    <ul>

      <li [class.current_section]="analysisOpen"

          [class.act_section]="analysisOpen"

          class="submenu_trigger">

        <a [routerLink]="" (click)="analysisOpen = !analysisOpen">

          <span class="menu_icon"><i class="material-icons">donut_large</i></span>

          <span class="menu_title">Analysis Indicators</span>

        </a>

        <ul [style.display]="(analysisOpen?'block':'none')">

          <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">

            <li>

              <a (click)="navigateTo(topic.alias)">

                <span *ngIf="topic.icon" class="menu_icon uk-margin-small-right"><i

                  class="material-icons">{{topic.icon}}</i></span>

                <div class="menu_title uk-inline">

                  {{topic.name}}

                  <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"

                          (click)="$event.stopPropagation();saveTopicOpen(editTopic, i)">

                    <i class="material-icons">more_horiz</i>

                  </button>

                </div>

              </a>

              <div uk-drop="mode: none; offset: -2; delay-hide: 0;" #editTopic

                   class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">

                <div *ngIf="copyTopic">

                  <div class="md-card">

                    <div class="md-card-content uk-position-relative">

                      <a class="uk-position-top-right">

                        <i (click)="hide(editTopic)" class="material-icons">close</i>

                      </a>

                      <div class="uk-grid-small" uk-grid>

                        <div class="uk-width-1-1">

                          <label class="uk-text-bold">Topic Settings</label>

                          <input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"

                                 [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')"

                                 type="text">

                        </div>

                        <div class="uk-width-1-1">

                          <label>Description</label>

                          <textarea class="uk-textarea" [(ngModel)]="copyTopic.description"

                                    rows="3" type="text"></textarea>

                        </div>

                        <div class="uk-width-1-2">

                          <select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isPublic">

                            <option [value]="true">Public</option>

                            <option [value]="false">Private</option>

                          </select>

                        </div>

                        <div class="uk-width-1-2">

                          <select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isActive">

                            <option [value]="true">Active</option>

                            <option [value]="false">Inactive</option>

                          </select>

                        </div>

                      </div>

                      <hr>

                      <div class="uk-grid-small uk-child-width-1-2" uk-grid>

                        <div>

                          <button class="md-btn md-btn-small" (click)="deleteTopicOpen(editTopic, i)">Delete</button>

                        </div>

                        <div>

                          <button class="md-btn md-btn-small md-btn-primary uk-float-right"

                                  (click)="saveTopic(editTopic, i)">Save

                          </button>

                        </div>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </li>

          </ng-template>

          <li>

            <a (click)="saveTopicOpen(newTopic)">

              <span class="menu_icon"><i class="material-icons">add</i></span>

              <span class="menu_title">Create new Topic</span>

            </a>

            <div uk-drop="mode: none; offset: -2; delay-hide: 0" #newTopic

                 class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">

              <div *ngIf="copyTopic">

                <div class="md-card">

                  <div class="md-card-content uk-position-relative">

                    <a class="uk-position-top-right">

                      <i (click)="hide(newTopic)" class="material-icons">close</i>

                    </a>

                    <div class="uk-grid-small" uk-grid>

                      <div class="uk-width-1-1">

                        <label class="uk-text-bold">New Topic</label>

                        <input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"

                               [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')"

                               type="text">

                      </div>

                      <div class="uk-width-1-1">

                        <label>Description</label>

                        <textarea class="uk-textarea" [(ngModel)]="copyTopic.description"

                                  rows="3" type="text"></textarea>

                      </div>

                      <div class="uk-width-1-2">

                        <select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isPublic">

                          <option [value]="true">Public</option>

                          <option [value]="false">Private</option>

                        </select>

                      </div>

                      <div class="uk-width-1-2">

                        <select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isActive">

                          <option [value]="true">Active</option>

                          <option [value]="false">Inactive</option>

                        </select>

                      </div>

                    </div>

                    <hr>

                    <div class="uk-grid-small uk-child-width-1-2" uk-grid>

                      <div>

                        <button class="md-btn md-btn-small" (click)="hide(newTopic)">Cancel</button>

                      </div>

                      <div>

                        <button class="md-btn md-btn-small md-btn-primary uk-float-right" (click)="saveTopic(newTopic)">

                          Create

                        </button>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </div>

          </li>

        </ul>

      </li>

    </ul>

  </div>

</aside>

<div id="page_content" click-outside-or-esc targetId="page_content" (clickOutside)="toggleOpen($event)">

  <div id="page_content_inner">

    <h4 class="uk-text-bold">

      Customise your Monitor Dashboard!

    </h4>

    <div class="uk-text-large uk-margin-bottom">

      <div>

        Modify or add new topics, categories and content.<br><br>

        Start your navigation through the <span class="md-color-blue-900">left side menu!</span>

      </div>

      <div class="uk-margin-small-top uk-margin-small-bottom uk-margin-large-left">

        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="88" viewBox="0 0 30 88">

          <g id="Group_749" data-name="Group 749" transform="translate(-872.168 -490.5)">

            <text class="fill_text" id="OR" transform="translate(872.168 540.271)" font-size="18"

                  font-family="OpenSans-Bold, Open Sans" font-weight="900" opacity="0.8">

              <tspan x="0" y="0">OR</tspan>

            </text>

            <line class="stroke_line" id="Line_225" data-name="Line 225" y2="30" transform="translate(885.5 490.5)"

                  fill="none" stroke="#000" stroke-width="1" opacity="0.2"/>

            <line class="stroke_line" id="Line_226" data-name="Line 226" y2="30" transform="translate(885.5 548.5)"

                  fill="none" stroke="#000" stroke-width="1" opacity="0.2"/>

          </g>

        </svg>

      </div>

      <div class="uk-width-1-1">

        Select one of the <span class="md-color-blue-900">topics below</span>!

      </div>

    </div>

    <div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium" uk-grid>

      <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic>

        <div>

          <a [routerLink]="topic.alias" class="md-card">

            <div class="md-card-content">

              <h6 class="uk-text-bold">{{topic.name}}</h6>

              <div class="uk-text-secondary">

                {{topic.description}}

              </div>

            </div>

          </a>

        </div>

      </ng-template>

    </div>

  </div>

</div>

<modal-alert #deleteTopicModal (alertOutput)="deleteTopic()"></modal-alert>