updateInformation.pug

doctype html
html(lang="de")
  head
    title= "Update a website"
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
    link(rel="stylesheet", type="text/css", href="/css/bootstrap.min.css")
    link(rel="stylesheet", type="text/css", href="/css/m4lab.css")
    link(rel="stylesheet", type="text/css", href="/css/m4lab-mobile.css")
    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
  body
    div(class="container")
        div(class="row min-vh-100 flex-column flex-md-row")
            aside(class="col-12 col-md-3 p-0 flex-shrink-1")
                nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
                    div(class="collapse navbar-collapse")
                        ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
                            li(class="nav-item")
                                a(class="nav-link pl-0 text-nowrap" href="/account/")
                                    span(class="font-weight-bold" style="color:black;") #{user.firstName} #{user.lastName}
                            li(class="nav-item")
                                a(class="nav-link pl-0" href="/account/profile")
                                    i(class="fa fa-user fa-fw")
                                    span(class="d-none d-md-inline") Benutzerprofil
                            if user.isM4labIdp
                                li(class="nav-item")
                                    a(class="nav-link pl-0" href="/account/security")
                                        i(class="fa fa-lock fa-fw")
                                        span(class="d-none d-md-inline") Sicherheitseinstellungen
                            li(class="nav-item")
                                a(class="nav-link pl-0" href="/account/services")
                                    i(class="fa fa-tasks fa-fw" style="color:black;")
                                    span(class="d-none d-md-inline" style="color:black;") Projekte und Dienste
                            li(class="nav-item")
                                a(class="nav-link pl-0" href="/logout" style="color:red;")
                                    i(class="fa fa-sign-out-alt fa-fw")
                                    span(class="d-none d-md-inline") Logout
            main(class="col bg-faded py-3 flex-grow-1")
                nav(aria-label="breadcrumb")
                    ol(class="breadcrumb")
                        li(class="breadcrumb-item")
                            a(href="/account/") Konto
                        li(class="breadcrumb-item")
                            a(href="/account/services") Projekte und Dienste
                        li(class="breadcrumb-item active" aria-current="page") Information aktualisieren

                if flash.success
                    div.alert.alert-success.alert-dismissible #{flash.success}
                        a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
                if flash.error
                    div.alert.alert-danger.alert-dismissible.fade.show #{flash.error}
                        a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
                h3(class="pb-2") Information aktualisieren
                div(class="mx-4")
                    form(method="POST", encType="multipart/form-data")
                        div(class='form-group row')
                            label(for="name", class="col-sm-2") Name
                            div(class="col-sm-8")
                                input#name(name="name", type="text", class="form-control", value=information.name, placeholder="Name", maxlength="75" required)
                        div(class="form-group row")
                            label(for="description", class="col-sm-2") Beschreibung
                            div(class="col-sm-8")
                                textarea#description(name="description", type="text", class="form-control", placeholder="Beschreibung", maxlength="500" required) #{information.desc}
                        div(class="form-group row")    
                            label(for="logo", class="col-sm-2") Projektlogo
                            div(class="col-sm-8")
                                div(class="form-group row")
                                    img(src=information.logo, width="100" height="100")
                                div(class="form-group row")
                                    input#logo(name="logo", class="form-control-file", type="file")
                                p <small>(Max file size is 80 KB.)</small>
                        input(type="submit", class="btn btn-primary", value="Speichern")
                hr
                div(class="mx-4") 
                    p <b><i>[ANMERKUNG]</b></i> Bitte stellen Sie sicher in GitLab, dass sie Folgendes abgeschlossen haben, bevor Sie Ihre Webseite veröffentlichen:
                    div(class="help")
                        div(class="card")
                            - let indexLink = "https://transfer.hft-stuttgart.de/gitlab/"+information.path+"/-/edit/master/public/home/index.html"
                            - let settingLink = "https://transfer.hft-stuttgart.de/gitlab/"+information.path+"/-/edit/master/public/settings.js"
                            div(class="card-header")
                                div(class="card-title")
                                    | <a class="collapsed" data-toggle="collapse" href="#collapse-index" aria-expanded="false" aria-controls="collapse-index">
                                    | 1. Bearbeiten Sie ihre <i>index.html</i></a>
                            div(id="collapse-index" class="card-body collapse")
                                ol
                                    li Klicken Sie <a href=#{indexLink} target="_blank"><i>hier</i></a>, um Ihre <i>index.html</i> in GitLab zu öffnen.
                                    li Bearbeiten Sie ihre Datei.
                                    li Um die Änderungen zu speichern und auf ihrer Seite sofort zu übernehmen, klicken Sie auf <i>Commit changes</i>
                                        img(src="/img/help/save_file.png", class="img-fluid", style="border: 1px solid gray;", alt="index.html")
                                    li Sobald Sie Änderungen an Ihrer <i>index.html</i> vornehmen, wird Ihre Website veröffentlicht.
                            div(class="card-header")
                                div(class="card-title")
                                    | <a class="collapsed" data-toggle="collapse" href="#collapse-setting" aria-expanded="false" aria-controls="collapse-setting">2. Anpassen der Einstellungen in <i>settings.js</i></a>
                            div(id="collapse-setting" class="card-body collapse")
                                ol
                                    li Klicken Sie <a href=#{settingLink} target="_blank"><i>settings.js</i></a>, um Ihre <i>settings.js</i> in GitLab zu öffnen.
                                    li Bearbeiten Sie ihre Datei.
                                    li Hier sehen Sie die Standardwerde für Soziale Netzwerke und persönliche Webseiten eines Teilnehmers sowie den Standardavatar. Es wird empfohlen, diese Werte nicht zu ändern, aber Sie können weitere Soziale Netzwerke hinzufügen.
                                    img(src="/img/help/default_settings.png", class="img-fluid", style="border: 1px solid gray;")
                                    li Diese Schalter kontrollieren, welche Teile der gitlab-Seite angezeigt werden sollen. Wenn Sie also beispielsweise nur eine einzige Seite haben, benötigen Sie kein Menü und können den Wert für 'menu' auf OFF stellen.
                                    img(src="/img/help/switches.png", class="img-fluid", style="border: 1px solid gray;")
                                    li Hier ändern Sie das Projektlogo. Das Logo wird am oberen Rand der Seite mittig angezeigt. Wenn der Schalter für 'project logo' auf OFF steht, wird es nicht angezeigt.
                                    img(src="/img/help/pr_logo.png", class="img-fluid", style="border: 1px solid gray;")
                                    li Hier ändern Sie das Menü Ihrer gitlab-Seite. Ein Menü kann entweder auf einen Unterordner/ template verweisen oder aber auf einen externen Link, z.B. eine Demo. Sie können Menüeinträge hinzufügen oder entfernen. Das Menü wird mit dem Schalter 'OFF' verborgen. Vergessen Sie nicht den Schrägstrich am Ende eines Menülinks, wenn dieser auf einen Ordner zeigt.
                                    img(src="/img/help/menu.png", class="img-fluid", style="border: 1px solid gray;")
                                    li Hier ändern Sie die Teilnehmenden. Sie können die Standardwerte für Soziale Netzwerke (diese beinhalten die HFT-Kanäle) oder Ihr eigenen Profile verwenden. Sie können auf Ihre persönliche Webseite verlinken. Sie können soziale Netzwerke hinzufügen oder entfernen. Sie können auch einen persönlichen Avatar oder den Standard-Avatar (DEFAULT.avatar) verwenden.
                                    img(src="/img/help/partic.png", class="img-fluid", style="border: 1px solid gray;")
                                    li Hier ist ein Beispiel mit zwei Teilnehmenden:
                                    img(src="/img/help/partic2.png", class="img-fluid", style="border: 1px solid gray;")
                                    li Hier ändern Sie die Fußzeilenlogos z.B. zu denen von Projektpartnern. Wenn Sie das Logo nicht mit einer externen Webseite verlinken wollen, verwenden Sie EMPTY_LINK als Wert für href. Der Titel title wird bei Mouse-Hover über dem Logo erscheinen.
                                    img(src="/img/help/f_logos.png", class="img-fluid", style="border: 1px solid gray;")
                                    li Klicken Sie anschließend auf <i>Commit changes</i>, um die Änderungen zu speichern.
                                    img(src="/img/help/edit_settings_generic.png", class="img-fluid", style="border: 1px solid gray;")

                hr
                div(class="mx-4")
                    div(class="alert alert-danger" role="alert") <h5><strong>Webseite löschen</strong></h5>
                        p Dies wird <strong><em>#{information.name}</em></strong> sofort endgültig löschen, inklusive ihrer Repositorien und aller zugehöriger Ressourcen.
                        p Sind Sie WIRKLICH SICHER, dass Sie diese Webseite löschen wollen? 
                        button(type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteWebsiteConfirmation") Löschen

    // Modal
    div(class="modal" id="deleteWebsiteConfirmation" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true")
        div(class="modal-dialog" role="document")
            div(class="modal-content")
                div(class="modal-header")
                    h5(class="modal-title" id="modalLabel") Sind Sie WIRKLICH SICHER?
                    button(type="button" class="close" data-dismiss="modal" aria-label="Close")
                        span(aria-hidden="true") &times;
                div(class="modal-body")
                    | <p>Sie sind dabei, diese Webseite, ihr Repositorium und alle zugehörigen Ressourcen, inklusive aller Inhalte, Bilder etc. endgültig zu löschen.</p>
                    | <p>Sobald eine Webseite endgültig gelöscht ist, kann sie nicht wiederhergestellt werden. <strong>Diese Aktion kann nicht rückgängig gemacht werden.</strong></p>
                div(class="modal-footer")
                    form(method="POST", action="/account/deleteProject?_method=DELETE", encType="multipart/form-data")
                        input(name="id", value=information.id, type="hidden")
                        button(type="button" class="btn btn-primary mx-2" data-dismiss="modal") Abbrechen, Webseite behalten
                        button(type="submit" class="btn btn-danger") Ja, Webseite löschen

    // jQuery
    script(src="https://code.jquery.com/jquery-3.3.1.min.js")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
    // jquery-loading-overlay
    script(src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.7/dist/loadingoverlay.min.js")
    // Bootstrap
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
    // M4_LAB
    script(src="/js/headfoot.js")
    script(src="/js/mobile.js")
    script.
        function sendPublishRequest() {
            $.post("/sendPublishRequest", {projectName: $("#name").val()}, function(resp){
                alert(resp)
            })
        }

         $("form").submit(function(){
            $.LoadingOverlay("show")
        });