95 lines
6.5 KiB
HTML
95 lines
6.5 KiB
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 "MAC") 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"></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 nicht öffentlich
|
|
einsehbar und werden von uns nicht weitergegeben 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="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>
|