ffffng/app/views/directives/nodeForm.html

<form name="nodeForm" method="post" role="form" ng-submit="onSubmit(node)" novalidate>
    <div class="main-error" ng-if="error">{{error}}</div>
    <fieldset>
        <div class="node-data">
            <h3>Knotendaten</h3>
            <div class="hostname" ng-class="{'has-error' : hasError('hostname')}">
                <label for="hostname">Knotenname</label>
                <f-help text="Das ist der Name, der auch auf der Karte auftaucht."></f-help>
                <input type="text" id="hostname" name="hostname" placeholder="z. B. Lisas-Freifunk" ng-model="node.hostname" ng-pattern="constraints.hostname.regex" ng-required="!constraints.hostname.optional" />
                <span class="feedback" ng-if="hasError('hostname')">
                    Knotennamen dürfen maximal 32 Zeichen lang sein und nur Klein- und Großbuchstaben, sowie Ziffern, - und _ enthalten.
                </span>
            </div>
            <div class="key" ng-class="{'has-error' : hasError('key')}">
                <label for="key">VPN-Schlüssel (bitte nur weglassen, wenn Du weisst, was Du tust)</label>
                <f-help text="Dieser Schlüssel wird verwendet, um die Verbindung Deines Routers zu den Gateway-Servern abzusichern."></f-help>
                <input type="text" id="key" name="key" placeholder="Dein 64-stelliger VPN-Schlüssel" ng-model="node.key" ng-pattern="constraints.key.regex" ng-required="!constraints.key.optional" />
                <span class="feedback" ng-if="hasError('key')">
                    Der angegebene VPN-Schlüssel ist ungültig.
                </span>
            </div>
            <div class="mac" ng-class="{'has-error' : hasError('mac')}">
                <label for="mac">MAC-Adresse</label>
                <f-help text="
                    Die MAC-Adresse (kurz &quot;MAC&quot;) steht üblicherweise auf dem Aufkleber auf der Unterseite deines Routers.
                    Sie wird verwendet, um die Daten Deines Routers auf der Karte korrekt zuzuordnen.
                "></f-help>
                <input type="text" id="mac" name="mac" placeholder="z. B. 12:34:56:78:9a:bc oder 123456789abc" ng-model="node.mac" ng-pattern="constraints.mac.regex" ng-required="!constraints.mac.optional" />
                <span class="feedback" ng-if="hasError('mac')">
                    Die angegebene MAC-Adresse ist ungültig.
                </span>
            </div>
        </div>
        <div class="node-position">
            <h3>Wo soll Dein Router stehen?</h3>
            <div class="row">
                <div class="coords col-md-4" ng-class="{'has-error' : hasError('coords')}">
                    <p class="help-block">
                        Wenn Du möchtest, dass Dein Knoten an der richtigen Stelle auf der
                        <a href="{{ config.map.mapUrl }}" target="_blank">Knotenkarte</a> angezeigt wird,
                        kannst Du seine Koordinaten hier eintragen. Klicke einfach in der auf dieser Seite angezeigten Karte
                        an die Stelle, wo Dein Knoten erscheinen soll. Durch erneutes Klicken kannst Du die Position jederzeit
                        anpassen.
                    </p>
                    <input
                        type="text"
                        id="coords"
                        name="coords"
                        class="{{node.coords ? 'has-coords' : ''}}"
                        placeholder="z. B. {{config.coordsSelector.lat}} {{config.coordsSelector.lng}}"
                        ng-model="node.coords"
                        ng-pattern="constraints.coords.regex"
                        ng-required="!constraints.coords.optional"
                        ng-change="updateMap()" />
                    <i class="reset-coords" ng-if="node.coords" ng-click="resetCoords()"></i>
                    <span class="feedback" ng-if="hasError('coords')">
                        Bitte gib die Koordinaten wie folgt an, Beispiel: {{config.coordsSelector.lat}} {{config.coordsSelector.lng}}
                    </span>
                </div>
                <div class="col-md-8">
                    <leaflet
                        class="map"
                        center="map.center"
                        layers="map.layers"
                        markers="map.markers"
                        paths="map.paths"></leaflet>
                </div>
            </div>
        </div>
        <div class="contact-data">
            <h3>Wie können wir Dich erreichen?</h3>
            <p class="help-block">
                Deinen Namen und Deine E-Mail-Adresse verwenden wir ausschließlich, um bei Problemen mit Deinem Router oder
                bei wichtigen Änderungen Kontakt zu Dir aufzunehmen. Bitte trage eine gültige E-Mail-Adresse ein, damit wir
                Dich im Zweifel erreichen können. Deine persönlichen Daten sind selbstverständlich
                <strong>nicht öffentlich einsehbar</strong> und werden von uns <strong>nicht weitergegeben</strong>
                oder anderweitig verwendet. Versprochen!
            </p>
            <div class="row">
                <div class="col-md-6">
                    <div class="nickname" ng-class="{'has-error' : hasError('nickname')}">
                        <label for="nickname">Nickname / Name</label>
                        <input type="text" id="nickname" name="nickname" placeholder="z. B. Lisa" ng-model="node.nickname" ng-pattern="constraints.nickname.regex" ng-required="!constraints.nickname.optional" />
                        <span class="feedback" ng-if="hasError('nickname')">
                            Nicknames dürfen maximal 64 Zeichen lang sein und nur Klein- und Großbuchstaben, sowie Ziffern, - und _ enthalten. Umlaute sind erlaubt.
                        </span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="email" ng-class="{'has-error' : hasError('email')}">
                        <label for="email">E-Mail-Adresse</label>
                        <input type="email" id="email" name="email" placeholder="z. B. lisa@{{config.community.domain}}" ng-model="node.email" ng-pattern="constraints.email.regex" ng-required="!constraints.email.optional" />
                        <span class="feedback" ng-if="hasError('email')">
                            Die angegebene E-Mail-Adresse ist ungültig.
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="monitoring-data" ng-if="config.monitoring.enabled">
            <h3>Möchtest Du automatisiert Status-E-Mails bekommen?</h3>
            <i class="monitoring-icon"></i>
            <p class="help-block">
                Du kannst Dich automatisiert benachrichtigen lassen, sobald Dein Knoten längere Zeit offline ist.
                Die erste E-Mail bekommst Du nach 3 Stunden, nach einem Tag gibt es dann nochmal eine Erinnerung. Sollte
                Dein Knoten nach einer Woche immernoch offline sein, bekommst Du eine letzte Status-E-Mail.
            </p>
            <p class="help-block">
                Du kannst den automatisierten Versand von Status-E-Mails hier selbstverständlich jederzeit
                wieder deaktivieren.
            </p>
            <div class="row clearfix">
                <div class="col-md-12">
                    <div class="monitoring">
                        <input type="checkbox" id="monitoring" name="monitoring" ng-model="node.monitoring" />
                        <label for="monitoring">
                            Informiert mich, wenn mein Knoten offline ist
                        </label>
                    </div>
                </div>
                <div class="col-md-12" ng-if="monitoringActive()">
                    <div class="monitoring-active-info" role="alert">
                        <i class="icon"></i>
                        <div class="message">
                            <p>
                                Der Versand von Status-E-Mails ist für Deinen Knoten aktiv. Möchtest Du keine Status-E-Mails
                                mehr erhalten, entferne einfach das Häkchen oberhalb dieser Box und klicke unten auf „Daten ändern“.
                            </p>
                            <p ng-if="node.email">
                                <i class="fa fa-envelope-o"></i> <strong>{{node.email}}</strong>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-12" ng-if="monitoringInitialConfirmationRequired()">
                    <div class="monitoring-confirmation-info" role="alert">
                        <i class="icon"></i>
                        <div class="message">
                            <p>
                                Zur Bestätigung Deiner E-Mail-Adresse schicken wir Dir nach dem Speichern Deiner Knotendaten
                                eine E-Mail mit einem Bestätigungs-Link. Erst nach der Bestätigung deiner E-Mail-Adresse
                                wirst Du informiert, falls Dein Knoten längere Zeit offline ist.
                            </p>
                            <p>
                                Die Inbetriebnahme Deines Knotens kannst Du selbstverständlich unabhängig von der Bestätigung
                                immer sofort duchführen.
                            </p>
                            <p ng-if="node.email">
                                <i class="fa fa-envelope-o"></i> <strong>{{node.email}}</strong>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-12" ng-if="monitoringConfirmationPending() && !monitoringInitialConfirmationRequired()">
                    <div class="monitoring-confirmation-pending-info" role="alert">
                        <i class="icon"></i>
                        <div class="message">
                            <p>
                                Deine E-Mail-Adresse ist noch nicht bestätigt. Erst nach der Bestätigung deiner E-Mail-Adresse
                                wirst Du informiert, falls Dein Knoten längere Zeit offline ist.
                            </p>
                            <p>
                                Zur Bestätigung Deiner E-Mail-Adresse schicken wir Dir nach einem Klick auf „Daten ändern“ unten
                                nochmal eine E-Mail mit einem Bestätiguns-Link. Möchtest Du keine Status-E-Mails erhalten,
                                entferne einfach das Häkchen oberhalb dieser Box und klicke dann unten auf „Daten ändern“.
                            </p>
                            <p>
                                Die Inbetriebnahme Deines Knotens kannst Du selbstverständlich unabhängig von der Bestätigung
                                immer sofort duchführen.
                            </p>
                            <p ng-if="node.email">
                                <i class="fa fa-envelope-o"></i> <strong>{{node.email}}</strong>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="buttons">
            <button class="save {{action}}" type="submit" ng-switch="action">
                <span ng-switch-when="create"><i class="fa fa-dot-circle-o"></i> Knoten anmelden</span>
                <span ng-switch-when="update"><i class="fa fa-pencil"></i> Daten ändern</span>
            </button>
            <button class="cancel" type="reset" ng-click="cancel()">
                <i class="fa fa-times"></i> Abbrechen
            </button>
        </div>
    </fieldset>
</form>