updateInformation.pug 12.9 KB
Newer Older
Rosanny Sihombing's avatar
Rosanny Sihombing committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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", 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
Rosanny Sihombing's avatar
Rosanny Sihombing committed
24
                            if user.isM4labIdp
Rosanny Sihombing's avatar
Rosanny Sihombing committed
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
                                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.
        function sendPublishRequest() {
            $.post("/sendPublishRequest", {projectName: $("#name").val()}, function(resp){
                alert(resp)
            })
        }

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