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-blur="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="center" layers="layers" markers="markers" paths="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">
            <h3>Möchtest Du Status-E-Mails bekommen?</h3>
            <i class="monitoring-icon"></i>
            <p class="help-block">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </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="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ätiguns-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.
                            </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>