Synnefo

{% load i18n %}

<div id="networks" class="separator"></div>

<div id="networks-container">

    <!-- the create button -->

    <div id="networks-createcontainer">

        <a id="networkscreate" rel="#networkswizard" href="#">{% trans "Create New +" %}</a>

    </div>

    <div class="network" id="internet-template">

        <div class="actions">

            <a href="#" class="action-network-add">{% trans "Add Machine" %}</a>

        </div>    

        <div class="state">

            <div class="status">{% trans "Public Network" %}</div>

            <div class="indicator"></div>

            <div class="indicator"></div>

            <div class="indicator"></div>

            <div class="indicator"></div>

        </div>    

        <img class="network-logos" src="/static/internet.png" />

        <div href="#" class="name-div">

            <h5 class="namecontainer">

                <span class="name">{% trans "Internet" %}</span>

            </h5>

        </div>

        <h5 class="network-machines">

            {% trans "Show:" %} <span class="show-machines">{% trans "machines" %} (2)</span>

        </h5>

        <div class="network-contents">

            <div class="network-placeholder">

                <div class="network-contents-start-separator"></div>

                <div class="network-machine" id="machine-template">

                    <div class="machine-actions">

                        <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>

                        <a href="#" class="action-details">{% trans "Details" %}</a>

                    </div>        

                    <div class="state">

                        <div class="status"><span class="discreet">IPv4:</span> 192.94.73.15</div>

                        <div class="status"><span class="discreet">IPv6:</span> vv</div>

                        <img class="spinner" style="display:none" src="/static/progress.gif" />

                        <img class="wave" style="display:none" src="/static/wave.gif" />

                    </div>

                    <img class="logo" src="/static/machines/debian-on.png" />

                    <div class='network-remove-machine'><span class="remove-icon">X</span></div>     

                    <div href="#" class="machine-name-div">

                        <h5 class="namecontainer editable">

                            <span class="name">my desktop1</span><span class="rename"></span>

                            <div class="editbuttons" style="display:none">

                                <span class="save" />

                                <span class="cancel" />

                            </div>

                        </h5>

                    </div>

                    <h5>

                        <span class="ip">{% trans "IPs" %}</span> | 

                        <span class="show-firewall">{% trans "Firewall" %}</span> 

                        (<span class="firewall-on">{% trans "On" %}</span>)   

                    </h5>

                    <div class="firewall-content">

                        <div class="firewall-contents-start-separator"></div>

                        <input type="radio" class="checkboxes" name="image-id1" /> 

                        <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span>

                        <br />

                        <input type="radio" class="checkboxes" name="image-id1" /> 

                        <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span>

                        <br />

                        <input type="radio" class="checkboxes" name="image-id1" /> 

                        <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span>

                        <br />

                        <input type="radio" class="checkboxes" name="image-id1" /> 

                        <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>

                        <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>

                        <div class="firewall-contents-end-separator"></div>

                    </div>

                </div>

                <div class="network-separator machines"></div>

                <div class="network-machine" id="machine-template">

                    <div class="machine-actions">

                        <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>

                        <a href="#" class="action-details">{% trans "Details" %}</a>

                    </div>        

                    <div class="state">

                        <div class="status"><span class="discreet">IPv4:</span> 192.94.73.18</div>

                        <div class="status"><span class="discreet">IPv6:</span> vv</div>

                        <img class="spinner" style="display:none" src="/static/progress.gif" />

                        <img class="wave" style="display:none" src="/static/wave.gif" />

                    </div>

                    <img class="logo" src="/static/machines/windows-off.png" />

                    <div class='network-remove-machine'><span class="remove-icon">X</span></div>

                    <div href="#" class="machine-name-div">

                        <h5 class="namecontainer editable">

                            <span class="name">my desktop1</span><span class="rename"></span>

                            <div class="editbuttons" style="display:none">

                                <span class="save" />

                                <span class="cancel" />

                            </div>

                        </h5>

                    </div>

                    <h5>

                        <span class="ip">{% trans "IPs" %}</span> | 

                        <span class="show-firewall" href="#">{% trans "Firewall" %}</span> 

                        (<span class="firewall-off">{% trans "Off" %}</span>)   

                    </h5>  

                    <div class="firewall-content">

                        <div class="firewall-contents-start-separator"></div>

                        <input type="radio" class="checkboxes" name="image-id2" /> 

                        <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span>

                        <br />

                        <input type="radio" class="checkboxes" name="image-id2" /> 

                        <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span>

                        <br />

                        <input type="radio" class="checkboxes" name="image-id2" /> 

                        <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span>

                        <br />

                        <input type="radio" class="checkboxes" name="image-id2" /> 

                        <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>

                        <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>

                        <div class="firewall-contents-end-separator"></div>

                    </div>

                </div>

                <div class="network-separator machines"></div>

                <div class="empty-network-slot" id="machine-template">

                    <div class='network-add-machine'><span class="add-icon">+</span></div>

                </div>

            </div>

            <div class="network-contents-end-separator"></div>

        </div>

    </div>

    <div id="internet-separator"></div>

    <div id="private-networks">

        <div class="network" id="network-template">

            <div class="actions">

                <a href="#" class="action-add">{% trans "Add Machine" %}</a>

                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>

                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>

            </div>    

            <div class="state">

                <div class="status">{% trans "Private Network" %}</div>

                <div class="indicator"></div>

                <div class="indicator"></div>

                <div class="indicator"></div>

                <div class="indicator"></div>

            </div>    

            <img class="network-logos" src="/static/network.png" />

            <div href="#" class="name-div">

                <h5 class="namecontainer">

                    <span class="name">{% trans "My Network 1" %}</span><span class="rename-network"></span>

                </h5>

            </div>

            <h5 class="network-machines">

                {% trans "Show:" %} <span class="show-machines">{% trans "machines" %} (2)</span>

            </h5>

            <div class="network-contents">

                <div class="network-placeholder">

                    <div class="network-contents-start-separator"></div>

                    <div class="network-machine" id="machine-template">

                        <div class="machine-actions">

                            <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>

                            <a href="#" class="action-details">{% trans "Details" %}</a>

                        </div>        

                        <div class="state">

                            <div class="status"><span class="discreet">IPv4:</span> 192.94.73.15</div>

                            <div class="status"><span class="discreet">IPv6:</span> vv</div>

                            <img class="spinner" style="display:none" src="/static/progress.gif" />

                            <img class="wave" style="display:none" src="/static/wave.gif" />

                        </div>

                        <img class="logo" src="/static/machines/debian-on.png" />

                        <div class='network-remove-machine'><span class="remove-icon">X</span></div>     

                        <div href="#" class="machine-name-div">

                            <h5 class="namecontainer editable">

                                <span class="name">my desktop1</span><span class="rename"></span>

                                <div class="editbuttons" style="display:none">

                                    <span class="save" />

                                    <span class="cancel" />

                                </div>

                            </h5>

                        </div>

                        <h5>

                            <span class="machine-connect">{% trans "Connect" %}</span> {% trans "to manage private IPs" %}

                        </h5>

                        <div class="firewall-content">

                            firewall content

                        </div>

                    </div>

                    <div class="network-separator machines"></div>

                    <div class="network-machine" id="machine-template">

                        <div class="machine-actions">

                            <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>

                            <a href="#" class="action-details">{% trans "Details" %}</a>

                        </div>        

                        <div class="state">

                            <div class="status"><span class="discreet">IPv4:</span> 192.94.73.18</div>

                            <div class="status"><span class="discreet">IPv6:</span> vv</div>

                            <img class="spinner" style="display:none" src="/static/progress.gif" />

                            <img class="wave" style="display:none" src="/static/wave.gif" />

                        </div>

                        <img class="logo" src="/static/machines/ubuntu-on.png" />

                        <div class='network-remove-machine'><span class="remove-icon">X</span></div>     

                        <div href="#" class="machine-name-div">

                            <h5 class="namecontainer editable">

                                <span class="name">my desktop1</span><span class="rename"></span>

                                <div class="editbuttons" style="display:none">

                                    <span class="save" />

                                    <span class="cancel" />

                                </div>

                            </h5>

                        </div>

                        <h5>

                            <span class="machine-connect">{% trans "Connect" %}</span> {% trans "to manage private IPs" %}

                        </h5>

                    </div>

                    <div class="network-separator machines"></div>

                    <div class="empty-network-slot" id="machine-template">

                        <div class='network-add-machine'><span class="add-icon">+</span></div>

                    </div>

                </div>

                <div class="network-contents-end-separator"></div>

            </div>

        </div>

        <div class="network-separator"></div>

        <div class="network" id="network-template">

            <div class="actions">

                <a href="#" class="action-add">{% trans "Add Machine" %}</a>

                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>

                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>

            </div>    

            <div class="state">

                <div class="status">{% trans "Private Network" %}</div>

                <div class="indicator"></div>

                <div class="indicator"></div>

                <div class="indicator"></div>

                <div class="indicator"></div>

            </div>    

            <img class="network-logos" src="/static/network.png" />

            <div href="#" class="name-div">

                <h5 class="namecontainer">

                    <span class="name">{% trans "My Network 2" %}</span><span class="rename-network"></span>

                </h5>

            </div>

            <h5 class="network-machines"> 

                {% trans "Show:" %} <span class="show-machines">{% trans "machines" %} (0)</span>

            </h5>

            <div class="network-contents">

                <div class="network-placeholder">

                    <div class="network-contents-start-separator"></div>

                    <div class="empty-network-slot" id="machine-template">

                        <div class='network-add-machine'><span class="add-icon">+</span></div>

                    </div>

                </div>

                <div class="network-contents-end-separator"></div>

            </div>

        </div>

        <div class="network-separator"></div>

        <div class="network" id="network-template">

            <div class="actions">

                <a href="#" class="action-add">{% trans "Add Machine" %}</a>

                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>

                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>

            </div>    

            <div class="state">

                <div class="status">{% trans "Private Network" %}</div>

                <div class="indicator"></div>

                <div class="indicator"></div>

                <div class="indicator"></div>

                <div class="indicator"></div>

            </div>    

            <img class="network-logos" src="/static/network.png" />

            <div href="#" class="name-div">

                <h5 class="namecontainer">

                    <span class="name">{% trans "My Network 3" %}</span><span class="rename-network"></span>

                </h5>

            </div>

            <h5 class="network-machines">

                {% trans "Show:" %} <span class="show-machines">{% trans "machines" %} (0)</span>

            </h5>

            <div class="network-contents">

                <div class="network-placeholder">

                    <div class="network-contents-start-separator"></div>

                    <div class="empty-network-slot" id="machine-template">

                        <div class='network-add-machine'><span class="add-icon">+</span></div>

                    </div>

                </div>

                <div class="network-contents-end-separator"></div>

            </div>

        </div>

    </div>

</div>

<div id="networks" class="separator"></div>

<script>

// hide the all of the networks contents

$(".network-contents").hide();

// toggle the component with class network-contents

$(".show-machines").click(function() {

    $(this).parent().next(".network-contents").slideToggle(600);

});

// toggle the component with class network-contents

$(".network-logos").click(function() {

    $(this).siblings(".network-contents").slideToggle(600);

});

// intercept click to remove machine from network 

$(".remove-icon").click(function() {

    $(this).parent().parent().next('div.network-separator').fadeOut();

    $(this).parent().parent().fadeOut();

});

// intercept click to add machine to network

$(".add-icon").click(function() {

    //var newEntry = $(".network-machine")[0].clone();

    //$(this).parent().parent().append(newEntry);

});

// hide the all of the firewall contents

$(".firewall-content").hide();

// toggle the component with class firewall-contents

$(".show-firewall").click(function() {

    $(this).parent().next(".firewall-content").slideToggle(600);

});

//hide firewall content on apply click

$(".firewall-apply").click(function() {

    $(this).parent().slideToggle(600);

});

</script>